Puppeteer can't find selector

Question

I'm attempting to do a bit of web scraping using Puppeteer, but the script seems unable to find the selector I'm looking for. Basically this code:

const puppeteer = require('puppeteer');

let scrape = async () => {
const year = 18;

const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://cobbcounty.org/index.php?option=com_wrapper&view=wrapper&Itemid=2008');
await page.waitFor(5000);
var id = '';
for(i=0;i<10000;i++){
    id = i;
    await page.click('#txtCase');
    await page.keyboard.type(year + '-P-' + id);
    await page.select('#lstDoc','Estate');
}
}

scrape().then((value) => {
console.log('script ended');
});

Is giving me this error:

(node:31125) UnhandledPromiseRejectionWarning: AssertionError 
[ERR_ASSERTION]: No node found for selector: #txtCase

As far as I can tell, #txtCase is an actual selector on the page, so I don't know why puppeteer can't find it. If someone can explain to me what I'm doing wrong it would be really helpful.

Answer 1

As far as I can tell, #txtCase is an actual selector on the page, so I don't know why puppeteer can't find it.

Try loading the page and using the console to find that element.

document.querySelector('#txtCase')
null

It's not there. I know you can see it when you right-click to inspect that text field, but it's nested in an iframe. You need to access that frame, then find the button, then click on it.

const frame = await page.frames().find(f => f.name() === 'iframe');
const button = await frame.$('#txtCase');
button.click();

Answer 2

If you just want to make it work, you can make it in a kinda weird way using:

await page.mouse.click( coordinate x, coordinate y { button: 'left' })

so you don't need the selector, just the coordinates.