Convert the FAST element package tests from Karma to Playwright

.prettierignore

@@ -1,5 +1,5 @@
 *.spec.ts
-!*.pw.spec.ts
+*.pw.spec.ts
 *.spec.tsx
 **/__tests__
 **/__test__

change/@microsoft-fast-element-71ad3aa1-de0d-404e-b5ce-09468e600a4a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update Karma tests to Playwright",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/fast-element/.prettierignore

@@ -1,3 +1,4 @@
 coverage/*
 dist/*
-*.spec.ts
+*.spec.ts
+*.pw.spec.ts

packages/fast-element/package.json

@@ -118,7 +118,7 @@
     "eslint:fix": "eslint . --ext .ts --fix",
     "test:playwright": "playwright test",
     "test-server": "npx vite test/ --clearScreen false",
-    "test": "npm run eslint && npm run test-chrome:verbose && npm run doc:ci && npm run doc:exports:ci && npm run test:playwright",
+    "test": "npm run eslint && npm run doc:ci && npm run doc:exports:ci && npm run test:playwright",
     "test-node": "nyc --reporter=lcov --reporter=text-summary --report-dir=coverage/node --temp-dir=coverage/.nyc_output mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-node:verbose": "nyc --reporter=lcov --reporter=text-summary --report-dir=coverage/node --temp-dir=coverage/.nyc_output mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",

packages/fast-element/src/components/attributes.pw.spec.ts

@@ -0,0 +1,49 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Attributes", () => {
+    test("should be properly aggregated across an inheritance hierarchy.", async ({
+        page,
+    }) => {
+        await page.goto("/");
+
+        const { componentAAttributesLength, componentBAttributesLength } =
+            await page.evaluate(async () => {
+                // @ts-expect-error: Client module.
+                const { AttributeConfiguration, AttributeDefinition, FASTElement } =
+                    await import("/main.js");
+
+                abstract class BaseElement extends FASTElement {
+                    attributeOne = "";
+                }
+                // Manually add attribute configuration like @attr decorator does
+                AttributeConfiguration.locate(BaseElement).push({
+                    property: "attributeOne",
+                } as any);
+
+                class ComponentA extends BaseElement {
+                    attributeTwo = "two-A";
+                }
+                // Manually add attribute configuration like @attr decorator does
+                AttributeConfiguration.locate(ComponentA).push({
+                    property: "attributeTwo",
+                } as any);
+
+                class ComponentB extends BaseElement {
+                    private get attributeTwo(): string {
+                        return "two-B";
+                    }
+                }
+
+                const componentAAttributes = AttributeDefinition.collect(ComponentA);
+                const componentBAttributes = AttributeDefinition.collect(ComponentB);
+
+                return {
+                    componentAAttributesLength: componentAAttributes.length,
+                    componentBAttributesLength: componentBAttributes.length,
+                };
+            });
+
+        expect(componentAAttributesLength).toBe(2);
+        expect(componentBAttributesLength).toBe(1);
+    });
+});