Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

$eval can't find existing selector

See original GitHub issue

Puppeteer version: 1.3
Platform / OS version: MacOS Sierra
URLs (if applicable): https://archive.kbb1.com/lessons
Node.js version: 9.0.8

I’m attempting to clear two input fields that contain dates range. Following code snippet clears first input field but fails to clear the second:

            await page.$eval("div.five.wide.column > div.ui.grid > div:nth-child(2) > div:nth-child(1) > div > input[type=\"text\"]", (selector) => {
                selector.value = "";
            });
            await page.$eval("div.five.wide.column > div.ui.grid > div:nth-child(2) > div:nth-child(2) > div > input[type=\"text\"]", (selector) => {
                selector.value = "";
            });

Steps to reproduce:

            await page.goto('https://archive.kbb1.com/lessons', {waitUntil: 'networkidle2'});
            // Clicking on Date filter
            // Click Apply and check if filter tag is created
            await Promise.all([
                await page.click(".ui.blue.large.pointing.secondary.index-filters.menu div a:nth-child(4)"),
                page.waitForSelector("div.five.wide.column > div.ui.grid > div:nth-child(2) > div:nth-child(2) > div > input")
            ]);

            await page.$eval("div.five.wide.column > div.ui.grid > div:nth-child(2) > div:nth-child(1) > div > input[type=\"text\"]", (selector) => {
                selector.value = "";
            });
            await page.$eval("div.five.wide.column > div.ui.grid > div:nth-child(2) > div:nth-child(2) > div > input[type=\"text\"]", (selector) => {
                selector.value = "";
            });

After executing following snippet, start date range field will be empty, but end date range field will still contain old date

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

zhaoqizecommented, Jul 30, 2018

I also encountered the same problem. use page.evaluate print error document is not defined. But I use page.evaluateHandle fixed it.

2reactions

mboesercommented, May 11, 2018

might be a good idea to use page.waitForSelector since the element only appear once there’s interaction within the page and then call the next command on that element to ensure it’s available when executing that code. Lately I’ve been appending a catch to all my awaits when debugging. await page.evaluate(document.querySelector('div.five.wide.column > div.ui.grid > div:nth-child(2) > div:nth-child(2) > div > input').value='').catch((e)=>{console.error(e)}); Hope this helps.

Top Results From Across the Web

page.$eval() not finding selector, selector works in console

I have tried using page.$eval(), page.evaluate() and page.evaluateHandle() using document.querySelector(). const url = await page ...

Page.$$eval() method - Puppeteer

This method runs Array.from(document.querySelectorAll(selector)) within the page and passes the result as the first argument to the pageFunction.

Puppeteer documentation - DevDocs

Puppeteer 7.1.0 API documentation with instant search, offline support, keyboard shortcuts, mobile version, and more.

Scraping & asserting on page elements - Checkly

Scrape the relevant item from the current page. ... eval() method which is a very powerful way to actually run a selector query...

ElementHandle class - puppeteer library - Dart API - Pub.dev

Resolves to true if the element is visible in the current viewport. ... $$eval<T>(String selector, String pageFunction, {List? args}) → Future<T?> This ...