chore: migrate downstream tests from Cypress to Playwright

package.json

@@ -79,12 +79,6 @@
     "vitest": "^4.0.8",
     "zone.js": "~0.16.0"
   },
-  "checkPeerDependencies": {
-    "ignore": [
-      "ajv",
-      "terser"
-    ]
-  },
   "docgen": {
     "publishDir": "_ng2_docs",
     "navigation": {

test-angular-versions/scaffold.sh

@@ -12,13 +12,16 @@ DIR=v$VERSION
 
 npx -y -p @angular/cli@$VERSION ng new --package-manager=yarn --style=css --routing=false --skip-git --skip-install --skip-tests $DIR
 rm -rf $DIR/src/app
-cp -Rp scaffold/* $DIR
+cp -Rp scaffold/src $DIR/
+cp -Rp scaffold/e2e $DIR/
+cp scaffold/playwright.config.ts $DIR/
 
 $JSON write $DIR/package.json name "$VERSION"
 $JSON write $DIR/package.json dependencies.@uirouter/angular "*"
-$JSON write $DIR/package.json dependencies.@uirouter/cypress-runner "*"
+$JSON write $DIR/package.json devDependencies.@playwright/test "^1.49.0"
+$JSON write $DIR/package.json devDependencies.serve "^14.2.4"
 $JSON write $DIR/package.json scripts.test "npm run test:dev && npm run test:prod"
-$JSON write $DIR/package.json scripts.test:dev "ng build --configuration development && cypress-runner run --path dist/$DIR"
-$JSON write $DIR/package.json scripts.test:prod "ng build  --configuration production && cypress-runner run --path dist/$DIR"
+$JSON write $DIR/package.json scripts.test:dev "ng build --configuration development && DIST_PATH=dist/$DIR/browser npx playwright test"
+$JSON write $DIR/package.json scripts.test:prod "ng build  --configuration production && DIST_PATH=dist/$DIR/browser npx playwright test"
 
 $JSON write ../downstream_projects.json  "projects.angular$VERSION" "./test-angular-versions/$DIR"

test-angular-versions/scaffold/e2e/sample_app.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Angular app', () => {
+  test('loads', async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('loads home state by default', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveURL(/\/home/);
+  });
+
+  test('renders uisref as links', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('a', { hasText: 'home' })).toBeVisible();
+    await expect(page.locator('a', { hasText: 'about' })).toBeVisible();
+    await expect(page.locator('a', { hasText: 'lazy' }).first()).toBeVisible();
+    await expect(page.locator('a', { hasText: 'lazy.child' }).first()).toBeVisible();
+    await expect(page.locator('a', { hasText: 'lazy.child.viewtarget' })).toBeVisible();
+  });
+
+  test('renders home', async ({ page }) => {
+    await page.goto('/home');
+    await expect(page.locator('a', { hasText: 'home' })).toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'about' })).not.toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('home works');
+  });
+
+  test('renders about', async ({ page }) => {
+    await page.goto('/home');
+    await page.goto('/about');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'about' })).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('about works');
+  });
+
+  test('loads lazy routes', async ({ page }) => {
+    await page.goto('/home');
+    await page.goto('/lazy');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'lazy' }).first()).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('lazy works');
+  });
+
+  test('routes to lazy routes', async ({ page }) => {
+    await page.goto('/lazy');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'lazy' }).first()).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('lazy works');
+  });
+
+  test('routes to lazy child routes', async ({ page }) => {
+    await page.goto('/lazy/child');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'lazy.child' }).first()).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('lazy.child works');
+  });
+
+  test('targets named views', async ({ page }) => {
+    await page.goto('/lazy/child/viewtarget');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'lazy.child' }).first()).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('lazy.child works');
+    await expect(page.locator('#header')).toContainText('lazy.child.viewtarget works');
+    await expect(page.locator('#footer')).toContainText('lazy.child.viewtarget works');
+  });
+});

test-angular-versions/scaffold/playwright.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from '@playwright/test';
+
+const distPath = process.env.DIST_PATH || 'dist';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:4000',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: `npx serve ${distPath} -l 4000 -s`,
+    url: 'http://localhost:4000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

test-angular-versions/v21-standalone/e2e/sample_app.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Angular app', () => {
+  test('loads', async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('loads home state by default', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveURL(/\/home/);
+  });
+
+  test('renders uisref as links', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('a', { hasText: 'home' })).toBeVisible();
+    await expect(page.locator('a', { hasText: 'about' })).toBeVisible();
+    await expect(page.locator('a', { hasText: 'lazy' }).first()).toBeVisible();
+    await expect(page.locator('a', { hasText: 'lazy.child' }).first()).toBeVisible();
+    await expect(page.locator('a', { hasText: 'lazy.child.viewtarget' })).toBeVisible();
+  });
+
+  test('renders home', async ({ page }) => {
+    await page.goto('/home');
+    await expect(page.locator('a', { hasText: 'home' })).toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'about' })).not.toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('home works');
+  });
+
+  test('renders about', async ({ page }) => {
+    await page.goto('/home');
+    await page.goto('/about');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'about' })).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('about works');
+  });
+
+  test('loads lazy routes', async ({ page }) => {
+    await page.goto('/home');
+    await page.goto('/lazy');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'lazy' }).first()).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('lazy works');
+  });
+
+  test('routes to lazy routes', async ({ page }) => {
+    await page.goto('/lazy');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'lazy' }).first()).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('lazy works');
+  });
+
+  test('routes to lazy child routes', async ({ page }) => {
+    await page.goto('/lazy/child');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'lazy.child' }).first()).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('lazy.child works');
+    await expect(page.locator('#lazy-child-provided')).toContainText('provided value');
+  });
+
+  test('targets named views', async ({ page }) => {
+    await page.goto('/lazy/child/viewtarget');
+    await expect(page.locator('a', { hasText: 'home' })).not.toHaveClass(/active/);
+    await expect(page.locator('a', { hasText: 'lazy.child' }).first()).toHaveClass(/active/);
+    await expect(page.locator('#default')).toContainText('lazy.child works');
+    await expect(page.locator('#header')).toContainText('lazy.child.viewtarget works');
+    await expect(page.locator('#footer')).toContainText('lazy.child.viewtarget works');
+  });
+});

test-angular-versions/v21-standalone/package.json

@@ -7,8 +7,8 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "npm run test:dev && npm run test:prod",
-    "test:dev": "ng build --configuration development && cypress-runner run --path dist/v21-standalone/browser",
-    "test:prod": "ng build  --configuration production && cypress-runner run --path dist/v21-standalone/browser"
+    "test:dev": "ng build --configuration development && DIST_PATH=dist/v21-standalone/browser npx playwright test",
+    "test:prod": "ng build  --configuration production && DIST_PATH=dist/v21-standalone/browser npx playwright test"
   },
   "private": true,
   "dependencies": {
@@ -18,7 +18,6 @@
     "@angular/platform-browser": "^21.0.3",
     "@angular/platform-browser-dynamic": "^21.0.3",
     "@uirouter/angular": "*",
-    "@uirouter/cypress-runner": "*",
     "@uirouter/core": "*",
     "@uirouter/rx": "*",
     "rxjs": "~7.8.0",
@@ -29,19 +28,8 @@
     "@angular/build": "^21.0.2",
     "@angular/cli": "^21.0.2",
     "@angular/compiler-cli": "^21.0.3",
-    "@types/jasmine": "~5.1.0",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "@playwright/test": "^1.49.0",
+    "serve": "^14.2.4",
     "typescript": "~5.9.3"
-  },
-  "checkPeerDependencies": {
-    "ignore": [
-      "ajv",
-      "terser"
-    ]
   }
 }