Make Playwright tests async

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"
+}

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"
+}

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",

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,
-        };
-    },
-});

packages/web-components/fast-foundation/src/accordion-item/accordion-item.pw.spec.ts

@@ -1,34 +1,16 @@
-import type { Locator, Page } from "@playwright/test";
 import { expect, test } from "@playwright/test";
 import { fixtureURL } from "../__test__/helpers.js";
 import type { FASTAccordionItem } from "./accordion-item.js";
 
 test.describe("Accordion item", () => {
-    let page: Page;
-    let element: Locator;
-    let root: Locator;
-    let heading: Locator;
-    let button: Locator;
-
-    test.beforeAll(async ({ browser }) => {
-        page = await browser.newPage();
-
-        element = page.locator("fast-accordion-item");
-
-        root = page.locator("#root");
-
-        heading = page.locator(`[role="heading"]`);
-
-        button = element.locator("button");
+    test("should set a default heading level of 2 when `headinglevel` is not provided", async ({
+        page,
+    }) => {
+        const root = page.locator("#root");
+        const element = page.locator("fast-accordion-item");
 
         await page.goto(fixtureURL("accordion-item--accordion-item"));
-    });
-
-    test.afterAll(async () => {
-        await page.close();
-    });
 
-    test("should set a default heading level of 2 when `headinglevel` is not provided", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-accordion-item>
@@ -38,12 +20,20 @@ test.describe("Accordion item", () => {
             `;
         });
 
-        await expect(element).not.hasAttribute("headinglevel");
+        await expect(element).not.toHaveAttribute("headinglevel");
 
         await expect(element).toHaveJSProperty("headinglevel", 2);
     });
 
-    test("should set the `aria-level` attribute on the internal heading element equal to the heading level", async () => {
+    test("should set the `aria-level` attribute on the internal heading element equal to the heading level", async ({
+        page,
+    }) => {
+        const root = page.locator("#root");
+        const element = page.locator("fast-accordion-item");
+        const heading = page.locator(`[role="heading"]`);
+
+        await page.goto(fixtureURL("accordion-item--accordion-item"));
+
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-accordion-item>
@@ -60,7 +50,15 @@ test.describe("Accordion item", () => {
         await expect(heading).toHaveAttribute("aria-level", "3");
     });
 
-    test("should set `aria-expanded` property on the internal control equal to the `expanded` property", async () => {
+    test("should set `aria-expanded` property on the internal control equal to the `expanded` property", async ({
+        page,
+    }) => {
+        const root = page.locator("#root");
+        const element = page.locator("fast-accordion-item");
+        const button = element.locator("button");
+
+        await page.goto(fixtureURL("accordion-item--accordion-item"));
+
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-accordion-item expanded></fast-accordion-item>
@@ -76,23 +74,39 @@ test.describe("Accordion item", () => {
         await expect(button).toHaveAttribute("aria-expanded", "false");
     });
 
-    test("should set `disabled` attribute on the internal control equal to the `disabled` property", async () => {
+    test("should set `disabled` attribute on the internal control equal to the `disabled` property", async ({
+        page,
+    }) => {
+        const root = page.locator("#root");
+        const element = page.locator("fast-accordion-item");
+        const button = element.locator("button");
+
+        await page.goto(fixtureURL("accordion-item--accordion-item"));
+
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-accordion-item disabled></fast-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 () => {
+    test("should set internal properties to match the id when provided", async ({
+        page,
+    }) => {
+        const root = page.locator("#root");
+        const element = page.locator("fast-accordion-item");
+        const button = element.locator("button");
+
+        await page.goto(fixtureURL("accordion-item--accordion-item"));
+
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-accordion-item id="foo"></fast-accordion-item>