How to solve? ( Error: No element found for selector: )

Question

const puppeteer = require('puppeteer');
const path = require('path');
const creds = {
  username: "abcde",
  password2: "12345",
  password1: "123456"

};
(async() => {
  const browser = await puppeteer.launch({
    headless: false,
  });
  const page = await browser.newPage();
  try {
    await page.goto('https://deneme.com/index.html', {
      waitUntil: 'networkidle2'
    });
    await page.screenshot({
      path: 'deneme.png'
    });
    //await page.click(id="buton");
    await page.click('#buton > img')
    const newPagePromise = new Promise(x => browser.once('targetcreated', target => x(target.page())));
    const popup = await newPagePromise;

    await popup.focus('#username')
    await popup.keyboard.type(creds.username)
    await popup.focus("#password2")
    await popup.keyboard.type(creds.password2)
    await popup.focus("#password1")
    await popup.keyboard.type(creds.password1)

    await popup.click('#loginForm > table > tbody > tr:nth-child(5) > td > input[type=image]');
    await popup.once('load', () => popup.click('#page > table > tbody > tr > td > div:nth-child(6) > div > table > tbody > tr > td:nth-child(3) > span'));
    //It gives the error here.
    await popup.click('#body > div > form > center > table > tbody > tr:nth-child(1) > td:nth-child(2) > input[type=file]');
  } catch (ex) {
    console.log("Hata2: " + ex);
  }
})();

I'm getting an error where I showed in the code. And it doesn't do the next click. I checked the location and the location seems correct. Where could I have gone wrong??

Error is here:

"Error: No element found for selector: #body > div > form > center > table > tbody > tr:nth-child(1) > td:nth-child(2) > input[type=file]"

[Watch out for those hyper-rigid browser-generated selectors](https://serpapi.com/blog/puppeteer-antipatterns/#misusing-developer-tools-generated-selectors). They're liable to break with even the slightest change in the DOM. Suggest using a specific class, id or attribute. — ggorlen, Apr 25 '23 at 06:00

score 1 · Answer 1 · edited Sep 19 '22 at 13:22

1

Hello i faced the same problem and also find the solution.

in some cases selectors may be appear after the click promises performed so its better to wait for the page.

popup.waitForSelector('#body > div > form > center > table > tbody > tr:nth-child(1) > td:nth-child(2) > input[type=file]',{visible:true});

use this before the declaration of your last promise and try a run.

edited Sep 19 '22 at 13:22

njfamirm

164
2
12

answered Jul 11 '22 at 06:32

Gauravsinh Solanki

11
2

score 0 · Answer 2 · answered Jun 06 '22 at 12:48

Are you sure that the beginning of the selector should be #body and not just body? May be that it's not finding it because of that, unless you do have an element with an id="body".

If you have confirmed that the selector is correct and exists, then puppeteer is could be trying to click it before that element has loaded. A good way to do .click() functions is to waitForNavigation() directly after.

await Promise.all([
  popup.click('#loginForm > table > tbody > tr:nth-child(5) > td > input[type=image]'),
  popup.waitForNavigation({ waitUntil: 'networkidle0' })
]);

await Promise.all([
  popup.click('#page > table > tbody > tr > td > div:nth-child(6) > div > table > tbody > tr > td:nth-child(3) > span'),
  popup.waitForNavigation({ waitUntil: 'networkidle0' })
]);    

await Promise.all([
  popup.click('#body > div > form > center > table > tbody > tr:nth-child(1) > td:nth-child(2) > input[type=file]'),
  popup.waitForNavigation({ waitUntil: 'networkidle0' })
]);

Lastly, to keep your script running when you may encounter errors is by using try/catch statements. Instead of wrapping the entire script in one you could create smaller functions, each with its own try/catch and selector click.

How to solve? ( Error: No element found for selector: )

2 Answers2