From b8a20643a6e69d24972d6c1cfda643336e0a055b Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Jun 2026 16:56:29 +0800 Subject: [PATCH 1/2] test: reduce e2e test runtime --- tests/e2e/client-reconnect.test.js | 81 ++++++++++++++++------------ tests/e2e/overlay.test.js | 85 +++++++++++++++++++----------- 2 files changed, 99 insertions(+), 67 deletions(-) diff --git a/tests/e2e/client-reconnect.test.js b/tests/e2e/client-reconnect.test.js index 9d58558..26a1f3f 100644 --- a/tests/e2e/client-reconnect.test.js +++ b/tests/e2e/client-reconnect.test.js @@ -4,6 +4,45 @@ const config = require('../fixtures/simple-config/rspack.config'); const runBrowser = require('../helpers/run-browser'); const port = require('../helpers/ports-map')['client-reconnect-option']; +const RECONNECT_MESSAGE = 'Trying to reconnect...'; +const FAST_RECONNECT_DELAY = 20; + +const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); + +const countReconnectMessages = (consoleMessages) => + consoleMessages.filter((message) => + message.text().includes(RECONNECT_MESSAGE), + ).length; + +const waitForReconnectMessages = async (consoleMessages, expectedCount) => { + const startedAt = Date.now(); + + while (Date.now() - startedAt < 5000) { + if (countReconnectMessages(consoleMessages) >= expectedCount) { + return; + } + + await delay(50); + } + + throw new Error(`Expected ${expectedCount} reconnect messages.`); +}; + +const useFastPageReconnectTimers = async (page) => { + await page.evaluateOnNewDocument((fastReconnectDelay) => { + const originalSetTimeout = window.setTimeout.bind(window); + + window.setTimeout = (handler, timeout, ...args) => + originalSetTimeout( + handler, + typeof timeout === 'number' && timeout >= 1000 + ? fastReconnectDelay + : timeout, + ...args, + ); + }, FAST_RECONNECT_DELAY); +}; + describe('client.reconnect option', () => { describe('specified as true', () => { let compiler; @@ -21,6 +60,7 @@ describe('client.reconnect option', () => { await server.start(); ({ page, browser } = await runBrowser()); + await useFastPageReconnectTimers(page); pageErrors = []; consoleMessages = []; @@ -49,21 +89,7 @@ describe('client.reconnect option', () => { await server.stop(); } - let interval; - - await new Promise((resolve) => { - interval = setInterval(() => { - const retryingMessages = consoleMessages.filter((message) => - message.text().includes('Trying to reconnect...'), - ); - - if (retryingMessages.length >= 5) { - clearInterval(interval); - - resolve(); - } - }, 1000); - }); + await waitForReconnectMessages(consoleMessages, 5); expect(pageErrors).toMatchSnapshot('page errors'); }); @@ -85,6 +111,7 @@ describe('client.reconnect option', () => { await server.start(); ({ page, browser } = await runBrowser()); + await useFastPageReconnectTimers(page); pageErrors = []; consoleMessages = []; @@ -113,16 +140,7 @@ describe('client.reconnect option', () => { await server.stop(); } - // Can't wait to check for unlimited times so wait only for couple retries - await new Promise((resolve) => - setTimeout( - () => { - resolve(); - }, - // eslint-disable-next-line no-restricted-properties - 1000 * 2 ** 3, - ), - ); + await delay(250); expect(consoleMessages.map((message) => message.text())).toMatchSnapshot( 'console messages', @@ -148,6 +166,7 @@ describe('client.reconnect option', () => { await server.start(); ({ page, browser } = await runBrowser()); + await useFastPageReconnectTimers(page); pageErrors = []; consoleMessages = []; @@ -176,16 +195,8 @@ describe('client.reconnect option', () => { await server.stop(); } - // Can't wait to check for unlimited times so wait only for couple retries - await new Promise((resolve) => - setTimeout( - () => { - resolve(); - }, - // eslint-disable-next-line no-restricted-properties - 1000 * 2 ** 3, - ), - ); + await waitForReconnectMessages(consoleMessages, 2); + await delay(250); expect(consoleMessages.map((message) => message.text())).toMatchSnapshot( 'console messages', diff --git a/tests/e2e/overlay.test.js b/tests/e2e/overlay.test.js index 9703586..10ed159 100644 --- a/tests/e2e/overlay.test.js +++ b/tests/e2e/overlay.test.js @@ -1,10 +1,12 @@ const path = require('node:path'); const fs = require('node:fs'); +const puppeteer = require('puppeteer'); const { rspack } = require('@rspack/core'); const config = require('../fixtures/overlay-config/rspack.config'); const trustedTypesConfig = require('../fixtures/overlay-config/trusted-types.rspack.config'); const getPort = require('../helpers/get-port'); -const runBrowser = require('../helpers/run-browser'); +const { puppeteerArgs } = require('../helpers/puppeteer-constants'); +const { runPage } = require('../helpers/run-browser'); const basePort = require('../helpers/ports-map').overlay; require('../helpers/normalize'); @@ -64,11 +66,13 @@ class WarningPlugin { } const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); +const OVERLAY_SETTLE_DELAY = 250; let prettier; let prettierHTML; let prettierCSS; let port; +let sharedBrowser; const overlayFixturePath = path.resolve( __dirname, '../fixtures/overlay-config/foo.js', @@ -111,6 +115,13 @@ const formatOverlayHtml = (html) => (value) => value.replace(/<\/?span[^>]*>/g, ''), ); +const runBrowser = async () => { + const context = await sharedBrowser.createBrowserContext(); + const page = await runPage(context); + + return { page, browser: context }; +}; + describe('overlay', () => { beforeEach(async () => { port = await getPort(basePort); @@ -121,6 +132,12 @@ describe('overlay', () => { }); beforeAll(async () => { + sharedBrowser = await puppeteer.launch({ + headless: 'new', + acceptInsecureCerts: true, + args: puppeteerArgs, + }); + // Due problems with ESM modules for Node.js@18 // TODO replace it on import/require when Node.js@18 will be dropped prettier = require('../../node_modules/prettier/standalone'); @@ -128,6 +145,10 @@ describe('overlay', () => { prettierCSS = require('../../node_modules/prettier/plugins/postcss'); }); + afterAll(async () => { + await sharedBrowser.close(); + }); + it('should show a warning for initial compilation', async () => { const compiler = rspack(config); @@ -148,7 +169,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -187,7 +208,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -230,7 +251,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -271,7 +292,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -312,7 +333,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); const overlayFrame = await overlayHandle.contentFrame(); @@ -348,7 +369,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -674,7 +695,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -712,7 +733,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -754,7 +775,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -792,7 +813,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -834,7 +855,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -878,7 +899,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -922,7 +943,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -964,7 +985,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1002,7 +1023,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1044,7 +1065,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1082,7 +1103,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1124,7 +1145,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1174,7 +1195,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1235,7 +1256,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1288,7 +1309,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1325,7 +1346,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1369,7 +1390,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1412,7 +1433,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1482,7 +1503,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); await page.waitForSelector('#rspack-dev-server-client-overlay'); @@ -1535,7 +1556,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); await page.waitForSelector('#rspack-dev-server-client-overlay'); @@ -1582,7 +1603,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); const overlayFrame = await overlayHandle.contentFrame(); @@ -1630,7 +1651,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1669,7 +1690,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); const overlayFrame = await overlayHandle.contentFrame(); @@ -1719,7 +1740,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1762,7 +1783,7 @@ describe('overlay', () => { }); // Delay for the overlay to appear - await delay(1000); + await delay(OVERLAY_SETTLE_DELAY); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); From e148e48485f239b32f247d4f4024bd16d53f36b1 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Jun 2026 20:43:10 +0800 Subject: [PATCH 2/2] test: stabilize e2e performance tests --- tests/e2e/client-reconnect.test.js | 51 ++++++++++--- tests/e2e/overlay.test.js | 119 +++++++++++++---------------- 2 files changed, 90 insertions(+), 80 deletions(-) diff --git a/tests/e2e/client-reconnect.test.js b/tests/e2e/client-reconnect.test.js index 26a1f3f..f073045 100644 --- a/tests/e2e/client-reconnect.test.js +++ b/tests/e2e/client-reconnect.test.js @@ -4,30 +4,57 @@ const config = require('../fixtures/simple-config/rspack.config'); const runBrowser = require('../helpers/run-browser'); const port = require('../helpers/ports-map')['client-reconnect-option']; +const DISCONNECTED_MESSAGE = 'Disconnected!'; const RECONNECT_MESSAGE = 'Trying to reconnect...'; -const FAST_RECONNECT_DELAY = 20; +const FAST_RECONNECT_DELAY = 100; const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const countReconnectMessages = (consoleMessages) => - consoleMessages.filter((message) => - message.text().includes(RECONNECT_MESSAGE), - ).length; - -const waitForReconnectMessages = async (consoleMessages, expectedCount) => { +const waitForMessages = async ( + consoleMessages, + predicate, + errorMessage, + timeout = 10000, +) => { const startedAt = Date.now(); - while (Date.now() - startedAt < 5000) { - if (countReconnectMessages(consoleMessages) >= expectedCount) { + while (Date.now() - startedAt < timeout) { + const texts = consoleMessages.map((message) => message.text()); + + if (predicate(texts)) { return; } await delay(50); } - throw new Error(`Expected ${expectedCount} reconnect messages.`); + throw new Error(errorMessage); }; +const waitForReconnectMessages = (consoleMessages, expectedCount) => + waitForMessages( + consoleMessages, + (texts) => + texts.filter((text) => text.includes(RECONNECT_MESSAGE)).length >= + expectedCount, + `Expected ${expectedCount} reconnect messages.`, + 15000, + ); + +const waitForDisconnectMessage = (consoleMessages) => + waitForMessages( + consoleMessages, + (texts) => texts.some((text) => text.includes(DISCONNECTED_MESSAGE)), + `Expected "${DISCONNECTED_MESSAGE}" message.`, + ); + +const waitForConsoleMessages = (consoleMessages, expectedCount) => + waitForMessages( + consoleMessages, + (texts) => texts.length >= expectedCount, + `Expected ${expectedCount} console messages.`, + ); + const useFastPageReconnectTimers = async (page) => { await page.evaluateOnNewDocument((fastReconnectDelay) => { const originalSetTimeout = window.setTimeout.bind(window); @@ -140,7 +167,7 @@ describe('client.reconnect option', () => { await server.stop(); } - await delay(250); + await waitForDisconnectMessage(consoleMessages); expect(consoleMessages.map((message) => message.text())).toMatchSnapshot( 'console messages', @@ -196,7 +223,7 @@ describe('client.reconnect option', () => { } await waitForReconnectMessages(consoleMessages, 2); - await delay(250); + await waitForConsoleMessages(consoleMessages, 10); expect(consoleMessages.map((message) => message.text())).toMatchSnapshot( 'console messages', diff --git a/tests/e2e/overlay.test.js b/tests/e2e/overlay.test.js index 10ed159..b817010 100644 --- a/tests/e2e/overlay.test.js +++ b/tests/e2e/overlay.test.js @@ -65,8 +65,9 @@ class WarningPlugin { } } -const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -const OVERLAY_SETTLE_DELAY = 250; +const OVERLAY_SELECTOR = '#rspack-dev-server-client-overlay'; +const OVERLAY_TIMEOUT = 5000; +const OVERLAY_ABSENCE_TIMEOUT = 500; let prettier; let prettierHTML; @@ -115,6 +116,23 @@ const formatOverlayHtml = (html) => (value) => value.replace(/<\/?span[^>]*>/g, ''), ); +const waitForOverlay = (page) => + page.waitForSelector(OVERLAY_SELECTOR, { timeout: OVERLAY_TIMEOUT }); + +const expectNoOverlay = async (page) => { + const overlayHandle = await page + .waitForSelector(OVERLAY_SELECTOR, { timeout: OVERLAY_ABSENCE_TIMEOUT }) + .catch((error) => { + if (error.name === 'TimeoutError') { + return null; + } + + throw error; + }); + + expect(overlayHandle).toBe(null); +}; + const runBrowser = async () => { const context = await sharedBrowser.createBrowserContext(); const page = await runPage(context); @@ -168,8 +186,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -207,8 +224,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -250,8 +266,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -291,8 +306,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -332,8 +346,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); const overlayFrame = await overlayHandle.contentFrame(); @@ -368,8 +381,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -694,8 +706,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await expectNoOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -732,8 +743,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await expectNoOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -774,8 +784,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await expectNoOverlay(page); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -812,8 +821,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -854,8 +862,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -898,8 +905,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -942,8 +948,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -984,8 +989,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await expectNoOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1022,8 +1026,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await expectNoOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1064,8 +1067,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await expectNoOverlay(page); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1102,8 +1104,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1144,8 +1145,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1194,8 +1194,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1255,8 +1254,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1308,8 +1306,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await expectNoOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1345,8 +1342,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1389,8 +1385,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1432,8 +1427,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1502,10 +1496,7 @@ describe('overlay', () => { }); }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); - - await page.waitForSelector('#rspack-dev-server-client-overlay'); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1555,10 +1546,7 @@ describe('overlay', () => { }); }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); - - await page.waitForSelector('#rspack-dev-server-client-overlay'); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1602,8 +1590,7 @@ describe('overlay', () => { })();`, }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); const overlayFrame = await overlayHandle.contentFrame(); @@ -1650,8 +1637,7 @@ describe('overlay', () => { })();`, }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await expectNoOverlay(page); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1689,8 +1675,7 @@ describe('overlay', () => { })();`, }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); const overlayFrame = await overlayHandle.contentFrame(); @@ -1739,8 +1724,7 @@ describe('overlay', () => { })();`, }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await expectNoOverlay(page); const overlayHandle = await page.$('#rspack-dev-server-client-overlay'); @@ -1782,8 +1766,7 @@ describe('overlay', () => { waitUntil: 'networkidle0', }); - // Delay for the overlay to appear - await delay(OVERLAY_SETTLE_DELAY); + await waitForOverlay(page); const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$('#rspack-dev-server-client-overlay');