/** * Copyright 2018 Google Inc. All rights reserved. * Modifications copyright (c) Microsoft Corporation. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { test as it, expect } from './pageTest'; import type { Frame } from 'playwright-core'; import type { TestServer } from '../../utils/testserver'; it('should navigate to empty page with networkidle', async ({ page, server }) => { const response = await page.goto(server.EMPTY_PAGE, { waitUntil: 'networkidle' }); expect(response.status()).toBe(200); }); async function networkIdleTest(frame: Frame, server: TestServer, action: () => Promise, isSetContent?: boolean) { const waitForRequest = (suffix: string) => { return Promise.all([ server.waitForRequest(suffix), frame.page().waitForRequest(server.PREFIX + suffix), ]); }; let responseA, responseB; // Hold on to a bunch of requests without answering. server.setRoute('/fetch-request-a.js', (req, res) => responseA = res); const firstFetchResourceRequested = waitForRequest('/fetch-request-a.js'); server.setRoute('/fetch-request-b.js', (req, res) => responseB = res); const secondFetchResourceRequested = waitForRequest('/fetch-request-b.js'); const waitForLoadPromise = isSetContent ? Promise.resolve() : frame.waitForNavigation({ waitUntil: 'load' }); // Navigate to a page which loads immediately and then does a bunch of // requests via javascript's fetch method. const actionPromise = action(); // Track when the action gets completed. let actionFinished = false; actionPromise.then(() => actionFinished = true); // Wait for the frame's 'load' event. await waitForLoadPromise; expect(actionFinished).toBe(false); // Wait for the initial resource to be requested. await firstFetchResourceRequested; expect(actionFinished).toBe(false); // Trigger the second request. await frame.page().evaluate(() => window['fetchSecond']()); // Finish the first request. responseA.statusCode = 404; responseA.end(`File not found`); // Wait for the second round to be requested. await secondFetchResourceRequested; expect(actionFinished).toBe(false); // Finishing the second response should trigger networkidle. let timerTriggered = false; const timer = setTimeout(() => timerTriggered = true, 500); responseB.statusCode = 404; responseB.end(`File not found`); const response = await actionPromise; clearTimeout(timer); expect(timerTriggered).toBe(true); if (!isSetContent) expect(response.ok()).toBe(true); } it('should wait for networkidle to succeed navigation', async ({ page, server }) => { await networkIdleTest(page.mainFrame(), server, () => { return page.goto(server.PREFIX + '/networkidle.html', { waitUntil: 'networkidle' }); }); }); it('should wait for networkidle to succeed navigation with request from previous navigation', async ({ page, server }) => { await page.goto(server.EMPTY_PAGE); server.setRoute('/foo.js', () => {}); await page.setContent(``); await networkIdleTest(page.mainFrame(), server, () => { return page.goto(server.PREFIX + '/networkidle.html', { waitUntil: 'networkidle' }); }); }); it('should wait for networkidle in waitForNavigation', async ({ page, server }) => { await networkIdleTest(page.mainFrame(), server, () => { const promise = page.waitForNavigation({ waitUntil: 'networkidle' }); page.goto(server.PREFIX + '/networkidle.html'); return promise; }); }); it('should wait for networkidle in setContent', async ({ page, server }) => { await page.goto(server.EMPTY_PAGE); await networkIdleTest(page.mainFrame(), server, () => { return page.setContent(``, { waitUntil: 'networkidle' }); }, true); }); it('should wait for networkidle in setContent with request from previous navigation', async ({ page, server }) => { await page.goto(server.EMPTY_PAGE); server.setRoute('/foo.js', () => {}); await page.setContent(``); await networkIdleTest(page.mainFrame(), server, () => { return page.setContent(``, { waitUntil: 'networkidle' }); }, true); }); it('should wait for networkidle when navigating iframe', async ({ page, server }) => { await page.goto(server.PREFIX + '/frames/one-frame.html'); const frame = page.mainFrame().childFrames()[0]; await networkIdleTest(frame, server, () => frame.goto(server.PREFIX + '/networkidle.html', { waitUntil: 'networkidle' })); }); it('should wait for networkidle in setContent from the child frame', async ({ page, server }) => { await page.goto(server.EMPTY_PAGE); await networkIdleTest(page.mainFrame(), server, () => { return page.setContent(``, { waitUntil: 'networkidle' }); }, true); }); it('should wait for networkidle from the child frame', async ({ page, server }) => { await networkIdleTest(page.mainFrame(), server, () => { return page.goto(server.PREFIX + '/networkidle-frame.html', { waitUntil: 'networkidle' }); }); }); it('should wait for networkidle from the popup', async ({ page, server }) => { await page.goto(server.EMPTY_PAGE); await page.setContent(` `); for (let i = 1; i < 6; ++i) { const [popup] = await Promise.all([ page.waitForEvent('popup'), page.click('#box' + i) ]); await popup.waitForLoadState('networkidle'); } }); it('should wait for networkidle when iframe attaches and detaches', async ({ page, server }) => { server.setRoute('/empty.html', () => {}); let done = false; const promise = page.setContent(` `, { waitUntil: 'networkidle' }).then(() => done = true); await page.waitForTimeout(600); expect(done).toBe(false); await page.evaluate(() => { document.querySelector('iframe').remove(); }); await promise; expect(done).toBe(true); }); it('should work after repeated navigations in the same page', async ({ page, server }) => { it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/18283' }); let requestCount = 0; await page.route('**/empty.html', route => { route.fulfill({ contentType: 'text/html', body: ` ` }); }); await page.route('**/sample', route => { requestCount++; route.fulfill({ contentType: 'application/json', body: JSON.stringify({ content: 'sample' }) }); }); await page.goto(server.EMPTY_PAGE, { waitUntil: 'networkidle' }); expect(requestCount).toBe(1); await page.goto(server.EMPTY_PAGE, { waitUntil: 'networkidle' }); expect(requestCount).toBe(2); });