17

How can I wait until an element has a certain value?

For example, some button on a page changes the value of an input field from "No Value" to "Value X". The problem is, I don't know how much time will it take so page.waitFor() is not an option.

I thought I could use page.waitForSelector(input:contains('No Value')); but that does not work as far as I understand.

Possibly page.waitForFunction() should work, but I am not sure what function to write there. Would I use a page.evaluate that returns the value of the input maybe?

Improve this question

1 Answer 1

Reset to default
31

According to docs page.waitForFunction will wait until the function passed to it (as a closure or a string) returns a truthy value.

const puppeteer = require('puppeteer'); puppeteer.launch({headless : false}).then(async browser => { const page = await browser.newPage(); await page.goto(url); await page.waitForFunction('document.getElementById("wait").value != "No Value"'); console.log('Value changed!'); await browser.close(); });
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

How would this waitForFunction function call look like when using ElementHandles?
@Ini Sorry can't advise on that, honestly I always prefer the explicit nature of page.evaluate and never ever even touch handles.
No problem. I just think that using a string for code looks IMO pretty horrible ('document.getElementById("wait").value != "No Value"')
I feel quite the opposite way :) to me it feels short and simple enough.
@Ini try this: await page.waitForFunction(`document.getElementById("wait").value != "No Value"`);

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.