Generalize page.waitFor, make waitForSelector a utility on top of it.

Rationale: waitForSelector is rarely useful on its own. I have a DOM element, but it is off screen / display:none, etc.

We can make waitFor generic and execute it either upon every task (by default) or upon tasks that had specific activities in them (optional).

utilitites.waitForSelector = (selector) => {
  return page.waitFor(() => document.querySelector(selector), ['style'], selector);
}

utilitites.waitForLayout = () => {
  return page.waitFor(() => true, ['layout']);
}

utilitites.waitForFrame = () => {
  return page.waitFor(() => true, ['frame']);
}

[aslushnikov]

We’ve spent some time discussing this and here’s what we’ve agreed upon so far:

await page.waitFor(1000); // to wait for 1000ms
await page.waitFor('body div'); // to wait for the 'body div' selector in body
await page.waitFor(() => Math.random() < 0.5); // to wait for the predicate

await page.waitForSelector('body div'); // the same as page.waitFor('body div')
// wait for the 'body div' to be present and visible in the page:
await page.waitForVisible('body div');

[JakubMatyka]

I stuck on scenario when modal occurs and a button should be clicked. page.waitForSelector with flag visible: true does not work in this situation. The only way is to set timeout but I hate those