Add Playwright boilerplate (#919)

.eslintrc.json

@@ -98,6 +98,10 @@
 					}
 				]
 			}
+		},
+		{
+			"files": ["__tests__/**/*.{ts,tsx}"],
+			"extends": ["plugin:playwright/recommended"]
 		}
 	],
 	"ignorePatterns": ["*.js", "*.jsx", "*.cjs", "src/checkout/src/graphql"]

.github/workflows/main.yml

@@ -1,5 +1,9 @@
 name: Build, TypeScripts, tests
-on: [pull_request]
+on:
+  push:
+    branches: [canary]
+  pull_request:
+    branches: [canary]
 
 concurrency:
   group: tests-${{ github.event.pull_request.number || github.ref }}
@@ -31,5 +35,43 @@ jobs:
       - name: Install dependencies
         run: pnpm --version && pnpm install --frozen-lockfile
 
+      - name: Get Playwright version
+        id: playwright-version
+        run: echo "playwright_version=$(pnpm playwright --version | sed -E 's/[^0-9.]//g')" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Playwright Cache
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.playwright_version }}
+
+      - run: pnpm exec playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      - run: pnpm exec playwright install-deps
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+
+      - uses: actions/cache@v3
+        name: Next.js cache
+        with:
+          path: |
+            ${{ github.workspace }}/.next/cache
+          key: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}
+
       - name: Build
         run: pnpm run build
+
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+/test-results/
+/playwright-report/
+/playwright/.cache/

__tests__/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test";
+
+test("has title", async ({ page }) => {
+	await page.goto("https://playwright.dev/");
+
+	// Expect a title "to contain" a substring.
+	await expect(page).toHaveTitle(/Playwright/);
+});
+
+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();
+});

package.json

@@ -13,7 +13,8 @@
 		"prepare": "husky install",
 		"i18n:extract": "formatjs extract 'src/checkout/src/**/*.{js,jsx,ts,tsx}' --format transifex --id-interpolation-pattern '[folder]/[name]/[sha512:contenthash:base64:6]' --out-file src/checkout/content/locales/en-US.json",
 		"i18n:compile": "formatjs compile-folder --ast --format transifex src/checkout/content/locales src/checkout/content/compiled-locales",
-		"i18n": "pnpm run i18n:extract && pnpm run i18n:compile"
+		"i18n": "pnpm run i18n:extract && pnpm run i18n:compile",
+		"test": "playwright test"
 	},
 	"dependencies": {
 		"@adyen/adyen-web": "5.51.0",
@@ -49,6 +50,7 @@
 		"@graphql-typed-document-node/core": "3.2.0",
 		"@next/env": "13.5.4",
 		"@parcel/watcher": "2.3.0",
+		"@playwright/test": "1.38.1",
 		"@tailwindcss/forms": "0.5.6",
 		"@tailwindcss/typography": "0.5.10",
 		"@types/lodash-es": "4.17.9",
@@ -64,6 +66,7 @@
 		"eslint-config-prettier": "9.0.0",
 		"eslint-plugin-formatjs": "4.10.5",
 		"eslint-plugin-import": "2.28.1",
+		"eslint-plugin-playwright": "0.16.0",
 		"graphql-tag": "2.12.6",
 		"husky": "8.0.3",
 		"lint-staged": "14.0.1",

playwright.config.ts

@@ -0,0 +1,67 @@
+import { defineConfig, devices } from "@playwright/test";
+import NextEnv from "@next/env";
+
+NextEnv.loadEnvConfig(".");
+
+const PORT = process.env.PORT || 3000;
+const baseURL = process.env.BASE_URL || `http://localhost:${PORT}`;
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: "./__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: process.env.CI ? [["html"], ["github"]] : [["html"], ["list"]],
+	/* 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,
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: "on-first-retry",
+	},
+
+	projects: [
+		{
+			name: "Desktop Chrome",
+			use: { ...devices["Desktop Chrome"] },
+		},
+
+		{
+			name: "Desktop Safari",
+			use: { ...devices["Desktop Safari"] },
+		},
+
+		{
+			name: "Mobile Chrome",
+			use: {
+				...devices["Pixel 5"],
+			},
+		},
+		{
+			name: "Mobile Safari",
+			use: devices["iPhone 12 Mini"],
+		},
+	],
+
+	webServer: {
+		command: "pnpm run start",
+		url: baseURL,
+		timeout: 120 * 1000,
+		reuseExistingServer: !process.env.CI,
+	},
+});

tsconfig.json

@@ -29,6 +29,13 @@
 			"@ui/*": ["./src/components/*"]
 		}
 	},
-	"include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts", "*.ts"],
+	"include": [
+		"next-env.d.ts",
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		".next/types/**/*.ts",
+		"*.ts",
+		"__tests__/**/*"
+	],
 	"exclude": ["node_modules"]
 }