fix: e2e tests

Author: HedwigJDoets

packages/pluggableWidgets/skiplink-web/e2e/SkipLink.spec.js

@@ -7,6 +7,7 @@ test.afterEach("Cleanup session", async ({ page }) => {
 
 test.beforeEach(async ({ page }) => {
     await page.goto("/");
+    await page.waitForLoadState("networkidle");
 });
 
 test.describe("SkipLink:", function () {
@@ -17,30 +18,22 @@ test.describe("SkipLink:", function () {
 
         // Check initial styling (hidden)
         const transform = await skipLink.evaluate(el => getComputedStyle(el).transform);
-        expect(transform).toContain("translateY(-120%)") || expect(transform).toContain("matrix");
+        expect(transform).toContain("matrix(1, 0, 0, 1, 0, -48)");
     });
 
     test("skip link becomes visible when focused via keyboard", async ({ page }) => {
         // Tab to focus the skip link (should be first focusable element)
+        const skipLink = page.locator(".skip-link").first();
         await page.keyboard.press("Tab");
 
-        const skipLink = page.locator(".skip-link").first();
         await expect(skipLink).toBeFocused();
-        
+        await page.waitForTimeout(1000);
         // Check that it becomes visible when focused
         const transform = await skipLink.evaluate(el => getComputedStyle(el).transform);
-        expect(transform).toContain("translateY(0px)") || expect(transform).toBe("none");
+        expect(transform).toContain("matrix(1, 0, 0, 1, 0, 0)")
     });
 
     test("skip link navigates to main content when activated", async ({ page }) => {
-        // Create a main content element to test focus behavior
-        await page.evaluate(() => {
-            const main = document.createElement("main");
-            main.id = "main-content";
-            main.textContent = "Main content area";
-            document.body.appendChild(main);
-        });
-
         // Tab to focus the skip link
         await page.keyboard.press("Tab");
 
@@ -51,7 +44,7 @@ test.describe("SkipLink:", function () {
         await page.keyboard.press("Enter");
 
         // Check that main content is now focused
-        const mainContent = page.locator("#main-content");
+        const mainContent = page.locator("main");
         await expect(mainContent).toBeFocused();
     });
 
@@ -62,7 +55,7 @@ test.describe("SkipLink:", function () {
         await expect(skipLink).toHaveText("Skip to main content");
 
         // Check href attribute
-        await expect(skipLink).toHaveAttribute("href", "#main-content");
+        await expect(skipLink).toHaveAttribute("href", "#");
 
         // Check tabindex
         await expect(skipLink).toHaveAttribute("tabindex", "0");

packages/pluggableWidgets/skiplink-web/package.json

@@ -32,7 +32,7 @@
         "create-translation": "rui-create-translation",
         "dev": "pluggable-widgets-tools start:web",
         "e2e": "MENDIX_VERSION=11.1.0.75979 run-e2e ci --no-update-project",
-        "e2edev": "run-e2e dev --with-preps",
+        "e2edev": "MENDIX_VERSION=11.1.0.75979 run-e2e dev --with-preps  --no-update-project",
         "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .",
         "lint": "eslint src/ package.json",
         "publish-marketplace": "rui-publish-marketplace",