testeiya 0.2.1 → 0.3.9

package/skills/playwright-best-practices-skill/frameworks/angular.md

@@ -1,530 +0,0 @@
-# Angular Testing with Playwright
-
-## Table of Contents
-
-1. [Configuration](#configuration)
-2. [Locator Strategies](#locator-strategies)
-3. [Reactive Forms](#reactive-forms)
-4. [Angular Material Components](#angular-material-components)
-5. [Router Navigation](#router-navigation)
-6. [Lazy-Loaded Modules](#lazy-loaded-modules)
-7. [Signals and Observables](#signals-and-observables)
-8. [Zone.js and Change Detection](#zonejs-and-change-detection)
-9. [SSR Testing](#ssr-testing)
-10. [Protractor Migration Reference](#protractor-migration-reference)
-11. [Build Configurations](#build-configurations)
-12. [CDK Overlay Container](#cdk-overlay-container)
-13. [Anti-Patterns](#anti-patterns)
-14. [Related](#related)
-
-> **When to use**: Testing Angular applications with reactive forms, Angular Material components, Router navigation, lazy-loaded modules, signals, observables, and Zone.js change detection.
-> **Prerequisites**: [core/configuration.md](../core/configuration.md), [core/locators.md](../core/locators.md)
-
-## Configuration
-
-### Playwright Config
-
-```typescript
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-  testDir: './e2e',
-  testMatch: '**/*.spec.ts',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? '50%' : undefined,
-
-  use: {
-    baseURL: 'http://localhost:4200',
-    trace: 'on-first-retry',
-    screenshot: 'only-on-failure',
-  },
-
-  projects: [
-    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
-    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
-    { name: 'mobile', use: { ...devices['iPhone 14'] } },
-  ],
-
-  webServer: {
-    command: process.env.CI
-      ? 'npx ng build && npx http-server dist/my-app/browser -p 4200 -s'
-      : 'npx ng serve',
-    url: 'http://localhost:4200',
-    reuseExistingServer: !process.env.CI,
-    timeout: 120_000,
-  },
-});
-```
-
-### Project Structure
-
-```text
-my-angular-app/
-  src/
-  e2e/
-    tests/
-      dashboard.spec.ts
-      login.spec.ts
-    fixtures/
-      auth.fixture.ts
-  playwright.config.ts
-  angular.json
-```
-
-### Package Scripts
-
-```json
-{
-  "scripts": {
-    "e2e": "playwright test",
-    "e2e:headed": "playwright test --headed",
-    "e2e:debug": "playwright test --debug",
-    "e2e:report": "playwright show-report"
-  }
-}
-```
-
-## Locator Strategies
-
-Angular generates internal attributes (`_ngcontent-*`, `_nghost-*`, `ng-reflect-*`) that change every build. Always use semantic locators.
-
-```typescript
-test('use semantic locators for Angular apps', async ({ page }) => {
-  await page.goto('/projects');
-
-  // Role-based locators work with Angular Material and native HTML
-  await page.getByRole('button', { name: 'New project' }).click();
-  await expect(page.getByRole('heading', { name: 'Create Project' })).toBeVisible();
-
-  // Label-based for form fields
-  await page.getByLabel('Project title').fill('Alpha');
-
-  // Test IDs for complex components without semantic roles
-  const chart = page.getByTestId('metrics-chart');
-  await expect(chart).toBeVisible();
-
-  // Scope locators within component boundaries
-  const projectTable = page.getByRole('table', { name: 'Projects' });
-  const activeRow = projectTable.getByRole('row').filter({
-    has: page.getByRole('cell', { name: 'Active' }),
-  });
-  await activeRow.getByRole('button', { name: 'Edit' }).click();
-});
-```
-
-## Reactive Forms
-
-Playwright interacts with the rendered DOM, so reactive forms (`FormGroup`, `FormControl`, `FormArray`) are transparent.
-
-```typescript
-test.describe('form validation', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/signup');
-  });
-
-  test('displays validation errors on blur', async ({ page }) => {
-    const emailField = page.getByLabel('Email');
-    await emailField.click();
-    await emailField.blur();
-    await expect(page.getByText('Email is required')).toBeVisible();
-
-    await emailField.fill('invalid');
-    await emailField.blur();
-    await expect(page.getByText('Invalid email format')).toBeVisible();
-  });
-
-  test('validates password confirmation', async ({ page }) => {
-    await page.getByLabel('Password', { exact: true }).fill('Secret123!');
-    await page.getByLabel('Confirm password').fill('Mismatch');
-    await page.getByLabel('Confirm password').blur();
-
-    await expect(page.getByText('Passwords must match')).toBeVisible();
-
-    await page.getByLabel('Confirm password').fill('Secret123!');
-    await expect(page.getByText('Passwords must match')).toBeHidden();
-  });
-
-  test('handles FormArray add/remove', async ({ page }) => {
-    await page.goto('/contacts/edit');
-
-    await page.getByRole('button', { name: 'Add email' }).click();
-    const emailInputs = page.getByLabel(/Email address/);
-    await expect(emailInputs).toHaveCount(2);
-
-    await emailInputs.nth(1).fill('backup@example.com');
-    await page.getByRole('button', { name: 'Remove email 1' }).click();
-
-    await expect(emailInputs).toHaveCount(1);
-    await expect(emailInputs.first()).toHaveValue('backup@example.com');
-  });
-
-  test('disables submit until form is valid', async ({ page }) => {
-    const submitBtn = page.getByRole('button', { name: 'Register' });
-    await expect(submitBtn).toBeDisabled();
-
-    await page.getByLabel('Name').fill('Alice');
-    await page.getByLabel('Email').fill('alice@test.com');
-    await page.getByLabel('Password', { exact: true }).fill('Secret123!');
-    await page.getByLabel('Confirm password').fill('Secret123!');
-    await page.getByLabel('Accept terms').check();
-
-    await expect(submitBtn).toBeEnabled();
-  });
-
-  test('shows async validator loading state', async ({ page }) => {
-    await page.route('**/api/username-check*', async (route) => {
-      await new Promise((r) => setTimeout(r, 800));
-      await route.fulfill({ json: { available: true } });
-    });
-
-    await page.getByLabel('Username').fill('alice');
-    await page.getByLabel('Username').blur();
-
-    await expect(page.getByTestId('username-loading')).toBeVisible();
-    await expect(page.getByTestId('username-loading')).toBeHidden();
-    await expect(page.getByText('Username available')).toBeVisible();
-  });
-});
-```
-
-## Angular Material Components
-
-Angular Material uses proper ARIA attributes. Use role-based locators instead of CSS classes like `.mat-mdc-button`.
-
-```typescript
-test.describe('Material components', () => {
-  test('mat-select dropdown', async ({ page }) => {
-    await page.goto('/preferences');
-
-    await page.getByRole('combobox', { name: 'Language' }).click();
-    await page.getByRole('option', { name: 'Spanish' }).click();
-
-    await expect(page.getByRole('combobox', { name: 'Language' })).toContainText('Spanish');
-  });
-
-  test('mat-autocomplete suggestions', async ({ page }) => {
-    await page.goto('/members/add');
-
-    const roleField = page.getByRole('combobox', { name: 'Role' });
-    await roleField.fill('dev');
-
-    await expect(page.getByRole('option', { name: 'Developer' })).toBeVisible();
-    await expect(page.getByRole('option', { name: 'DevOps' })).toBeVisible();
-
-    await page.getByRole('option', { name: 'Developer' }).click();
-    await expect(roleField).toHaveValue('Developer');
-  });
-
-  test('mat-dialog interaction', async ({ page }) => {
-    await page.goto('/items');
-
-    await page.getByRole('button', { name: 'Remove item' }).first().click();
-
-    const dialog = page.getByRole('dialog');
-    await expect(dialog).toBeVisible();
-    await expect(dialog.getByText('Confirm deletion?')).toBeVisible();
-
-    await dialog.getByRole('button', { name: 'Cancel' }).click();
-    await expect(dialog).toBeHidden();
-  });
-
-  test('mat-table sorting', async ({ page }) => {
-    await page.goto('/members');
-
-    await page.getByRole('columnheader', { name: 'Name' }).click();
-    const header = page.getByRole('columnheader', { name: 'Name' });
-    await expect(header).toHaveAttribute('aria-sort', 'ascending');
-
-    await page.getByRole('columnheader', { name: 'Name' }).click();
-    await expect(header).toHaveAttribute('aria-sort', 'descending');
-  });
-
-  test('mat-paginator navigation', async ({ page }) => {
-    await page.goto('/members');
-
-    await expect(page.getByText('1 - 10 of 100')).toBeVisible();
-
-    await page.getByRole('button', { name: 'Next page' }).click();
-    await expect(page.getByText('11 - 20 of 100')).toBeVisible();
-
-    await page.getByRole('combobox', { name: 'Items per page' }).click();
-    await page.getByRole('option', { name: '50' }).click();
-    await expect(page.getByText('1 - 50 of 100')).toBeVisible();
-  });
-
-  test('mat-snack-bar notification', async ({ page }) => {
-    await page.goto('/preferences');
-
-    await page.getByRole('button', { name: 'Save' }).click();
-    await expect(page.getByText('Changes saved')).toBeVisible();
-
-    await page.getByRole('button', { name: 'Close' }).click();
-    await expect(page.getByText('Changes saved')).toBeHidden();
-  });
-
-  test('mat-stepper wizard', async ({ page }) => {
-    await page.goto('/wizard');
-
-    await expect(page.getByText('Step 1 of 3')).toBeVisible();
-    await page.getByLabel('Name').fill('Bob');
-    await page.getByRole('button', { name: 'Next' }).click();
-
-    await expect(page.getByText('Step 2 of 3')).toBeVisible();
-    await page.getByLabel('Organization').fill('Acme');
-    await page.getByRole('button', { name: 'Next' }).click();
-
-    await expect(page.getByText('Step 3 of 3')).toBeVisible();
-    await expect(page.getByText('Bob')).toBeVisible();
-    await expect(page.getByText('Acme')).toBeVisible();
-  });
-});
-```
-
-## Router Navigation
-
-```typescript
-test.describe('Angular Router', () => {
-  test('lazy-loaded module loads on navigation', async ({ page }) => {
-    await page.goto('/');
-
-    await page.getByRole('link', { name: 'Reports' }).click();
-    await page.waitForURL('/reports');
-
-    await expect(page.getByRole('heading', { name: 'Reports Dashboard' })).toBeVisible();
-  });
-
-  test('route guard redirects unauthorized users', async ({ page }) => {
-    await page.goto('/admin/settings');
-
-    await expect(page).toHaveURL(/\/login/);
-    await expect(page.getByRole('heading', { name: 'Sign in' })).toBeVisible();
-  });
-
-  test('resolver prefetches data', async ({ page }) => {
-    const resolverPromise = page.waitForResponse('**/api/items/*');
-    await page.goto('/items/42');
-    await resolverPromise;
-
-    await expect(page.getByRole('heading', { level: 1 })).toContainText('Item');
-  });
-
-  test('nested router-outlet renders children', async ({ page }) => {
-    await page.goto('/account/profile');
-
-    await expect(page.getByRole('heading', { name: 'Account' })).toBeVisible();
-    await expect(page.getByRole('heading', { name: 'Profile', level: 2 })).toBeVisible();
-
-    await page.getByRole('link', { name: 'Security' }).click();
-    await page.waitForURL('/account/security');
-
-    await expect(page.getByRole('heading', { name: 'Account' })).toBeVisible();
-    await expect(page.getByRole('heading', { name: 'Security', level: 2 })).toBeVisible();
-  });
-
-  test('query parameters drive filters', async ({ page }) => {
-    await page.goto('/products?type=hardware&page=3');
-
-    await expect(page.getByRole('heading', { name: 'Hardware' })).toBeVisible();
-    await expect(page.getByText('Page 3')).toBeVisible();
-  });
-
-  test('browser back navigates history', async ({ page }) => {
-    await page.goto('/');
-    await page.getByRole('link', { name: 'Products' }).click();
-    await page.waitForURL('/products');
-    await page.getByRole('link', { name: 'About' }).click();
-    await page.waitForURL('/about');
-
-    await page.goBack();
-    await expect(page).toHaveURL(/\/products/);
-
-    await page.goBack();
-    await expect(page).toHaveURL(/\/$/);
-  });
-});
-```
-
-## Lazy-Loaded Modules
-
-```typescript
-test('lazy module loads without chunk errors', async ({ page }) => {
-  const consoleErrors: string[] = [];
-  page.on('console', (msg) => {
-    if (msg.type() === 'error') consoleErrors.push(msg.text());
-  });
-
-  await page.goto('/');
-
-  const chunkRequest = page.waitForResponse((r) =>
-    r.url().includes('.js') && r.status() === 200
-  );
-  await page.getByRole('link', { name: 'Analytics' }).click();
-  await chunkRequest;
-
-  await page.waitForURL('/analytics');
-  await expect(page.getByRole('heading', { name: 'Analytics' })).toBeVisible();
-
-  const chunkErrors = consoleErrors.filter(
-    (e) => e.includes('ChunkLoadError') || e.includes('Loading chunk')
-  );
-  expect(chunkErrors).toEqual([]);
-});
-```
-
-## Signals and Observables
-
-Playwright cannot subscribe to observables or read signals directly. Test through the rendered output.
-
-```typescript
-test.describe('signals through UI', () => {
-  test('signal-based counter updates DOM', async ({ page }) => {
-    await page.goto('/counter');
-
-    await expect(page.getByTestId('value')).toHaveText('0');
-
-    await page.getByRole('button', { name: 'Increment' }).click();
-    await expect(page.getByTestId('value')).toHaveText('1');
-
-    await page.getByRole('button', { name: 'Reset' }).click();
-    await expect(page.getByTestId('value')).toHaveText('0');
-  });
-
-  test('computed signal updates derived values', async ({ page }) => {
-    await page.goto('/cart');
-    await expect(page.getByTestId('total')).toHaveText('$0.00');
-
-    await page.goto('/catalog');
-    await page.getByRole('listitem')
-      .filter({ hasText: '$19.99' })
-      .getByRole('button', { name: 'Add' })
-      .click();
-
-    await page.getByRole('link', { name: 'Cart' }).click();
-    await expect(page.getByTestId('total')).toHaveText('$19.99');
-  });
-});
-
-test.describe('observables through UI', () => {
-  test('debounced search batches API calls', async ({ page }) => {
-    await page.goto('/search');
-
-    const apiCalls: string[] = [];
-    await page.route('**/api/search*', async (route) => {
-      apiCalls.push(route.request().url());
-      await route.continue();
-    });
-
-    await page.getByRole('textbox', { name: 'Search' }).pressSequentially('playwright', {
-      delay: 50,
-    });
-
-    await expect(page.getByRole('listitem')).toHaveCount(5);
-    expect(apiCalls.length).toBeLessThanOrEqual(2);
-  });
-
-  test('switchMap cancels stale requests', async ({ page }) => {
-    await page.goto('/search');
-
-    await page.getByRole('textbox', { name: 'Search' }).fill('initial');
-    await page.getByRole('textbox', { name: 'Search' }).fill('final');
-
-    await expect(page.getByRole('listitem').first()).toContainText(/final/i);
-  });
-});
-```
-
-## Zone.js and Change Detection
-
-Angular uses Zone.js for change detection. Playwright does not depend on Zone.js and interacts with the DOM directly.
-
-- **Change detection timing**: After interactions, Angular schedules change detection via Zone.js. Playwright's auto-waiting handles this.
-- **Zoneless Angular**: Angular 17+ supports zoneless change detection. Tests work identically since Playwright waits for DOM changes.
-- **Long-running async**: `setInterval` or long-running observables keep Angular "not stable." This does not affect Playwright (unlike Protractor).
-
-## SSR Testing
-
-```typescript
-// playwright.config.ts for SSR
-webServer: {
-  command: process.env.CI
-    ? 'npx ng build --ssr && node dist/my-app/server/server.mjs'
-    : 'npx ng serve --ssr',
-  url: 'http://localhost:4200',
-  reuseExistingServer: !process.env.CI,
-  timeout: 180_000,
-},
-```
-
-```typescript
-test('no hydration errors', async ({ page }) => {
-  const errors: string[] = [];
-  page.on('console', (msg) => {
-    if (msg.type() === 'error' && msg.text().includes('hydration')) {
-      errors.push(msg.text());
-    }
-  });
-
-  await page.goto('/');
-  await page.getByRole('button', { name: 'Get started' }).click();
-
-  expect(errors).toEqual([]);
-});
-```
-
-## Protractor Migration Reference
-
-| Protractor | Playwright |
-|---|---|
-| `element(by.css('.btn'))` | `page.getByRole('button', { name: '...' })` |
-| `element(by.id('login'))` | `page.getByTestId('login')` |
-| `element(by.buttonText('Submit'))` | `page.getByRole('button', { name: 'Submit' })` |
-| `element(by.model('user.name'))` | `page.getByLabel('Name')` |
-| `element(by.binding('user.name'))` | `page.getByText(expectedValue)` |
-| `element(by.repeater('item in items'))` | `page.getByRole('listitem')` |
-| `browser.waitForAngular()` | Not needed — Playwright auto-waits |
-| `browser.sleep(3000)` | `await expect(locator).toBeVisible()` |
-| `browser.get('/path')` | `await page.goto('/path')` |
-| `protractor.ExpectedConditions` | `await expect(locator).toBeVisible()` |
-
-## Build Configurations
-
-| Scenario | Command | Notes |
-|---|---|---|
-| Local dev | `npx ng serve` | Fast rebuild, source maps |
-| CI production | `npx ng build && npx http-server dist/app/browser -p 4200 -s` | Tests production bundle |
-| CI SSR | `npx ng build --ssr && node dist/app/server/server.mjs` | Tests server-side rendering |
-| Staging | No `webServer` | Point `baseURL` to staging URL |
-
-The `-s` flag on `http-server` enables SPA fallback for Angular Router.
-
-## CDK Overlay Container
-
-Angular Material and CDK render overlays (dialogs, menus, selects) in a special container outside the component tree. Playwright sees these as regular DOM elements:
-
-```typescript
-const dialog = page.getByRole('dialog');
-const menu = page.getByRole('menu');
-const listbox = page.getByRole('listbox');
-```
-
-## Anti-Patterns
-
-| Anti-Pattern | Problem | Solution |
-|---|---|---|
-| `page.locator('[_ngcontent-xyz]')` | Scoped style attributes change every build | Use `getByRole`, `getByLabel`, `getByTestId` |
-| `page.locator('[ng-reflect-model]')` | Only exists in dev mode | Test rendered value: `expect(input).toHaveValue()` |
-| `page.locator('app-my-component')` | Component selectors are implementation details | Target rendered content with semantic locators |
-| `page.locator('.mat-mdc-button')` | Material classes change between versions | `page.getByRole('button', { name: '...' })` |
-| `page.evaluate(() => window.ng)` | Not available in production builds | Test through the DOM |
-| `await page.waitForTimeout(500)` | Zone.js timing varies | Use auto-retrying assertions |
-| `browser.waitForAngular()` | Does not exist in Playwright | Remove entirely |
-| `ng serve` in CI | Slower, includes debug code | Use `ng build && http-server` |
-
-## Related
-
-- [core/locators.md](../core/locators.md) — locator strategies for Angular Material
-- [core/assertions-waiting.md](../core/assertions-waiting.md) — auto-waiting assertions
-- [core/forms-validation.md](../testing-patterns/forms-validation.md) — form testing patterns
-- [architecture/test-architecture.md](../architecture/test-architecture.md) — E2E vs unit tests with TestBed