Add playwright (#25)

.github/workflows/e2e.yaml → .github/workflows/cypress.yaml

@@ -1,4 +1,4 @@
-name: End-to-end tests
+name: Cypress tests
 on: 
   pull_request: {}
   push:
@@ -26,6 +26,6 @@ jobs:
         run: yarn dev&
 
       - name: Run tests
-        run: yarn test:e2e
+        run: yarn test:cypress
         env:
           REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}

.github/workflows/playwright.yml

@@ -0,0 +1,33 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+        cache: yarn
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+
+    - name: Build overboard
+      run: yarn build
+
+    - name: Run Playwright tests
+      run: yarn test:playwright
+      env:
+          PLAYWRIGHT_REPLAY_API_KEY: ${{ secrets.PLAYWRIGHT_REPLAY_API_KEY }}
+          REPLAY_PLAYWRIGHT_FIXTURE: ${{ secrets.REPLAY_PLAYWRIGHT_FIXTURE }}
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -7,3 +7,5 @@ node_modules
 out
 packages/site/cypress/screenshots
 *.log
+.yarn
+.yarnrc.yml

package.json

@@ -4,17 +4,19 @@
   "workspaces": [
     "packages/*"
   ],
+  "packageManager": "yarn@1.22.19",
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev",
     "format": "prettier '**/*' --write --ignore-unknown",
-    "test:e2e": "turbo run test:e2e"
+    "test:cypress": "turbo run test:cypress",
+    "test:playwright": "turbo run test:playwright"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
     "@babel/core": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
     "@babel/plugin-transform-react-display-name": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@types/node": "^18.6.3",
     "@types/react": "^18.0.15",
@@ -24,5 +26,9 @@
     "react-dom": "^18.2.0",
     "turbo": "1.4.2",
     "typescript": "^4.7.4"
+  },
+  "resolutions": {
+    "@replayio/replay": "0.21.4",
+    "@replayio/test-utils": "1.3.16"
   }
-}
+}

packages/site/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

packages/site/cypress.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "cypress";
-const { plugin: replayPlugin } = require("@replayio/cypress");
+import { plugin as replayPlugin } from "@replayio/cypress";
 
 export default defineConfig({
   e2e: {
@@ -10,7 +10,7 @@ export default defineConfig({
       // 🙋‍♂️ Add this line to install the replay plugin
       replayPlugin(on, config, {
         upload: true,
-        apiKey: process.env.REPLAY_API_KEY,
+        apiKey: process.env.CYPRESS_REPLAY_API_KEY,
       });
 
       return config;

packages/site/package.json

@@ -7,10 +7,13 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "test:e2e": "cypress run --browser=replay-chromium"
+    "test:cypress": "cypress run --browser=replay-chromium",
+    "test:playwright": "playwright test  --project replay-chromium"
   },
   "dependencies": {
     "@replayio/overboard": "*",
+    "axios": "^1.6.8",
+    "dotenv": "^16.4.5",
     "next": "^12.2.4",
     "next-transpile-modules": "^9.0.0",
     "react": "*",
@@ -19,7 +22,10 @@
     "webpack-react-component-name": "^5.0.4"
   },
   "devDependencies": {
-    "@replayio/cypress": "^1.7.20",
+    "@playwright/test": "1.37.0",
+    "@replayio/cypress": "1.7.20",
+    "@replayio/playwright": "2.0.0-alpha.10",
+    "@types/node": "^20.12.2",
     "cypress": "^12.14.0",
     "webpack": "^5.75.0"
   }

packages/site/playwright-tests/overboard.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect, Page } from '@playwright/test';
+
+async function selectColor(page: Page, color: "blue" | "green" | "red") {
+  await page.locator(`[data-cy=${color}]`).click();
+}
+
+async function addToCart(page: Page) {
+  await page.locator(`[data-cy=AddToCartButton]`).click();
+}
+
+async function verifyAddToCartDidNotFail(page) {
+  const errorElement = await page.locator('[data-cy=AddToCartButtonError]');
+  await expect(errorElement).toHaveCount(0);
+}
+
+test('select color', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+
+  await selectColor(page, "blue")
+  await selectColor(page, "green")
+});
+
+test('can buy board', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+
+  await selectColor(page, "blue")
+  await selectColor(page, "green")
+  await selectColor(page, "blue")
+  await addToCart(page)
+
+  // Wait for any potential network requests or changes after clicking the button
+  await page.waitForTimeout(1_000);
+  await verifyAddToCartDidNotFail(page);
+});

packages/site/playwright.config.ts

@@ -0,0 +1,68 @@
+import { devices, PlaywrightTestConfig, defineConfig } from '@playwright/test';
+import { devices as replayDevices } from "@replayio/playwright";
+
+import dotenv from 'dotenv';
+dotenv.config({ path: '.env' });
+
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = defineConfig({
+  testDir: './playwright-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: [
+    ['line'],
+    [
+      "@replayio/playwright/reporter",
+      {
+        apiKey: process.env.PLAYWRIGHT_REPLAY_API_KEY,
+        upload: true,
+      },
+    ],
+  ],
+  /* 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://127.0.0.1:3000',
+
+    /* 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: "replay-chromium",
+      use: { ...(replayDevices["Replay Chromium"] as any) },
+    },
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn dev',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});
+
+export default config;

turbo.json

@@ -5,7 +5,11 @@
       "dependsOn": ["^build"],
       "outputs": [".next/**"]
     },
-    "test:e2e": {
+    "test:cypress": {
+      "dependsOn": ["^build"],
+      "outputs": []
+    },
+    "test:playwright": {
       "dependsOn": ["^build"],
       "outputs": []
     },