From 90f9a3ec4b673a7a3ed6e97ce139e9c2c52d5c16 Mon Sep 17 00:00:00 2001
From: Stephanie Hays <steph@stephhays.dev>
Date: Thu, 6 Jun 2024 21:15:56 -0500
Subject: [PATCH] WIP Playwright tests

---
 .github/workflows/playwright.yml | 27 +++++++++++
 .gitignore                       |  4 ++
 package.json                     |  5 +-
 playwright.config.ts             | 78 ++++++++++++++++++++++++++++++++
 src/tests/example.spec.ts        | 18 ++++++++
 yarn.lock                        | 28 ++++++------
 6 files changed, 144 insertions(+), 16 deletions(-)
 create mode 100644 .github/workflows/playwright.yml
 create mode 100644 playwright.config.ts
 create mode 100644 src/tests/example.spec.ts

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 00000000000..b8185c45132
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,27 @@
+name: Playwright Tests
+
+on:
+  pull_request:
+    branches: [ main, master ]
+  workflow_dispatch:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository using git
+        uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Build site
+        run: yarn build
+      - name: Run Playwright tests
+        run: yarn tests
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 14
diff --git a/.gitignore b/.gitignore
index 7f9f1ae3045..5bbbfeaeb7c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,3 +49,7 @@ public/images/global-shared
 apple-touch-*.png
 favicon.ico
 .astro
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/package.json b/package.json
index e25027128ff..516a9f91bbc 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,9 @@
     "astro": "npx astro",
     "telemetry": "npx astro telemetry disable",
     "dependencies": "yarn install --immutable",
-    "browsers": "npx playwright install",
-    "choco-theme": "npx --quiet ts-node --skipIgnore node_modules/choco-theme/build/choco-theme.ts --repository=docs"
+    "browsers": "npx playwright install --with-deps",
+    "choco-theme": "npx --quiet ts-node --skipIgnore node_modules/choco-theme/build/choco-theme.ts --repository=docs",
+    "tests": "npx playwright test"
   },
   "dependencies": {
     "choco-astro": "https://github.com/st3phhays/choco-astro#astro",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 00000000000..bef232ab413
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,78 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './src/tests',
+  /* 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',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:5086/en-us/',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* 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: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+      command: 'yarn preview',
+      url: 'http://localhost:5086/en-us/',
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+  }
+});
diff --git a/src/tests/example.spec.ts b/src/tests/example.spec.ts
new file mode 100644
index 00000000000..9c5776d0c20
--- /dev/null
+++ b/src/tests/example.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('./');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Chocolatey/);
+});
+
+// test('get started link', async ({ page }) => {
+//   await page.goto('https://playwright.dev/');
+
+//   // Click the get started link.
+//   await page.getByRole('link', { name: 'Get started' }).click();
+
+//   // Expects page to have a heading with the name of Installation.
+//   await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+// });
diff --git a/yarn.lock b/yarn.lock
index 37d662c5be0..6782007d40c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1701,7 +1701,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:^1.44.0":
+"@playwright/test@npm:^1.44.1":
   version: 1.44.1
   resolution: "@playwright/test@npm:1.44.1"
   dependencies:
@@ -2096,7 +2096,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:^20.11.25":
+"@types/node@npm:*, @types/node@npm:^20.14.2":
   version: 20.14.2
   resolution: "@types/node@npm:20.14.2"
   dependencies:
@@ -3049,14 +3049,14 @@ __metadata:
 
 "choco-theme@https://github.com/st3phhays/choco-theme#astro":
   version: 0.7.1
-  resolution: "choco-theme@https://github.com/st3phhays/choco-theme.git#commit=e3aa03248203706873ae3502f7e577ee7c9c7b41"
+  resolution: "choco-theme@https://github.com/st3phhays/choco-theme.git#commit=67a7f5292a94d6ed925eff148e2acc4b4d56f59c"
   dependencies:
     "@fortawesome/fontawesome-free": "npm:^6.1.2"
-    "@playwright/test": "npm:^1.44.0"
+    "@playwright/test": "npm:^1.44.1"
     "@popperjs/core": "npm:^2.11.8"
     "@types/bootstrap": "npm:^5.2.10"
     "@types/luxon": "npm:^3.3.0"
-    "@types/node": "npm:^20.11.25"
+    "@types/node": "npm:^20.14.2"
     "@typescript-eslint/eslint-plugin": "npm:^7.2.0"
     "@typescript-eslint/parser": "npm:^7.2.0"
     bootstrap: "npm:5.3.3"
@@ -3088,7 +3088,7 @@ __metadata:
     stylelint-config-twbs-bootstrap: "npm:^14.0.0"
     ts-node: "npm:^10.9.2"
     typescript: "npm:^5.4.5"
-  checksum: 10c0/d91d4a9ed9b8c69ccc2a98ec0142ec7655adf15f56b47ce916deebd8d87357c75921e9355d8f345624e23fb36c6b1436f4e81d8f745732bcec6cfe7817828305
+  checksum: 10c0/bbe03ca711923447bcca4534b27ccb02b03b3c5304110d8191ddad03fdad86b375753015680bb0c34a27898c7b8bdb7d2b3908d103940ac97ae40863b37ff43f
   languageName: node
   linkType: hard
 
@@ -4193,9 +4193,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.668":
-  version: 1.4.792
-  resolution: "electron-to-chromium@npm:1.4.792"
-  checksum: 10c0/ade79be9394a193030bf9df5119e7255df5a12680f41e5cde55dae072a11b1f86a7a2b449a893c68f2e69f0dbcd95a19f1b3c22f6f6c5f052828aac7591a288f
+  version: 1.4.794
+  resolution: "electron-to-chromium@npm:1.4.794"
+  checksum: 10c0/66c71bb8ecf375f730780fd9da9ea3ece5349c52207daf3d5a0571e7f35cd1f6710fad1f0e16a876872b03a0f936d48875bc9fea899544e74080ced6abb5a290
   languageName: node
   linkType: hard
 
@@ -4581,7 +4581,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-compat-utils@npm:^0.5.0":
+"eslint-compat-utils@npm:^0.5.1":
   version: 0.5.1
   resolution: "eslint-compat-utils@npm:0.5.1"
   dependencies:
@@ -4628,15 +4628,15 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-es-x@npm:^7.5.0":
-  version: 7.6.0
-  resolution: "eslint-plugin-es-x@npm:7.6.0"
+  version: 7.7.0
+  resolution: "eslint-plugin-es-x@npm:7.7.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.1.2"
     "@eslint-community/regexpp": "npm:^4.6.0"
-    eslint-compat-utils: "npm:^0.5.0"
+    eslint-compat-utils: "npm:^0.5.1"
   peerDependencies:
     eslint: ">=8"
-  checksum: 10c0/cb88c0a94dacdb65311563928c6ed0072939fff70e25f02e810329be388859ff60bf77b82096b639464293f49f98f83f7b5611b3331d0435d3bfca0c0ded5901
+  checksum: 10c0/73f04fb58bbf023422681e6af3be9540dfe3d3485021c6d4050b924797e302faef3de83ac8a4d9a4ac0d5704d6f241f95cc85e7459573476d3f658411ae1e627
   languageName: node
   linkType: hard