CODEWITHSUNDEEP
javascriptpuppeteer
harunB10
harunB10

Reputation: 5197

Fetch element with dynamic ID in Puppeteer

I'm trying to load the page and take a screenshot of a login form. However, the form is shown after some delay. So if I set timeout to 10 seconds then I can see the form. Otherwise I get the screenshot of blank page.

But I want to do it without timeout and found waitForSelector function. The problem is, all elements in DOM have dynamically created ID (e.g. form-1234).. I've tried this but id doesn't work...

const puppeteer = require('puppeteer');

function delay(time) {
  return new Promise(function(resolve) { 
      setTimeout(resolve, time)
  });
}

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost/login');
  //await delay(10000);
  await page.waitForSelector('[form-^[0-9]]');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})()

Upvotes: 2

Views: 1113

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074238

[form-^[0-9]] isn't a valid CSS selector.

If you want to wait for any element whose id starts with form-, you'd use an attribute-starts-with selector (^=): [id^=form-]

So perhaps:

(async () => {
    try {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto("http://localhost/login");
        await page.waitForSelector("[id^=form-]");     // ***
        await page.screenshot({ path: "example.png" });
      
        await browser.close();
    } catch (e) {
        // ...handle/report error...
    }
})();

Upvotes: 4

Related Questions