waitForSelector not working as intended?

Steps to reproduce

This is tested on a React App.

  await page.click(sel('sign-in'))
 // ↑ screen transition
  await page.waitForSelector(sel('main-dashboard'), { timeout: 1000 })
 // **without timeout: 1000 it crashes** I can use that or `page.waitFor(1000)`
  await page.waitForSelector(sel('btn-projects'))
  await page.click(sel('btn-projects'))
  await page.waitForSelector(sel('btn-create-project'))
 // ↑ opens modal
  await page.click(sel('btn-create-project'))
  await page.waitForSelector(sel('input-project-name'))
  await page.type(sel('input-project-name'), 'test-project')
  await page.waitForSelector(sel('btn-project-submit'))
  await page.click(sel('btn-project-submit'))
 // ↑ makes a request and closes modal
  await page.waitForSelector(sel('test-project'), { timeout: 1000 })
// ↑ **does not work. I have to use await page.waitFor(250)** the created item would show up on the dashboard
  await page.click(sel('test-project'))

I’m not sure if this is a bug or not but I think it relates to #2192

Why does await page.waitForSelector(sel('main-dashboard'), { timeout: 1000 }) work when await page.waitForSelector(sel('test-project'), { timeout: 1000 }) does not. Response from the server can take time, which is why I added the timeout: 1000. With await page.waitForSelector(sel('test-project'), { timeout: 1000 }) it does not matter how much time I give it, it wouldn’t work unless I use page.waitFor(250) The page.waitForNavigation method doesn’t work on it either.

Sometimes requests take longer, and I will have to increase the time interval to page.waitFor Right now, whenever a await page.waitForSelector does not work, I add page.waitFor(250) right about it to quick patch it. If 250 crashes, I add 500, or 1000 and so forth, which seems kinda hacky. Is there a better way of handling it?

Expected Result

After await page.click(sel('btn-project-submit')), the tests should continue to run

Actual Result

After await page.click(sel('btn-project-submit')), it does show the POST request in the server log and then hangs. Puppeteer with Jest then just returns the typical Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

Tell us about your environment:

• Puppeteer version: 1.4
• Platform / OS version: Mac
• Node.js version: 8.10

[chantlong]

@aslushnikov Let me get back to you on that matter.

[chantlong]

@aslushnikov Thanks but can you please clarify on…

With await page.waitForSelector(sel(‘test-project’), { timeout: 1000 }) it does not matter how much time I give it, it wouldn’t work unless I use page.waitFor(250) The page.waitForNavigation method doesn’t work on it either.

Sometimes requests take longer, and I will have to increase the time interval to page.waitFor Right now, whenever a await page.waitForSelector does not work, I add page.waitFor(250) right about it to quick patch it. If 250 crashes, I add 500, or 1000 and so forth, which seems kinda hacky. Is there a better way of handling it?

The timeout: 5000 doesn’t solve the problem. page.waitFor(250) solves the problem.