Puppeteer - wait for element to have certain value

Question

So question is - how to wait until an element have a certain value? For example, some button on certain page changes value of input field from "No Value" to "Value X". 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 (page.evaluate that returns value of input maybe?).

Answer 1

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();
});