feat: Change e2e to be Playwright

Signed-off-by: Avior <github@avior.me>

.github/workflows/build_and_check.yml

@@ -28,8 +28,8 @@ jobs:
     - name: Check
       run: npm run check
 
+    - name: Prepare Tests
+      run: npm run install:tests
+
     - name: Test
-      run : |
+      run : npm run test
-        npm run start &
-        sleep 10
-        npm run test

.gitignore

@@ -24,3 +24,6 @@ slicers/*
 
 # Coverage
 coverage/
+
+# Playwright
+/playwright/

cypress.config.js

@@ -1,7 +0,0 @@
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
-	e2e: {
-		supportFile: false
-	}
-})

cypress/.gitignore

@@ -1,2 +0,0 @@
-videos
-screenshots

cypress/README.md

@@ -1,5 +0,0 @@
-# Cypress
-
-Hold End2End tests
-
-currently WIP

cypress/e2e/index.cy.ts

@@ -1,5 +0,0 @@
-it('titles are correct', () => {
-	const page = cy.visit('http://localhost:3000');
-
-	page.get('h1').should('have.text', 'Welcome to Astro');
-})

cypress/tsconfig.json

@@ -1,8 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "es5",
-		"lib": ["es5", "dom"],
-		"types": ["cypress", "node"]
-	},
-	"include": ["**/*.ts"]
-}

e2e/README.md

@@ -0,0 +1,5 @@
+# e2e
+
+Hold End 2 End tests
+
+currently WIP

e2e/example.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test'
+
+test('has title', async ({ page }) => {
+	await page.goto('/');
+
+	// Expect a title "to contain" a substring.
+	await expect(page).toHaveTitle(/Astro/);
+})

package.json

@@ -9,9 +9,11 @@
 		"check": "npm run check:astro && npm run check:typescript",
 		"check:astro": "astro check",
 		"check:typescript": "tsc --noEmit",
-		"test": "npm run test:unit && npm run test:integ",
+		"test": "npm run test:unit && npm run test:e2e",
 		"test:unit": "vitest --coverage --run",
-		"test:integ": "cypress run --headless --browser chromium"
+		"test:e2e": "playwright test",
+
+		"install:test": "playwright install --with-deps"
 	},
 	"dependencies": {
 		"@astrojs/node": "^5",
@@ -24,9 +26,9 @@
 		"tailwindcss": "^3"
 	},
 	"devDependencies": {
+		"@playwright/test": "^1.36.1",
 		"@types/node": "^20",
 		"@vitest/coverage-v8": "^0.33.0",
-		"cypress": "^12",
 		"vitest": "^0.33.0"
 	}
 }

playwright.config.ts

@@ -0,0 +1,62 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+	webServer: {
+		command: 'npm run start',
+		url: 'http://localhost:3000',
+		timeout: 120 * 1000,
+		reuseExistingServer: !process.env.CI
+	},
+	outputDir: './playwright/results',
+	testDir: './e2e',
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined as any,
+	reporter: process.env.CI ? 'list' : [['html', {
+		outputFolder: './playwright/report',
+		open: 'never'
+	}]],
+	use: {
+		baseURL: 'http://localhost:3000',
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+		name: 'chromium',
+		use: { ...devices['Desktop Chrome'] },
+		},
+
+		{
+		name: 'firefox',
+		use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+		name: 'webkit',
+		use: { ...devices['Desktop Safari'] },
+		},
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+})