replaces Cypress with Playwright

.github/workflows/e2e-client.yml

@@ -0,0 +1,47 @@
+name: e2e client
+on:
+  push:
+    paths:
+      - 'app/**'
+      - '.github/workflows/e2e-client.yml'
+      - '!app/README.md'
+
+jobs:
+  e2e_client:
+    timeout-minutes: 15
+    runs-on: ubuntu-22.04
+    strategy:
+      fail-fast: false
+    defaults:
+      run:
+        working-directory: app
+    steps:
+    - name: checkout pull
+      uses: actions/checkout@v3
+
+    - name: Node setup
+      uses: actions/setup-node@v3
+      with:
+        node-version-file: 'app/.nvmrc'
+        cache: yarn
+        cache-dependency-path: 'app/yarn.lock'
+
+    - name: Install dependencies
+      run: yarn install --immutable
+
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
+      env:
+        NEXT_PUBLIC_MAPBOX_API_TOKEN: ${{ secrets.NEXT_PUBLIC_MAPBOX_API_TOKEN }}
+        # Recommended: pass the GitHub token lets this action correctly
+        # determine the unique run id necessary to re-run the checks
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

app/.eslintignore

@@ -1,3 +1,2 @@
 node_modules
 .next
-# **/*__test__.js

app/.gitignore

@@ -26,10 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env.*
 
 # vercel
 .vercel
@@ -43,9 +40,6 @@ yarn-error.log*
 !.yarn/sdks
 !.yarn/versions
 
-# cypress
-/cypress/screenshots
-/cypress/videos
 
 # storybook
 storybook-static
@@ -54,3 +48,9 @@ storybook-static
 tsconfig.tsbuildinfo
 
 report.*
+
+# e2e testing
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/e2e/.auth

app/docs/tests.stories.mdx

@@ -4,4 +4,4 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 # Tests
 
-- Cypress
+- Playwright

app/e2e/example.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test';
+
+test('About page', async ({ page }) => {
+  await page.goto('/about');
+
+  await expect(page).toHaveTitle(/About/);
+});

app/layout/sign-in/component.tsx

@@ -40,6 +40,7 @@ export const SignIn: React.FC<SignInProps> = () => {
           url: '/sign-in',
           data: omit(data, 'checkbox'),
         });
+
         if (signUpResponse.status === 201) {
           await signIn('credentials', { ...data, callbackUrl });
         }

app/package.json

@@ -8,8 +8,8 @@
     "start": "next start",
     "check-types": "tsc",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run",
+    "e2e:ui": "playwright test --ui",
+    "e2e": "playwright test",
     "storybook:styles:dev": "NODE_ENV=development tailwind build -i ./styles/tailwind.css -o ./public/styles/tailwind.storybook.css",
     "storybook:styles:prod": "NODE_ENV=production tailwind build -i ./styles/tailwind.css -o ./public/styles/tailwind.storybook.css",
     "storybook:dev": "yarn storybook:styles:dev && start-storybook -p 6006 -s ./public -c .storybook",
@@ -103,6 +103,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
+    "@playwright/test": "1.36.2",
     "@storybook/addon-actions": "^6.2.9",
     "@storybook/addon-essentials": "^6.2.9",
     "@storybook/addon-links": "^6.2.9",
@@ -115,7 +116,6 @@
     "@typescript-eslint/parser": "5.57.0",
     "autoprefixer": "^10.0.2",
     "babel-loader": "^8.2.2",
-    "cypress": "12.9.0",
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "eslint-config-prettier": "8.8.0",

app/playwright.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+
+const PORT = process.env.PORT || 3000;
+
+export default defineConfig({
+  testDir: './e2e',
+  outputDir: './e2e/test-results',
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: process.env.CI ? 'yarn build && yarn start' : 'yarn dev',
+    url: `http://localhost:${PORT}`,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+    env: {
+      NEXTAUTH_URL: `http://localhost:${PORT}`,
+      NEXTAUTH_SECRET: 'cats',
+      NEXT_PUBLIC_API_URL: 'https://marxan23.northeurope.cloudapp.azure.com',
+    },
+  },
+  /* 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:${PORT}`,
+
+    /* 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: 'Google Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chrome',
+      },
+    },
+    {
+      name: 'Microsoft Edge',
+      use: {
+        ...devices['Desktop Edge'],
+        channel: 'msedge',
+      },
+    },
+    {
+      name: 'Mozilla Firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+  ],
+});