Source from repo
Playwright Best Practices

Comprehensive Playwright testing guide covering E2E, component, API, visual, accessibility, and security tests.
currents-devGitHub currents-devSource repo Original GitHub link Publisher page
Files
Skill
n/a
Size
755.6 KB
Entrypoint
SKILL.md
Format
git-repo
Open file
frameworks/angular.md

Syntax-highlighted preview of this file as included in the skill package.
Rendered Source
markdown531 linesFree
frameworks/angular.md
1# Angular Testing with Playwright
2 
3## Table of Contents
4 
51. [Configuration](#configuration)
62. [Locator Strategies](#locator-strategies)
73. [Reactive Forms](#reactive-forms)
84. [Angular Material Components](#angular-material-components)
95. [Router Navigation](#router-navigation)
106. [Lazy-Loaded Modules](#lazy-loaded-modules)
117. [Signals and Observables](#signals-and-observables)
128. [Zone.js and Change Detection](#zonejs-and-change-detection)
139. [SSR Testing](#ssr-testing)
1410. [Protractor Migration Reference](#protractor-migration-reference)
1511. [Build Configurations](#build-configurations)
1612. [CDK Overlay Container](#cdk-overlay-container)
1713. [Anti-Patterns](#anti-patterns)
1814. [Related](#related)
19 
20> **When to use**: Testing Angular applications with reactive forms, Angular Material components, Router navigation, lazy-loaded modules, signals, observables, and Zone.js change detection.
21> **Prerequisites**: [core/configuration.md](../core/configuration.md), [core/locators.md](../core/locators.md)
22 
23## Configuration
24 
25### Playwright Config
26 
27```typescript
28import { defineConfig, devices } from '@playwright/test';
29 
30export default defineConfig({
31  testDir: './e2e',
32  testMatch: '**/*.spec.ts',
33  fullyParallel: true,
34  forbidOnly: !!process.env.CI,
35  retries: process.env.CI ? 2 : 0,
36  workers: process.env.CI ? '50%' : undefined,
37 
38  use: {
39    baseURL: 'http://localhost:4200',
40    trace: 'on-first-retry',
41    screenshot: 'only-on-failure',
42  },
43 
44  projects: [
45    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
46    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
47    { name: 'mobile', use: { ...devices['iPhone 14'] } },
48  ],
49 
50  webServer: {
51    command: process.env.CI
52      ? 'npx ng build && npx http-server dist/my-app/browser -p 4200 -s'
53      : 'npx ng serve',
54    url: 'http://localhost:4200',
55    reuseExistingServer: !process.env.CI,
56    timeout: 120_000,
57  },
58});
59```
60 
61### Project Structure
62 
63```text
64my-angular-app/
65  src/
66  e2e/
67    tests/
68      dashboard.spec.ts
69      login.spec.ts
70    fixtures/
71      auth.fixture.ts
72  playwright.config.ts
73  angular.json
74```
75 
76### Package Scripts
77 
78```json
79{
80  "scripts": {
81    "e2e": "playwright test",
82    "e2e:headed": "playwright test --headed",
83    "e2e:debug": "playwright test --debug",
84    "e2e:report": "playwright show-report"
85  }
86}
87```
88 
89## Locator Strategies
90 
91Angular generates internal attributes (`_ngcontent-*`, `_nghost-*`, `ng-reflect-*`) that change every build. Always use semantic locators.
92 
93```typescript
94test('use semantic locators for Angular apps', async ({ page }) => {
95  await page.goto('/projects');
96 
97  // Role-based locators work with Angular Material and native HTML
98  await page.getByRole('button', { name: 'New project' }).click();
99  await expect(page.getByRole('heading', { name: 'Create Project' })).toBeVisible();
100 
101  // Label-based for form fields
102  await page.getByLabel('Project title').fill('Alpha');
103 
104  // Test IDs for complex components without semantic roles
105  const chart = page.getByTestId('metrics-chart');
106  await expect(chart).toBeVisible();
107 
108  // Scope locators within component boundaries
109  const projectTable = page.getByRole('table', { name: 'Projects' });
110  const activeRow = projectTable.getByRole('row').filter({
111    has: page.getByRole('cell', { name: 'Active' }),
112  });
113  await activeRow.getByRole('button', { name: 'Edit' }).click();
114});
115```
116 
117## Reactive Forms
118 
119Playwright interacts with the rendered DOM, so reactive forms (`FormGroup`, `FormControl`, `FormArray`) are transparent.
120 
121```typescript
122test.describe('form validation', () => {
123  test.beforeEach(async ({ page }) => {
124    await page.goto('/signup');
125  });
126 
127  test('displays validation errors on blur', async ({ page }) => {
128    const emailField = page.getByLabel('Email');
129    await emailField.click();
130    await emailField.blur();
131    await expect(page.getByText('Email is required')).toBeVisible();
132 
133    await emailField.fill('invalid');
134    await emailField.blur();
135    await expect(page.getByText('Invalid email format')).toBeVisible();
136  });
137 
138  test('validates password confirmation', async ({ page }) => {
139    await page.getByLabel('Password', { exact: true }).fill('Secret123!');
140    await page.getByLabel('Confirm password').fill('Mismatch');
141    await page.getByLabel('Confirm password').blur();
142 
143    await expect(page.getByText('Passwords must match')).toBeVisible();
144 
145    await page.getByLabel('Confirm password').fill('Secret123!');
146    await expect(page.getByText('Passwords must match')).toBeHidden();
147  });
148 
149  test('handles FormArray add/remove', async ({ page }) => {
150    await page.goto('/contacts/edit');
151 
152    await page.getByRole('button', { name: 'Add email' }).click();
153    const emailInputs = page.getByLabel(/Email address/);
154    await expect(emailInputs).toHaveCount(2);
155 
156    await emailInputs.nth(1).fill('[email protected]');
157    await page.getByRole('button', { name: 'Remove email 1' }).click();
158 
159    await expect(emailInputs).toHaveCount(1);
160    await expect(emailInputs.first()).toHaveValue('[email protected]');
161  });
162 
163  test('disables submit until form is valid', async ({ page }) => {
164    const submitBtn = page.getByRole('button', { name: 'Register' });
165    await expect(submitBtn).toBeDisabled();
166 
167    await page.getByLabel('Name').fill('Alice');
168    await page.getByLabel('Email').fill('[email protected]');
169    await page.getByLabel('Password', { exact: true }).fill('Secret123!');
170    await page.getByLabel('Confirm password').fill('Secret123!');
171    await page.getByLabel('Accept terms').check();
172 
173    await expect(submitBtn).toBeEnabled();
174  });
175 
176  test('shows async validator loading state', async ({ page }) => {
177    await page.route('**/api/username-check*', async (route) => {
178      await new Promise((r) => setTimeout(r, 800));
179      await route.fulfill({ json: { available: true } });
180    });
181 
182    await page.getByLabel('Username').fill('alice');
183    await page.getByLabel('Username').blur();
184 
185    await expect(page.getByTestId('username-loading')).toBeVisible();
186    await expect(page.getByTestId('username-loading')).toBeHidden();
187    await expect(page.getByText('Username available')).toBeVisible();
188  });
189});
190```
191 
192## Angular Material Components
193 
194Angular Material uses proper ARIA attributes. Use role-based locators instead of CSS classes like `.mat-mdc-button`.
195 
196```typescript
197test.describe('Material components', () => {
198  test('mat-select dropdown', async ({ page }) => {
199    await page.goto('/preferences');
200 
201    await page.getByRole('combobox', { name: 'Language' }).click();
202    await page.getByRole('option', { name: 'Spanish' }).click();
203 
204    await expect(page.getByRole('combobox', { name: 'Language' })).toContainText('Spanish');
205  });
206 
207  test('mat-autocomplete suggestions', async ({ page }) => {
208    await page.goto('/members/add');
209 
210    const roleField = page.getByRole('combobox', { name: 'Role' });
211    await roleField.fill('dev');
212 
213    await expect(page.getByRole('option', { name: 'Developer' })).toBeVisible();
214    await expect(page.getByRole('option', { name: 'DevOps' })).toBeVisible();
215 
216    await page.getByRole('option', { name: 'Developer' }).click();
217    await expect(roleField).toHaveValue('Developer');
218  });
219 
220  test('mat-dialog interaction', async ({ page }) => {
221    await page.goto('/items');
222 
223    await page.getByRole('button', { name: 'Remove item' }).first().click();
224 
225    const dialog = page.getByRole('dialog');
226    await expect(dialog).toBeVisible();
227    await expect(dialog.getByText('Confirm deletion?')).toBeVisible();
228 
229    await dialog.getByRole('button', { name: 'Cancel' }).click();
230    await expect(dialog).toBeHidden();
231  });
232 
233  test('mat-table sorting', async ({ page }) => {
234    await page.goto('/members');
235 
236    await page.getByRole('columnheader', { name: 'Name' }).click();
237    const header = page.getByRole('columnheader', { name: 'Name' });
238    await expect(header).toHaveAttribute('aria-sort', 'ascending');
239 
240    await page.getByRole('columnheader', { name: 'Name' }).click();
241    await expect(header).toHaveAttribute('aria-sort', 'descending');
242  });
243 
244  test('mat-paginator navigation', async ({ page }) => {
245    await page.goto('/members');
246 
247    await expect(page.getByText('1 - 10 of 100')).toBeVisible();
248 
249    await page.getByRole('button', { name: 'Next page' }).click();
250    await expect(page.getByText('11 - 20 of 100')).toBeVisible();
251 
252    await page.getByRole('combobox', { name: 'Items per page' }).click();
253    await page.getByRole('option', { name: '50' }).click();
254    await expect(page.getByText('1 - 50 of 100')).toBeVisible();
255  });
256 
257  test('mat-snack-bar notification', async ({ page }) => {
258    await page.goto('/preferences');
259 
260    await page.getByRole('button', { name: 'Save' }).click();
261    await expect(page.getByText('Changes saved')).toBeVisible();
262 
263    await page.getByRole('button', { name: 'Close' }).click();
264    await expect(page.getByText('Changes saved')).toBeHidden();
265  });
266 
267  test('mat-stepper wizard', async ({ page }) => {
268    await page.goto('/wizard');
269 
270    await expect(page.getByText('Step 1 of 3')).toBeVisible();
271    await page.getByLabel('Name').fill('Bob');
272    await page.getByRole('button', { name: 'Next' }).click();
273 
274    await expect(page.getByText('Step 2 of 3')).toBeVisible();
275    await page.getByLabel('Organization').fill('Acme');
276    await page.getByRole('button', { name: 'Next' }).click();
277 
278    await expect(page.getByText('Step 3 of 3')).toBeVisible();
279    await expect(page.getByText('Bob')).toBeVisible();
280    await expect(page.getByText('Acme')).toBeVisible();
281  });
282});
283```
284 
285## Router Navigation
286 
287```typescript
288test.describe('Angular Router', () => {
289  test('lazy-loaded module loads on navigation', async ({ page }) => {
290    await page.goto('/');
291 
292    await page.getByRole('link', { name: 'Reports' }).click();
293    await page.waitForURL('/reports');
294 
295    await expect(page.getByRole('heading', { name: 'Reports Dashboard' })).toBeVisible();
296  });
297 
298  test('route guard redirects unauthorized users', async ({ page }) => {
299    await page.goto('/admin/settings');
300 
301    await expect(page).toHaveURL(/\/login/);
302    await expect(page.getByRole('heading', { name: 'Sign in' })).toBeVisible();
303  });
304 
305  test('resolver prefetches data', async ({ page }) => {
306    const resolverPromise = page.waitForResponse('**/api/items/*');
307    await page.goto('/items/42');
308    await resolverPromise;
309 
310    await expect(page.getByRole('heading', { level: 1 })).toContainText('Item');
311  });
312 
313  test('nested router-outlet renders children', async ({ page }) => {
314    await page.goto('/account/profile');
315 
316    await expect(page.getByRole('heading', { name: 'Account' })).toBeVisible();
317    await expect(page.getByRole('heading', { name: 'Profile', level: 2 })).toBeVisible();
318 
319    await page.getByRole('link', { name: 'Security' }).click();
320    await page.waitForURL('/account/security');
321 
322    await expect(page.getByRole('heading', { name: 'Account' })).toBeVisible();
323    await expect(page.getByRole('heading', { name: 'Security', level: 2 })).toBeVisible();
324  });
325 
326  test('query parameters drive filters', async ({ page }) => {
327    await page.goto('/products?type=hardware&page=3');
328 
329    await expect(page.getByRole('heading', { name: 'Hardware' })).toBeVisible();
330    await expect(page.getByText('Page 3')).toBeVisible();
331  });
332 
333  test('browser back navigates history', async ({ page }) => {
334    await page.goto('/');
335    await page.getByRole('link', { name: 'Products' }).click();
336    await page.waitForURL('/products');
337    await page.getByRole('link', { name: 'About' }).click();
338    await page.waitForURL('/about');
339 
340    await page.goBack();
341    await expect(page).toHaveURL(/\/products/);
342 
343    await page.goBack();
344    await expect(page).toHaveURL(/\/$/);
345  });
346});
347```
348 
349## Lazy-Loaded Modules
350 
351```typescript
352test('lazy module loads without chunk errors', async ({ page }) => {
353  const consoleErrors: string[] = [];
354  page.on('console', (msg) => {
355    if (msg.type() === 'error') consoleErrors.push(msg.text());
356  });
357 
358  await page.goto('/');
359 
360  const chunkRequest = page.waitForResponse((r) =>
361    r.url().includes('.js') && r.status() === 200
362  );
363  await page.getByRole('link', { name: 'Analytics' }).click();
364  await chunkRequest;
365 
366  await page.waitForURL('/analytics');
367  await expect(page.getByRole('heading', { name: 'Analytics' })).toBeVisible();
368 
369  const chunkErrors = consoleErrors.filter(
370    (e) => e.includes('ChunkLoadError') || e.includes('Loading chunk')
371  );
372  expect(chunkErrors).toEqual([]);
373});
374```
375 
376## Signals and Observables
377 
378Playwright cannot subscribe to observables or read signals directly. Test through the rendered output.
379 
380```typescript
381test.describe('signals through UI', () => {
382  test('signal-based counter updates DOM', async ({ page }) => {
383    await page.goto('/counter');
384 
385    await expect(page.getByTestId('value')).toHaveText('0');
386 
387    await page.getByRole('button', { name: 'Increment' }).click();
388    await expect(page.getByTestId('value')).toHaveText('1');
389 
390    await page.getByRole('button', { name: 'Reset' }).click();
391    await expect(page.getByTestId('value')).toHaveText('0');
392  });
393 
394  test('computed signal updates derived values', async ({ page }) => {
395    await page.goto('/cart');
396    await expect(page.getByTestId('total')).toHaveText('$0.00');
397 
398    await page.goto('/catalog');
399    await page.getByRole('listitem')
400      .filter({ hasText: '$19.99' })
401      .getByRole('button', { name: 'Add' })
402      .click();
403 
404    await page.getByRole('link', { name: 'Cart' }).click();
405    await expect(page.getByTestId('total')).toHaveText('$19.99');
406  });
407});
408 
409test.describe('observables through UI', () => {
410  test('debounced search batches API calls', async ({ page }) => {
411    await page.goto('/search');
412 
413    const apiCalls: string[] = [];
414    await page.route('**/api/search*', async (route) => {
415      apiCalls.push(route.request().url());
416      await route.continue();
417    });
418 
419    await page.getByRole('textbox', { name: 'Search' }).pressSequentially('playwright', {
420      delay: 50,
421    });
422 
423    await expect(page.getByRole('listitem')).toHaveCount(5);
424    expect(apiCalls.length).toBeLessThanOrEqual(2);
425  });
426 
427  test('switchMap cancels stale requests', async ({ page }) => {
428    await page.goto('/search');
429 
430    await page.getByRole('textbox', { name: 'Search' }).fill('initial');
431    await page.getByRole('textbox', { name: 'Search' }).fill('final');
432 
433    await expect(page.getByRole('listitem').first()).toContainText(/final/i);
434  });
435});
436```
437 
438## Zone.js and Change Detection
439 
440Angular uses Zone.js for change detection. Playwright does not depend on Zone.js and interacts with the DOM directly.
441 
442- **Change detection timing**: After interactions, Angular schedules change detection via Zone.js. Playwright's auto-waiting handles this.
443- **Zoneless Angular**: Angular 17+ supports zoneless change detection. Tests work identically since Playwright waits for DOM changes.
444- **Long-running async**: `setInterval` or long-running observables keep Angular "not stable." This does not affect Playwright (unlike Protractor).
445 
446## SSR Testing
447 
448```typescript
449// playwright.config.ts for SSR
450webServer: {
451  command: process.env.CI
452    ? 'npx ng build --ssr && node dist/my-app/server/server.mjs'
453    : 'npx ng serve --ssr',
454  url: 'http://localhost:4200',
455  reuseExistingServer: !process.env.CI,
456  timeout: 180_000,
457},
458```
459 
460```typescript
461test('no hydration errors', async ({ page }) => {
462  const errors: string[] = [];
463  page.on('console', (msg) => {
464    if (msg.type() === 'error' && msg.text().includes('hydration')) {
465      errors.push(msg.text());
466    }
467  });
468 
469  await page.goto('/');
470  await page.getByRole('button', { name: 'Get started' }).click();
471 
472  expect(errors).toEqual([]);
473});
474```
475 
476## Protractor Migration Reference
477 
478| Protractor | Playwright |
479|---|---|
480| `element(by.css('.btn'))` | `page.getByRole('button', { name: '...' })` |
481| `element(by.id('login'))` | `page.getByTestId('login')` |
482| `element(by.buttonText('Submit'))` | `page.getByRole('button', { name: 'Submit' })` |
483| `element(by.model('user.name'))` | `page.getByLabel('Name')` |
484| `element(by.binding('user.name'))` | `page.getByText(expectedValue)` |
485| `element(by.repeater('item in items'))` | `page.getByRole('listitem')` |
486| `browser.waitForAngular()` | Not needed — Playwright auto-waits |
487| `browser.sleep(3000)` | `await expect(locator).toBeVisible()` |
488| `browser.get('/path')` | `await page.goto('/path')` |
489| `protractor.ExpectedConditions` | `await expect(locator).toBeVisible()` |
490 
491## Build Configurations
492 
493| Scenario | Command | Notes |
494|---|---|---|
495| Local dev | `npx ng serve` | Fast rebuild, source maps |
496| CI production | `npx ng build && npx http-server dist/app/browser -p 4200 -s` | Tests production bundle |
497| CI SSR | `npx ng build --ssr && node dist/app/server/server.mjs` | Tests server-side rendering |
498| Staging | No `webServer` | Point `baseURL` to staging URL |
499 
500The `-s` flag on `http-server` enables SPA fallback for Angular Router.
501 
502## CDK Overlay Container
503 
504Angular Material and CDK render overlays (dialogs, menus, selects) in a special container outside the component tree. Playwright sees these as regular DOM elements:
505 
506```typescript
507const dialog = page.getByRole('dialog');
508const menu = page.getByRole('menu');
509const listbox = page.getByRole('listbox');
510```
511 
512## Anti-Patterns
513 
514| Anti-Pattern | Problem | Solution |
515|---|---|---|
516| `page.locator('[_ngcontent-xyz]')` | Scoped style attributes change every build | Use `getByRole`, `getByLabel`, `getByTestId` |
517| `page.locator('[ng-reflect-model]')` | Only exists in dev mode | Test rendered value: `expect(input).toHaveValue()` |
518| `page.locator('app-my-component')` | Component selectors are implementation details | Target rendered content with semantic locators |
519| `page.locator('.mat-mdc-button')` | Material classes change between versions | `page.getByRole('button', { name: '...' })` |
520| `page.evaluate(() => window.ng)` | Not available in production builds | Test through the DOM |
521| `await page.waitForTimeout(500)` | Zone.js timing varies | Use auto-retrying assertions |
522| `browser.waitForAngular()` | Does not exist in Playwright | Remove entirely |
523| `ng serve` in CI | Slower, includes debug code | Use `ng build && http-server` |
524 
525## Related
526 
527- [core/locators.md](../core/locators.md) — locator strategies for Angular Material
528- [core/assertions-waiting.md](../core/assertions-waiting.md) — auto-waiting assertions
529- [core/forms-validation.md](../testing-patterns/forms-validation.md) — form testing patterns
530- [architecture/test-architecture.md](../architecture/test-architecture.md) — E2E vs unit tests with TestBed
531
Preparing the source view

Playwright Best Practices

frameworks/angular.md
