chore: use dev server when running playwright tests locally (#11879)

.github/workflows/ci.yml

@@ -78,10 +78,10 @@ jobs:
       - name: Build example for web
         run: |
           npm install -g sharp-cli@^2.1.0
-          yarn example web:export
+          yarn example expo export:web
 
       - name: Run integration tests
-        run: yarn example test:e2e
+        run: yarn example test
 
   build:
     runs-on: ubuntu-latest

CONTRIBUTING.md

@@ -45,22 +45,28 @@ Remember to add tests for your change if possible. Run the unit tests by:
 yarn test
 ```
 
-Running the e2e tests with Playwright requires building the [example app](/example/) for web:
+Before running tests configure Playwright with:
 
 ```sh
-yarn example expo export:web
+npx playwright install
 ```
 
-Before running tests configure Playwright with:
+Run the e2e tests by:
 
 ```sh
-npx playwright install
+yarn example test --ui
 ```
 
-Run the e2e tests by:
+By default, this will use the local dev server for the app. If you want to test a production build, first build the [example app](/example/) for web:
+
+```sh
+yarn example expo export:web
+```
+
+Then run the tests with the `CI` environment variable:
 
 ```sh
-yarn example test:e2e
+CI=1 yarn example test
 ```
 
 ### Commit message convention

example/.gitignore

@@ -5,6 +5,10 @@ ios/Pods
 ios
 android
 
+# Playwright
+playwright-report/
+test-results/
+
 # @generated expo-cli sync-e7dcf75f4e856f7b6f3239b3f3a7dd614ee755a8
 # The following patterns were generated by expo-cli
 
@@ -64,4 +68,4 @@ buck-out/
 web-build/
 dist/
 
-# @end expo-cli
+# @end expo-cli

example/e2e/playwright.config.ts

@@ -1,12 +1,14 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 import path from 'path';
 
-const config: PlaywrightTestConfig = {
+const PORT = process.env.CI ? 3579 : 19006;
+
+export default defineConfig({
   testDir: path.join(__dirname, 'tests'),
-  globalSetup: require.resolve('./config/setup-server.ts'),
-  globalTeardown: require.resolve('./config/teardown-server.ts'),
-  workers: 1,
-  reporter: 'list',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
   projects: [
     {
       name: 'Chromium',
@@ -17,6 +19,25 @@ const config: PlaywrightTestConfig = {
       use: { browserName: 'firefox' },
     },
   ],
-};
-
-export default config;
+  use: {
+    baseURL: `http://127.0.0.1:${PORT}`,
+    trace: 'on-first-retry',
+  },
+  webServer: [
+    {
+      cwd: path.join(__dirname, '..'),
+      command: process.env.CI
+        ? `yarn serve --no-port-switching --single --listen ${PORT} web-build`
+        : `yarn start --web --port 19000`,
+      url: `http://127.0.0.1:${PORT}`,
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command: 'yarn server',
+      url: 'http://127.0.0.1:3275',
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+    },
+  ],
+});

example/e2e/tests/Link.test.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('http://localhost:3579');
+  await page.goto('/');
   await page.getByText('<Link />').click();
 });
 

example/e2e/tests/index.test.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('http://localhost:3579');
+  await page.goto('/');
 });
 
 test('loads the example app', async ({ page }) => {

example/package.json

@@ -5,12 +5,8 @@
   "private": true,
   "scripts": {
     "start": "expo start",
-    "web": "expo start --web",
-    "web:export": "expo export:web",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
     "server": "nodemon -e '.js,.ts,.tsx' --exec \"babel-node -i '/node_modules[/\\](?react-native)/' -x '.web.tsx,.web.ts,.web.js,.tsx,.ts,.js' --config-file ./server/babel.config.js server\"",
-    "test:e2e": "npx playwright test --config=e2e/playwright.config.ts"
+    "test": "npx playwright test --config=e2e/playwright.config.ts"
   },
   "dependencies": {
     "@expo/react-native-action-sheet": "^4.0.1",
@@ -44,7 +40,6 @@
     "@expo/webpack-config": "~19.0.1",
     "@playwright/test": "^1.41.1",
     "@types/cheerio": "^0.22.35",
-    "@types/jest-dev-server": "^5.0.3",
     "@types/koa": "^2.14.0",
     "@types/mock-require": "^2.0.3",
     "@types/react": "~18.2.45",
@@ -54,7 +49,6 @@
     "babel-preset-expo": "^10.0.1",
     "cheerio": "^1.0.0-rc.12",
     "expect-type": "^0.17.3",
-    "jest-dev-server": "^9.0.2",
     "mock-require": "^3.0.3",
     "mock-require-assets": "^0.0.3",
     "nodemon": "^3.0.3",