feat: add e2e tests (#76)

## Context

This pull-request adds e2e tests as new feature to the boilerplate

## Changes

- Added playwright config file
- Installed dependencies
- Configured Jest to ignore Playwright tests
- Added example e2e test
- Added GitHub Actions workflow
- Adjusted the `.env.example`

## Checklist

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] I have tested my code for breaking changes and added the
corresponding footer in this PR if needed
- [x] I have added tests that prove my fix is effective or that my
feature works

.env.example

@@ -1,5 +1,6 @@
-## Environment Example File
-##
-## This file contains secret information like passwords and other settings
-##
-## PLEASE DO NOT SHARE THIS INFORMATION
+## Name of your app
+## v0.0.0
+## Last updated: YYYY-MM-DD
+
+PLAYWRIGHT_TEST_BASE_URL=
+CI=

.eslintrc

@@ -6,35 +6,32 @@
 		"eslint:recommended",
 		"plugin:react/recommended",
 		"plugin:@typescript-eslint/recommended",
-		"prettier"
+		"prettier",
 	],
 	"settings": {
 		"react": {
-			"version": "detect"
-		}
+			"version": "detect",
+		},
 	},
 	"env": {
 		"es6": true,
 		"browser": true,
-		"node": true
+		"node": true,
 	},
 	"plugins": ["prettier", "@typescript-eslint", "testing-library"],
 	"overrides": [
 		// Only uses Testing Library lint rules in test files
 		{
-			"files": [
-				"**/__tests__/**/*.[jt]s?(x)",
-				"**/?(*.)+(spec|test).[jt]s?(x)"
-			],
-			"extends": ["plugin:testing-library/react"]
-		}
+			"files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(test).[jt]s?(x)"],
+			"extends": ["plugin:testing-library/react"],
+		},
 	],
 	"rules": {
 		"react/prop-types": "off",
 		"@typescript-eslint/no-empty-function": "off",
 		"react/react-in-jsx-scope": "off",
 		"prettier/prettier": "error",
 		"@typescript-eslint/no-unused-vars": "error",
-		"@typescript-eslint/no-explicit-any": "error"
-	}
+		"@typescript-eslint/no-explicit-any": "error",
+	},
 }

.github/workflows/playwright.yml

@@ -0,0 +1,47 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event.number }}
+  cancel-in-progress: true
+
+jobs:
+  test_setup:
+    name: Test setup
+    runs-on: ubuntu-latest
+    outputs:
+      preview_url: ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
+    steps:
+      - name: Wait for Vercel Preview
+        uses: patrickedqvist/wait-for-vercel-preview@v1.3.1
+        id: waitForVercelPreviewDeployment
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          max_timeout: 300
+
+  test_e2e:
+    needs: test_setup
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run tests
+        run: pnpm test:e2e
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: ${{ needs.test_setup.outputs.preview_url }}

.gitignore

@@ -30,6 +30,8 @@ test/**/next-env.d.ts
 test/tmp/**
 test/.trace
 test/traces
+e2e/test-results
+e2e/report
 
 # Editors
 **/.idea

e2e/example.spec.ts

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('test homepage', () => {
+	test('Find links in DOM', async ({ page }) => {
+		await page.goto('/');
+
+		await expect(
+			page.getByRole('link', { name: 'Docs -> Find in-depth' }),
+		).toBeVisible();
+		await expect(
+			page.getByRole('link', { name: 'Learn -> Learn about Next.js' }),
+		).toBeVisible();
+		await expect(
+			page.getByRole('link', { name: 'Templates -> Explore starter' }),
+		).toBeVisible();
+		await expect(
+			page.getByRole('link', { name: 'Deploy -> Instantly deploy' }),
+		).toBeVisible();
+	});
+});

jest.config.js

@@ -10,6 +10,7 @@ const createJestConfig = nextJest({
 const customJestConfig = {
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 	testEnvironment: 'jsdom',
+	testPathIgnorePatterns: ['<rootDir>/e2e'],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package.json

@@ -19,12 +19,14 @@
 		"start": "next start",
 		"test:ci": "jest --ci",
 		"test:update": "jest --ci -u",
-		"test": "jest"
+		"test": "jest",
+		"test:e2e": "playwright test"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^19.2.1",
 		"@commitlint/config-conventional": "^19.1.0",
 		"@commitlint/cz-commitlint": "^19.2.0",
+		"@playwright/test": "^1.43.0",
 		"@remcolakens/simple-component-generator": "^1.0.5",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",

playwright.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+	testMatch: 'e2e/*.spec.ts',
+	testDir: 'e2e',
+	reporter: [['html', { open: 'never', outputFolder: 'e2e/report' }]],
+	outputDir: 'e2e/test-results/',
+
+	workers: process.env.CI ? 1 : undefined,
+	fullyParallel: true,
+
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 3 : 0,
+
+	use: {
+		baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL ?? 'http://localhost:3000',
+		trace: 'on-first-retry',
+	},
+
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] },
+		},
+	],
+});