test: fix flaky overlay E2E tests (#4929)

webpack · Jul 3, 2023 · fe7076a · fe7076a
1 parent 501b5cb
commit fe7076a
Showing 1 changed file with 86 additions and 0 deletions.
diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js
@@ -64,6 +64,8 @@ class WarningPlugin {
   }
 }
 
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
 describe("overlay", () => {
   it("should show a warning for initial compilation", async () => {
     const compiler = webpack(config);
@@ -83,6 +85,9 @@ describe("overlay", () => {
       waitUntil: "networkidle0",
     });
 
+    // Delay for the overlay to appear
+    await delay(1000);
+
     const pageHtml = await page.evaluate(() => document.body.outerHTML);
     const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
     const overlayFrame = await overlayHandle.contentFrame();
@@ -120,6 +125,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -164,6 +172,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -206,6 +217,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -247,6 +261,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -578,6 +595,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
@@ -617,6 +637,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
@@ -662,6 +685,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
       expect(overlayHandle).toBe(null);
@@ -699,6 +725,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -742,6 +771,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -787,6 +819,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -832,6 +867,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -875,6 +913,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
@@ -914,6 +955,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
@@ -960,6 +1004,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
       expect(overlayHandle).toBe(null);
@@ -997,6 +1044,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -1040,6 +1090,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -1085,6 +1138,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -1130,6 +1186,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       expect(overlayHandle).toBe(null);
@@ -1168,6 +1227,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -1213,6 +1275,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -1257,6 +1322,9 @@ describe("overlay", () => {
         waitUntil: "networkidle0",
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
@@ -1328,6 +1396,9 @@ describe("overlay", () => {
         });
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       await page.waitForSelector("#webpack-dev-server-client-overlay");
 
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
@@ -1382,6 +1453,9 @@ describe("overlay", () => {
         });
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       await page.waitForSelector("#webpack-dev-server-client-overlay");
 
       const pageHtml = await page.evaluate(() => document.body.outerHTML);
@@ -1430,6 +1504,9 @@ describe("overlay", () => {
       })();`,
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
       const overlayHtml = await overlayFrame.evaluate(
@@ -1477,6 +1554,9 @@ describe("overlay", () => {
       })();`,
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
       expect(overlayHandle).toBe(null);
@@ -1515,6 +1595,9 @@ describe("overlay", () => {
       })();`,
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
       const overlayFrame = await overlayHandle.contentFrame();
       const overlayHtml = await overlayFrame.evaluate(
@@ -1564,6 +1647,9 @@ describe("overlay", () => {
       })();`,
       });
 
+      // Delay for the overlay to appear
+      await delay(1000);
+
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
       expect(overlayHandle).toBe(null);