Upgrade Playwright to 1.41 (#6910)

* upgrade playwright to 1.41 * only use one playwright config * remove custom hasAttribute assertion * remove custom toHaveBooleanAttribute assertion * mark flaky tests with test.fixme * replace deprecated shadowroot attributes in fast-style fixture * Change files
microsoft · Feb 26, 2024 · 97ef4d7 · 97ef4d7
1 parent df2ca50
commit 97ef4d7
Show file tree

Hide file tree

Showing 37 changed files with 296 additions and 380 deletions.
diff --git a/change/@microsoft-fast-foundation-c5aeb6b7-9a2e-425e-b885-f0ac39d4feef.json b/change/@microsoft-fast-foundation-c5aeb6b7-9a2e-425e-b885-f0ac39d4feef.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "upgrade playwright to 1.41",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-ssr-f4dcbe20-67a7-4554-bfea-5ba0f3784567.json b/change/@microsoft-fast-ssr-f4dcbe20-67a7-4554-bfea-5ba0f3784567.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "upgrade playwright to 1.41",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
@@ -253,7 +253,7 @@
     "@custom-elements-manifest/to-markdown": "^0.1.0",
     "@microsoft/api-extractor": "7.24.2",
     "@microsoft/tsdoc-config": "^0.13.4",
-    "@playwright/test": "^1.25.2",
+    "@playwright/test": "^1.41.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@storybook/addon-docs": "6.5.10",
     "@storybook/addon-essentials": "6.5.10",

diff --git a/packages/web-components/fast-foundation/playwright.config.ts b/packages/web-components/fast-foundation/playwright.config.ts
@@ -1,15 +1,15 @@
-import type { Locator, PlaywrightTestConfig } from "@playwright/test";
-import { expect } from "@playwright/test";
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-    projects: [{ name: "chromium" }, { name: "firefox" }, { name: "webkit" }],
     reporter: "list",
     testMatch: /.*\.pw\.spec\.ts$/,
     retries: 3,
     fullyParallel: process.env.CI ? false : true,
     timeout: process.env.CI ? 10000 : 30000,
     use: {
         baseURL: "http://localhost:6006/iframe.html",
+        deviceScaleFactor: 1,
+        launchOptions: { args: ["--force-device-scale-factor=1"] },
         viewport: {
             height: 1280,
             width: 720,
@@ -24,56 +24,3 @@ const config: PlaywrightTestConfig = {
 };
 
 export default config;
-
-expect.extend({
-    async toHaveBooleanAttribute(recieved: Locator, name: string) {
-        const options = {
-            comment: "Object.is equality",
-            isNot: this.isNot,
-            promise: this.promise,
-        };
-
-        name = name.trim();
-
-        await (await recieved.elementHandle())?.waitForElementState("stable");
-
-        const [hasAttribute, attributeValue] = await recieved.evaluate((node, name) => {
-            return [node.hasAttribute(name), node.getAttribute(name)];
-        }, name);
-
-        if (this.isNot) {
-            return {
-                pass: hasAttribute,
-                message: () => `expected ${name} to not be present`,
-            };
-        }
-
-        return {
-            pass: hasAttribute && (attributeValue === "" || attributeValue === name),
-            message: () => `${this.utils.matcherHint(
-                "toHaveBooleanAttribute",
-                undefined,
-                undefined,
-                options
-            )}
-
-expected ${recieved} to have boolean attribute \`${name}\``,
-        };
-    },
-
-    async hasAttribute(recieved: Locator, attribute: string) {
-        if (await recieved.isVisible()) {
-            await (await recieved.elementHandle())?.waitForElementState("stable");
-        }
-
-        const pass = await recieved.evaluate(
-            (node, attribute) => node.hasAttribute(attribute),
-            attribute
-        );
-
-        return {
-            message: () => `expected ${recieved} to have attribute \`${attribute}\``,
-            pass,
-        };
-    },
-});
diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.pw.spec.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.pw.spec.ts
@@ -38,7 +38,7 @@ test.describe("Accordion item", () => {
             `;
         });
 
-        await expect(element).not.hasAttribute("headinglevel");
+        await expect(element).not.toHaveAttribute("headinglevel");
 
         await expect(element).toHaveJSProperty("headinglevel", 2);
     });
@@ -83,13 +83,13 @@ test.describe("Accordion item", () => {
             `;
         });
 
-        await expect(button).toHaveBooleanAttribute("disabled");
+        await expect(button).toHaveAttribute("disabled");
 
         await element.evaluate<void, FASTAccordionItem>(node => {
             node.disabled = false;
         });
 
-        await expect(button).not.toHaveBooleanAttribute("disabled");
+        await expect(button).not.toHaveAttribute("disabled");
     });
 
     test("should set internal properties to match the id when provided", async () => {

diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.pw.spec.ts b/packages/web-components/fast-foundation/src/accordion/accordion.pw.spec.ts
@@ -133,9 +133,9 @@ test.describe("Accordion", () => {
 
         await firstItem.click();
 
-        await expect(firstItem).toHaveBooleanAttribute("expanded");
+        await expect(firstItem).toHaveAttribute("expanded");
 
-        await expect(secondItem).not.toHaveBooleanAttribute("expanded");
+        await expect(secondItem).not.toHaveAttribute("expanded");
 
         const secondItemButton = secondItem.locator(`[part="button"]`);
 
@@ -145,9 +145,9 @@ test.describe("Accordion", () => {
             node.dispatchEvent(new MouseEvent("click", { bubbles: true }));
         });
 
-        await expect(firstItem).not.toHaveBooleanAttribute("expanded");
+        await expect(firstItem).not.toHaveAttribute("expanded");
 
-        await expect(secondItem).toHaveBooleanAttribute("expanded");
+        await expect(secondItem).toHaveAttribute("expanded");
     });
 
     test("should set the expanded items' button to aria-disabled when in single expand mode", async () => {
@@ -174,7 +174,7 @@ test.describe("Accordion", () => {
 
         await firstItem.click();
 
-        await expect(firstItem).toHaveBooleanAttribute("expanded");
+        await expect(firstItem).toHaveAttribute("expanded");
 
         await expect(firstItem.locator("button")).toHaveAttribute(
             "aria-disabled",
@@ -183,7 +183,7 @@ test.describe("Accordion", () => {
 
         await secondItem.click();
 
-        await expect(firstItem).not.toHaveBooleanAttribute("expanded");
+        await expect(firstItem).not.toHaveAttribute("expanded");
 
         await expect(firstItem.locator("button")).not.toHaveAttribute(
             "aria-disabled",
@@ -194,7 +194,7 @@ test.describe("Accordion", () => {
             "false"
         );
 
-        await expect(secondItem).toHaveBooleanAttribute("expanded");
+        await expect(secondItem).toHaveAttribute("expanded");
 
         await expect(secondItem.locator("button")).toHaveAttribute(
             "aria-disabled",
@@ -224,7 +224,7 @@ test.describe("Accordion", () => {
 
         await firstItem.click();
 
-        await expect(firstItem).toHaveBooleanAttribute("expanded");
+        await expect(firstItem).toHaveAttribute("expanded");
 
         await expect(firstItem.locator("button")).toHaveAttribute(
             "aria-disabled",
@@ -235,7 +235,7 @@ test.describe("Accordion", () => {
             node.setAttribute("expand-mode", "multi");
         });
 
-        await expect(firstItem.locator("button")).not.hasAttribute("aria-disabled");
+        await expect(firstItem.locator("button")).not.toHaveAttribute("aria-disabled");
     });
 
     test("should set the first item as expanded if no child is expanded by default in single mode", async () => {
@@ -260,15 +260,15 @@ test.describe("Accordion", () => {
 
         const secondItem = items.nth(1);
 
-        await expect(firstItem).toHaveBooleanAttribute("expanded");
+        await expect(firstItem).toHaveAttribute("expanded");
 
-        await expect(secondItem).not.toHaveBooleanAttribute("expanded");
+        await expect(secondItem).not.toHaveAttribute("expanded");
 
         await secondItem.evaluate<void>(node => node.setAttribute("expanded", ""));
 
-        await expect(firstItem).not.toHaveBooleanAttribute("expanded");
+        await expect(firstItem).not.toHaveAttribute("expanded");
 
-        await expect(secondItem).toHaveBooleanAttribute("expanded");
+        await expect(secondItem).toHaveAttribute("expanded");
     });
 
     test("should set the first item with an expanded attribute to expanded in single mode", async () => {
@@ -299,11 +299,11 @@ test.describe("Accordion", () => {
 
         const thirdItem = items.nth(2);
 
-        await expect(firstItem).not.toHaveBooleanAttribute("expanded");
+        await expect(firstItem).not.toHaveAttribute("expanded");
 
-        await expect(secondItem).toHaveBooleanAttribute("expanded");
+        await expect(secondItem).toHaveAttribute("expanded");
 
-        await expect(thirdItem).not.toHaveBooleanAttribute("expanded");
+        await expect(thirdItem).not.toHaveAttribute("expanded");
     });
 
     test("should allow disabled items to be expanded when in single mode", async () => {
@@ -335,21 +335,21 @@ test.describe("Accordion", () => {
 
         const thirdItem = items.nth(2);
 
-        await expect(firstItem).not.toHaveBooleanAttribute("expanded");
+        await expect(firstItem).not.toHaveAttribute("expanded");
 
-        await expect(secondItem).toHaveBooleanAttribute("expanded");
+        await expect(secondItem).toHaveAttribute("expanded");
 
-        await expect(thirdItem).toHaveBooleanAttribute("expanded");
+        await expect(thirdItem).toHaveAttribute("expanded");
 
         await secondItem.evaluate(node => {
             node.removeAttribute("disabled");
         });
 
-        await expect(firstItem).not.toHaveBooleanAttribute("expanded");
+        await expect(firstItem).not.toHaveAttribute("expanded");
 
-        await expect(secondItem).toHaveBooleanAttribute("expanded");
+        await expect(secondItem).toHaveAttribute("expanded");
 
-        await expect(thirdItem).not.toHaveBooleanAttribute("expanded");
+        await expect(thirdItem).not.toHaveAttribute("expanded");
     });
 
     test("should ignore `change` events from components other than accordion items", async () => {

diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts
@@ -45,7 +45,7 @@ test.describe("Breadcrumb item", () => {
 
         const anchor = element.locator("a");
 
-        await expect(element).not.hasAttribute("href");
+        await expect(element).not.toHaveAttribute("href");
 
         await expect(element).toHaveJSProperty("href", undefined);
 

diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.pw.spec.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.pw.spec.ts
@@ -97,6 +97,6 @@ test.describe("Breadcrumb", () => {
 
         await expect(
             element.locator("fast-breadcrumb-item:nth-of-type(2) a")
-        ).not.hasAttribute("aria-current");
+        ).not.toHaveAttribute("aria-current");
     });
 });
diff --git a/packages/web-components/fast-foundation/src/button/button.pw.spec.ts b/packages/web-components/fast-foundation/src/button/button.pw.spec.ts
@@ -33,13 +33,13 @@ test.describe("Button", () => {
             `;
         });
 
-        await expect(control).toHaveBooleanAttribute("disabled");
+        await expect(control).toHaveAttribute("disabled");
 
         await element.evaluate(node => {
             node.toggleAttribute("disabled");
         });
 
-        await expect(control).not.toHaveBooleanAttribute("disabled");
+        await expect(control).not.toHaveAttribute("disabled");
     });
 
     test("should set the `formnovalidate` attribute on the internal control", async () => {
@@ -49,13 +49,13 @@ test.describe("Button", () => {
             `;
         });
 
-        await expect(control).toHaveBooleanAttribute("formnovalidate");
+        await expect(control).toHaveAttribute("formnovalidate");
 
         await element.evaluate(node => {
             node.toggleAttribute("formnovalidate");
         });
 
-        await expect(control).not.toHaveBooleanAttribute("formnovalidate");
+        await expect(control).not.toHaveAttribute("formnovalidate");
     });
 
     test.describe("should set the attribute on the internal control", () => {
@@ -130,13 +130,13 @@ test.describe("Button", () => {
             `;
         });
 
-        await expect(control).toHaveBooleanAttribute("autofocus");
+        await expect(control).toHaveAttribute("autofocus");
 
         await element.evaluate(node => {
             node.toggleAttribute("autofocus");
         });
 
-        await expect(control).not.toHaveBooleanAttribute("autofocus");
+        await expect(control).not.toHaveAttribute("autofocus");
     });
 
     test("of type `submit` should submit the parent form when clicked", async () => {

diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts
@@ -53,7 +53,7 @@ test.describe("Checkbox", () => {
             `;
         });
 
-        await expect(element).not.toHaveBooleanAttribute("checked");
+        await expect(element).not.toHaveAttribute("checked");
 
         await expect(element).toHaveAttribute("aria-checked", "false");
     });
@@ -81,7 +81,7 @@ test.describe("Checkbox", () => {
             `;
         });
 
-        await expect(element).not.toHaveBooleanAttribute("required");
+        await expect(element).not.toHaveAttribute("required");
 
         await expect(element).toHaveAttribute("aria-required", "false");
     });
@@ -113,7 +113,7 @@ test.describe("Checkbox", () => {
             `;
         });
 
-        await expect(element).not.toHaveBooleanAttribute("disabled");
+        await expect(element).not.toHaveAttribute("disabled");
 
         await expect(element).toHaveAttribute("aria-disabled", "false");
     });