Set up Playwright for fast-element testing (#7239)

## 📖 Description

Currently the tests in fast-element use Karma, Chai, and Mocha, this infrastructure is a bit outdated and doesn’t align with the tech stack used in fast-html and other projects we work on. It also makes it difficult to test in non-Chromium environments.

This PR is intended to add a basic set up for using Playwright for all testing. Not all tests have been converted to use Playwright, and some aspects are still not working yet (e.g. when it involves decorator). But it’s a good starting point and we can incrementally migrate the rest of tests onto Playwright appoach.

### 🎫 Issues

#7253

Author: marchbox

change/@microsoft-fast-element-883d6e16-fd99-4a0d-88e3-4534ba860645.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "introduce playwright for testing",
+  "packageName": "@microsoft/fast-element",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/fast-element/package.json

@@ -117,7 +117,9 @@
     "prettier:diff": "prettier --config ../../.prettierrc \"**/*.ts\" --list-different",
     "eslint": "eslint . --ext .ts",
     "eslint:fix": "eslint . --ext .ts --fix",
-    "test": "npm run eslint && npm run test-chrome:verbose && npm run doc:ci && npm run doc:exports:ci",
+    "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-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/playwright.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+    testDir: ".",
+    testMatch: "**/*.pw.spec.ts",
+    retries: 3,
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+    ],
+    webServer: {
+        command: "npm run test-server",
+        port: 5173,
+        reuseExistingServer: true,
+    },
+});

packages/fast-element/src/components/fast-definitions.ts

@@ -1,6 +1,6 @@
 import { Constructable, isString, KernelServiceId } from "../interfaces.js";
 import { Observable } from "../observation/observable.js";
-import { createTypeRegistry, FAST, TypeRegistry } from "../platform.js";
+import { createTypeRegistry, FAST, type TypeRegistry } from "../platform.js";
 import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
 import type { ElementViewTemplate } from "../templating/template.js";
 import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";

packages/fast-element/src/components/hydration.spec.ts

@@ -1,4 +1,5 @@
 import chai, { expect } from "chai";
+import "../debug.js";
 import { css, HostBehavior, Updates } from "../index.js";
 import { html } from "../templating/template.js";
 import { uniqueElementName } from "../testing/exports.js";