affaan-m--everything-claude-code/skills/angular-developer/references/e2e-testing.md

End-to-End (E2E) Testing

Use E2E tests to cover critical user journeys in a real browser. Prefer the framework already configured in the Angular workspace, such as Cypress or Playwright.

Running E2E Tests

Check package.json and angular.json for the project-specific command. Common patterns include:

npm run e2e
pnpm e2e
ng e2e

When the app must be built or served first, use the existing project scripts instead of inventing a parallel test entrypoint.

Test Structure

• Keep E2E specs close to the configured test framework, such as cypress/e2e/ or e2e/.
• Put reusable login/setup helpers in the framework support directory.
• Keep fixtures explicit and small enough that each test can explain the user state it depends on.

Cypress Example

describe('Login flow', () => {
  it('redirects to dashboard on valid credentials', () => {
    cy.visit('/login');
    cy.get('[data-cy=email]').type('user@example.com');
    cy.get('[data-cy=password]').type('password123');
    cy.get('[data-cy=submit]').click();
    cy.url().should('include', '/dashboard');
  });
});

Playwright Example

import {expect, test} from '@playwright/test';

test('redirects to dashboard on valid credentials', async ({page}) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('user@example.com');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', {name: 'Sign in'}).click();
  await expect(page).toHaveURL(/dashboard/);
});

Best Practices

• Prefer accessible locators (getByRole, getByLabel) or stable data-* attributes.
• Avoid selectors that depend on CSS classes, DOM depth, or incidental text.
• Wait for specific UI states, routes, or network responses instead of arbitrary sleeps.
• Keep smoke tests short and reserve full workflow coverage for the highest-value paths.