test(e2e): fix and stabilize tests

Author: d-koppenhagen

src/demos/MultiPoint.vue

@@ -19,7 +19,12 @@
       <ol-source-vector>
         <ol-feature>
           <ol-geom-multi-point
-            :coordinates="[[116.547539, 40.450996]]"
+            :coordinates="[
+              [116.547539, 40.450996],
+              [116.544639, 40.451996],
+              [116.546739, 40.451996],
+              [116.546739, 40.448996],
+            ]"
           ></ol-geom-multi-point>
           <ol-style>
             <ol-style-circle :radius="radius">

tests/MapPage.ts

@@ -24,15 +24,15 @@ export class MapPage {
   }
 
   async waitUntilReady(...selectors: string[]) {
-    await this.page.waitForLoadState();
+    await this.page.waitForLoadState("domcontentloaded");
     await this.page.waitForSelector("canvas");
     for (let index = 0; index < selectors.length; index++) {
       await this.page.waitForSelector(selectors[index]);
     }
   }
 
   async waitUntilCanvasLoaded() {
-    await this.page.waitForLoadState("networkidle");
+    await this.page.waitForLoadState("networkidle", { timeout: 3000 });
   }
 
   async waitMs(timeout: number) {

tests/__screenshots__/geometries.test.ts/ol-geom-multi-point-should-render-1.png

@@ -47,7 +47,7 @@ test.describe("ol-tile-layer", () => {
     const map = new MapPage(page);
     await map.goto("/componentsguide/layers/tilelayer/");
     await map.waitUntilReady();
-    await map.waitUntilCanvasLoaded();
+    await map.waitMs(5000);
     await map.checkCanvasScreenshot();
   });
 });

tests/layers.test.ts

@@ -170,7 +170,7 @@ test.describe("ol-source-wmts", () => {
     const map = new MapPage(page);
     await map.goto("/componentsguide/sources/wmts/");
     await map.waitUntilReady();
-    await map.waitUntilCanvasLoaded();
+    await map.waitMs(5000);
     await map.checkCanvasScreenshot();
   });
 });