Add Playwright (#12)

.github/workflows/main.yml

@@ -48,22 +48,38 @@ jobs:
     - name: check-tools
       run: npm run check-tools --if-present
 
-    # Build
+    # 'npm run build' broken into separate steps
     - name: clean
       run: npm run clean --if-present
 
     - name: style
       run: npm run style-check --if-present
 
+    - name: spell-check
+      run: npm run spell-check --if-present
+
     - name: lint
       run: npm run lint --if-present
 
     - name: compile
       run: npm run compile --if-present
 
-    - name: spell-check
-      run: npm run spell-check --if-present
-
     # Test
     - name: test
       run: npm test --if-present
+
+    # end to end tests
+
+    # Separate commands to make it easier to see test results.
+    - name: Playwright Install
+      run: npm run playwright-install
+
+    - name: Playwright Test
+      run: npm run playwright-test
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -1,3 +1,6 @@
 node_modules/
 dist/
-temp/
+temp/
+/test-results/
+/playwright-report/
+/playwright/.cache/

.vscode/extensions.json

@@ -3,6 +3,7 @@
         "esbenp.prettier-vscode",
         "dbaeumer.vscode-eslint",
         "davidanson.vscode-markdownlint",
+        "ms-playwright.playwright",
         "bierner.github-markdown-preview",
         "streetsidesoftware.code-spell-checker",
         "vscode-icons-team.vscode-icons",

config/jest.config.js

@@ -1,7 +1,12 @@
-// eslint-disable-next-line no-undef
-module.exports = {
+/** @type {import('jest').Config} */
+const config = {
     rootDir: "../",
+    // Only run test files with postfix .test.ts
+    testRegex: ".*test.ts",
     preset: "ts-jest",
     testEnvironment: "node",
-    coverageDirectory: "./temp/coverage"
+    coverageDirectory: "./temp/coverage",
 };
+
+// eslint-disable-next-line no-undef
+module.exports = config;

config/playwright.config.ts

@@ -0,0 +1,120 @@
+import { defineConfig, devices } from "@playwright/test";
+import path from "path";
+import * as fs from "fs";
+
+// path is based on the current working directory which is different between the extension and command line.
+
+// extension requires
+const testDirExtension = path.resolve("..", "test");
+
+// command line requires
+const testDirCmd = path.resolve("test");
+
+// Decide based on what cwd is.
+const isCmd = fs.existsSync(testDirCmd);
+
+const testDir = isCmd ? testDirCmd : testDirExtension;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config = defineConfig({
+    testDir,
+    testMatch: "test/*.spec.ts",
+
+    /* Maximum time one test can run for. */
+    timeout: 30 * 1000,
+    expect: {
+        /**
+         * Maximum time expect() should wait for the condition to be met.
+         * For example in `await expect(locator).toHaveText();`
+         */
+        timeout: 5000,
+    },
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: [["html"], process.env.CI ? ["github"] : ["list"]],
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+        actionTimeout: 0,
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        // baseURL: 'http://localhost:3000',
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+
+        // allow reading from clipboard
+        permissions: ["clipboard-read"],
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: {
+                ...devices["Desktop Chrome"],
+            },
+        },
+
+        // {
+        //   name: 'firefox',
+        //   use: {
+        //     ...devices['Desktop Firefox'],
+        //   },
+        // },
+
+        // {
+        //   name: 'webkit',
+        //   use: {
+        //     ...devices['Desktop Safari'],
+        //   },
+        // },
+
+        /* Test against mobile viewports. */
+        // {
+        //   name: 'Mobile Chrome',
+        //   use: {
+        //     ...devices['Pixel 5'],
+        //   },
+        // },
+        // {
+        //   name: 'Mobile Safari',
+        //   use: {
+        //     ...devices['iPhone 12'],
+        //   },
+        // },
+
+        /* Test against branded browsers. */
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: {
+        //     channel: 'msedge',
+        //   },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: {
+        //     channel: 'chrome',
+        //   },
+        // },
+    ],
+
+    /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+    // outputDir: 'test-results/',
+
+    /* Run your local dev server before starting the tests */
+    // webServer: {
+    //   command: 'npm run start',
+    //   port: 3000,
+    // },
+});
+
+export default config;

docs/notes.md

@@ -35,6 +35,7 @@ Designed for developing TypeScript NPM libraries. The layout can be applied to o
         - [prettier disables](#prettier-disables)
         - [prettier settings](#prettier-settings)
     - [cspell](#cspell)
+    - [Playwright](#playwright)
     - [jest](#jest)
         - [jest commands](#jest-commands)
         - [jest coverage disables](#jest-coverage-disables)
@@ -190,6 +191,7 @@ should be used to build everything and test the package.
 - [node](https://nodejs.org/) [download node lts](https://nodejs.org/en/download/)
 - [TypeScript](https://www.typescriptlang.org/)
 - [jest](https://jestjs.io/)
+- [Playwright](https://playwright.dev/)
 - [prettier](https://prettier.io/)
 - [eslint](https://eslint.org/)
 - [api-extractor](https://api-extractor.com/)
@@ -240,6 +242,9 @@ cSpell:ignore dbaeumer esbenp DavidAnson
 - Code Spell Checker
     - id: `streetsidesoftware.code-spell-checker`
     - config: `.vscode\settings.json` add additional words `cSpell.words`
+- Playwright
+    - id: `ms-playwright.playwright`
+    - config: `config\playwright.config.ts`
 
 ## Tool Notes
 
@@ -299,6 +304,8 @@ Ignore a specific word in a file.
 
 [cspell Inline Document Settings](https://cspell.org/configuration/document-settings/#inline-document-settings)
 
+### Playwright
+
 ### Jest
 
 #### jest commands

package.json

@@ -33,6 +33,10 @@
         "check-install": "ts-node scripts/check-install.ts",
         "check-environment": "ts-node scripts/check-environment.ts",
         "package-update": "ts-node scripts/update.ts",
+        "playwright": "npm run playwright-install && npm run playwright-test",
+        "playwright-install": "playwright install --with-deps chromium",
+        "playwright-test": "playwright test --config ./config/playwright.config.ts",
+        "playwright-report": "playwright show-report",
         "start": "ts-node test/main.ts"
     },
     "repository": {
@@ -62,5 +66,9 @@
         "ts-jest": "29.0.5",
         "ts-node": "10.9.1",
         "typescript": "5.3.3"
+    },
+    "dependencies": {
+        "@playwright/test": "^1.45.0",
+        "playwright": "^1.45.0"
     }
 }

test/package.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+import { hello } from "../src/index";
+
+test("basic", () => {
+    const actual = hello();
+    const expected = "hello";
+    expect(actual).toBe(expected);
+});