CODEWITHSUNDEEP
node.jspuppeteer
man
man

Reputation: 113

Explicit wait for a selector isn't working?

I'm writing a code to log in Gmail. On the password page, instead of using implicit wait, I want to use explicit wait instead. However, it is not picking up my selector?

(async () => {
const browser = await puppeteer.launch({
    headless: false
});
const page = await browser.newPage();

await page.goto('https://accounts.google.com/');
await page.$('#identifierId');
await page.keyboard.type('Test1234');
await page.click('#identifierNext > content > span');

await page.waitForSelector('#password'); //this doesnt work
// await page.waitFor(5000); this works
await page.$('#password > div.aCsJod.oJeWuf > div > div.Xb9hP > input');
await page.keyboard.type('fakePassword');
await page.click('#passwordNext > content');
);

I'm getting the error:

(node:14428) UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement at ElementHandle._clickablePoint (/Users/asd/Projects/FreeRazor/node_modules/puppeteer/lib/JSHandle.js:199:13) at processTicksAndRejections (internal/process/next_tick.js:81:5) -- ASYNC -- at ElementHandle. (/Users/asd/Projects/FreeRazor/node_modules/puppeteer/lib/helper.js:110:27) at DOMWorld.click (/Users/asd/Projects/FreeRazor/node_modules/puppeteer/lib/DOMWorld.js:367:18) at processTicksAndRejections (internal/process/next_tick.js:81:5) -- ASYNC -- at Frame. (/Users/asd/Projects/FreeRazor/node_modules/puppeteer/lib/helper.js:110:27) at Page.click (/Users/asd/Projects/FreeRazor/node_modules/puppeteer/lib/Page.js:988:29) at /Users/asd/Projects/FreeRazor/app.js:19:16 at processTicksAndRejections (internal/process/next_tick.js:81:5) (node:14428) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:14428) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Upvotes: 0

Views: 2502

Answers (1)

Thomas Dondorf
Thomas Dondorf

Reputation: 25230

The page.waitForSelector statement is working. One of the page.click calls is the problem.

Relevant part of the error message:

(node:14428) UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement
    [...]
    at Page.click (/Users/asd/Projects/FreeRazor/node_modules/puppeteer/lib/Page.js:988:29)
    at /Users/asd/Projects/FreeRazor/app.js:19:16

So the error happens in line 19. I don't know for sure which line it is, but I'm assuming it is the latter page.click call as you are saying the code works if you wait longer (page.waitFor(5000)). So it seems it takes the page longer to display the #passwordNext > content DOM element than the #password element.

Solution

You can solve this problem by putting another waitForSelector before your click to make sure the element actually exists. I even added the option { visible: true } to make sure the DOM node is also visible:

await page.waitForSelector('#passwordNext > content', { visible: true });
await page.click('#passwordNext > content');

Upvotes: 1

Related Questions