feat: add mobile devices e2e

README.md

@@ -79,6 +79,10 @@ If you are new to pnpm you need to [install it on your local machine](https://pn
 
 pnpm install
 
+# Install playwright for end-to-end tests
+
+pnpm exec playwright install --with-deps
+
 # Start local webserver at port 3000
 
 pnpm dev
@@ -91,9 +95,17 @@ pnpm lint
 
 pnpm test
 
+# Run end-to-end tests
+
+pnpm test:e2e
+
 # Build app for production (gets output in the 'dist' directory)
 
 pnpm build
+
+# Start production server
+
+pnpm start
 ```
 
 ## Learn More

e2e/example.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 
 test.describe('test homepage', () => {
 	test('Find links in DOM', async ({ page }) => {
-		await page.goto('/');
+		await page.goto('/', { waitUntil: 'domcontentloaded' });
 
 		await expect(
 			page.getByRole('link', { name: 'Docs -> Find in-depth' }),

playwright.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
 	workers: process.env.CI ? 1 : undefined,
 	fullyParallel: true,
 
-	forbidOnly: !!process.env.CI,
+	forbidOnly: process.env.CI ? true : false,
 	retries: process.env.CI ? 3 : 0,
 
 	use: {
@@ -32,5 +32,25 @@ export default defineConfig({
 			name: 'webkit',
 			use: { ...devices['Desktop Safari'] },
 		},
+		{
+			name: 'mobile webkit',
+			use: {
+				...devices['iPhone 14'],
+			},
+		},
+		{
+			name: 'mobile chromium',
+			use: {
+				...devices['Pixel 7'],
+			},
+		},
 	],
+
+	webServer: process.env.CI
+		? undefined
+		: {
+				command: 'pnpm build && pnpm start',
+				url: 'http://localhost:3000',
+				reuseExistingServer: !process.env.CI,
+			},
 });