[REGRESSION]: context.pages() now works differently

Context:

• GOOD Playwright Version: [what Playwright version worked nicely?]
• BAD Playwright Version: [what Playwright version doesn’t work any more?]
• Operating System: [e.g. Windows, Linux or Mac]
• Extra: [any specific details about your environment]

-GOOD Playwright 1.0.1

-BAD Playwright 1.2.0

-Operating System: Windows 10

Code Snippet

Help us help you! Put down a short code snippet that illustrates your bug and that we can run and debug locally. For example:

const {chromium, webkit, firefox} = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
 
await page.click('[name="Add new child window"]')

//This code worked back in 1.0.1
const allPages = await context.pages();
const childWindowPage = allPages[allPages.length - 1];

///////////////////////////////////////////////////////////////////

// Now you need to do it this way (1.2.0 version)

await page.waitForTimeout(5000);

const allPages = await context.pages();
const childWindowPage = allPages[allPages.length - 1];
})();

Describe the bug

For some reason in current (1.2.0) version you must wait till page is loaded, before you can grab it and assign it to a variable via context.pages() method… This wasnt the case in 1.0.1 version.

[dgozman]

The old snippet from 1.0.1 happened to work accidentally, because sometimes page.click() was resolving after the new page has been created. In 1.2, this happens less frequently - that’s why you see that snippet does not work anymore.

Overall, Playwright does not guarantee that by the time page.click() is resolved, all the pages opened by this click are available. Moreover, this is almost impossible to guarantee, because it is hard to determine whether the new page was indeed a result of a click or not, and whether the click will open a page after a timeout.

Instead, we recommend the following way to capture popups from clicks:

const [childWindowPage] = await Promise.all([
  page.waitForEvent('popup'),
  page.click('[name="Add new child window"]')
]);

// Wait for the child page to load before accessing the content.
await childWindowPage.waitForLoadState();

// Ready to use.
const title = await childWindowPage.title();

You can find even more samples in our documentation.

[dgozman]

@MihailPertsev The actual change in 1.2.0 is that page.click() returns earlier instead of taking long enough time for the new page to appear in context.pages().

It would indeed be handy if context.pages() would give you pages immediately after click, but we cannot guarantee that because:

• click does not guarantee to create the new page instantly, for example it might do so after a timeout;
• it is hard to determine whether the new page was indeed a result of a click or not, for example it might as well be a result of some fetch() finishing;
• the new page is not initialized instantly in the browser and Playwright. Therefore, we cannot be sure that there is a page by the time page.click() resolves. The alternative would be to wait for undetermined amount of time in page.click(), but we cannot afford that.

Hopefully, this explanation helps a bit.