Configure playwright test

.github/workflows/test.yml

@@ -50,3 +50,31 @@ jobs:
           name: cypress-videos
           path: cypress/videos
           if-no-files-found: ignore
+
+  test-with-playwright:
+    needs: test
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - name: Upload playwright report
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright/report/
+          retention-days: 7

.gitignore

@@ -24,3 +24,8 @@ cypress/videos
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Playwright
+/playwright/report/
+/playwright/test-results/
+/playwright/.cache/

package.json

@@ -5,6 +5,7 @@
   "homepage": "https://www.anthonyjcastro.com/",
   "scripts": {
     "start": "webpack serve --env environment=development --mode development",
+    "start:ci": "webpack serve --no-open --env environment=development --mode development",
     "build": "webpack --env environment=production  --mode production",
     "lint": "npx eslint",
     "lint:ci": "npx eslint --quiet",
@@ -29,6 +30,8 @@
     "@anthony-j-castro/prettier-config": "github:anthony-j-castro/prettier-config#semver:1.0.0",
     "@babel/core": "7.26.0",
     "@babel/preset-env": "7.26.0",
+    "@playwright/test": "1.49.1",
+    "@types/node": "22.10.7",
     "@types/react": "19.0.7",
     "@types/react-dom": "19.0.3",
     "babel-loader": "9.2.1",

playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+import * as dotenv from "dotenv";
+
+dotenv.config({ path: "./.env" });
+
+export default defineConfig({
+  testDir: "./playwright/tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [["html", { outputFolder: "./playwright/report" }]],
+  outputDir: "./playwright/test-results",
+  use: {
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "Google Chrome",
+      use: { ...devices["Desktop Chrome"], channel: "chrome" },
+    },
+  ],
+  webServer: {
+    command: "npm run start",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    stdout: "ignore",
+    stderr: "pipe",
+  },
+});

playwright/tests/render.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from "@playwright/test";
+
+test("the homepage successfully loads", async ({ page }) => {
+  await page.goto("http://localhost:3000");
+
+  await expect(page.getByTestId("greeting")).toBeVisible();
+});

playwright/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "baseUrl": "../src",
+    "esModuleInterop": true,
+    "lib": ["es5", "dom"],
+    "paths": {
+      "~/playwright/*": ["../playwright/*"],
+      "~/src/*": ["*"]
+    },
+    "resolveJsonModule": true,
+    "target": "es5",
+    "types": ["chrome", "node"]
+  },
+  "include": ["**/*.ts"]
+}

src/components/App/index.tsx

@@ -47,7 +47,10 @@ const App = () => {
           </SocialLinks>
         </div>
         <CopyColumn>
-          <GreetingParagraph data-cy="greeting">
+          <GreetingParagraph
+            data-cy="greeting"
+            data-testid="greeting"
+          >
             Hi! I’m Anthony.
           </GreetingParagraph>
           <Paragraph>