[BUG] WebKit/Firefox do not emit request/response events if its a cache hit for img resources

[vsravuri]

Context:

• Playwright Version: [@playwright/test@next]
• Operating System: [Mac]
• Node.js version: [v17.2.0]
• Browser: [Firefox]
• Extra: [Not reproducible in Chromium and Webkit]

Code Snippet

const { test, expect } = require('@playwright/test');
const delay_time = ms => new Promise(res => setTimeout(res, ms));
test.describe('Repro waitForResponse Bug', () => {
    test('test1', async ({ page}) => {
        await page.goto('https://s1.demo.opensourcecms.com/wordpress/', {waitUntil: "networkidle"});
        await delay_time(10000);
        const [response1] = await Promise.all([
            page.waitForResponse(/.*header.*/),
            page.locator('text="test A"').click()
        ]);
        await delay_time(5000);
        const [response2] = await Promise.all([
            page.waitForResponse(/.*header.*/),
            page.locator('#menu-item-85').click()
        ]);
        await delay_time(10000);
    });

});

Describe the bug

Above mentioned code works fine in Chromium and Webkit but fails in Firefox. After page load click to 'test A' succeeds but click to 'menu-item-85' will timeout. It appears if the request is served from browser cache, this issue is noticed in Firefox.

Error

 Timeout of 30000ms exceeded.

    page.waitForResponse: Page closed
    =========================== logs ===========================
    waiting for response /.*header.*/
    ============================================================

      33 |         await delay_time(10000);
      34 |         const [response1] = await Promise.all([
    > 35 |             page.waitForResponse(/.*header.*/),
         |                  ^
      36 |             page.locator('text="test A"').click()
      37 |         ]);
      38 |         await delay_time(5000);

[dgozman]

@vsravuri Unfortunately, the repro script does not work for me. At first, it did not find #menu-item-85, but on future runs it did not find text="test A". Does this page change under my feet?

Also, from the error above, it is actually the first response that was missing. Are you sure it is related to the cache? Perhaps header is not always requested when you click on 'test A'?

[vsravuri]

@dgozman Thanks for looking into this. You are right, the website changed after i created the repro script.

Please try this script.

const { test, expect } = require('@playwright/test');
const delay_time = ms => new Promise(res => setTimeout(res, ms));

test.describe('Repro waitForResponse Bug', () => {

    test('test1', async ({ page}) => {
        await page.goto('https://playwright.dev', {waitUntil: "networkidle"});
        await delay_time(5000);
        await page.locator('[class="navbar__item navbar__link"] >> text="API"').click();
        await delay_time(4000);
        const [response2] = await Promise.all([
            page.waitForResponse(/.*playwright-logo.*/),
            page.locator('[class="navbar__title"] >> text="Playwright"').click()
        ]);
        await delay_time(3000);
    });
});

Timeout of 30000ms exceeded.

    page.waitForResponse: Page closed
    =========================== logs ===========================
    waiting for response /.*playwright-logo.*/
    ============================================================

      35 |         await delay_time(4000);
      36 |         const [response2] = await Promise.all([
    > 37 |             page.waitForResponse(/.*playwright-logo.*/),
         |                  ^
      38 |             page.locator('[class="navbar__title"] >> text="Playwright"').click()
      39 |         ]);
      40 |         await delay_time(3000);

[vsravuri]

Noticed similar behaviour with page.waitForRequest() in Firefox