CODEWITHSUNDEEP
node.jsasync-awaitpuppeteer
JoelBonetR
JoelBonetR

Reputation: 1572

Puppeteer waitForSelector not working as expected

I've this simple code chunk:

const BUSINESS = 'lalala';
await page.waitForSelector('#searchboxinput').then(
    page.evaluate( (BUSINESS) => {
        document.querySelector('#searchboxinput').value = BUSINESS
    }, BUSINESS)
 ),

If I set wait for selector -> then, I would expect then to be executed when the selector exists, but I'm getting a Cannot set property value of 'null'.

So I uderstand that document.querySelector('#searchboxinput') == undefined while I suppose that it cannot be possible as it's executed when waitForSelector promise is finished...

is that a bug or I'm missing something?

Edit:

Imagine those two as separate chunks.

await page.waitForSelector('#searchboxinput');

I'd expect the code to continue after finding the given selector (<whatever id="searchboxinput">), because I already checked that this element exists at some point during the initial load (so we can avoid the unhappy path thinking on this question).

await page.waitForSelector('#searchboxinput');
// it should AWAIT for the selector to exists, then continue the execution
page.evaluate( ( someString ) => {
    // this querySelector should not return null due to the previous await
    document.querySelector('#searchboxinput').value = someString
}, someString)

Issue is that I got Cannot set property value of 'null'

I've solved this, this is not a question on "how to" but an intent to understand why this code didn't work.

Upvotes: 2

Views: 6790

Answers (1)

vsemozhebuty
vsemozhebuty

Reputation: 13772

Not sure if I understand correctly as your chunk is syntactically not complete and not reprducible. But what if you use the returned value of page.waitForSelector()? This seems working:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: false, defaultViewport: null });

try {
  const [page] = await browser.pages();

  await page.goto('https://example.org/');

  const BUSINESS = 'lalala';
  await page.waitForSelector('a').then((element) => {
    page.evaluate((element, BUSINESS) => {
      element.textContent = BUSINESS;
    }, element, BUSINESS);
  });
} catch (err) { console.error(err); }

Upvotes: 1

Related Questions