End to End Testing with Cypress & Playwright
5 questions found
What is end to end testing and how is it different from the unit tests Angular sets up by default?
Beginner
End to end testing runs your actual app in a real browser and simulates a real user's actions, like clicking buttons and filling out forms, checking that entire flows work correctly from start to finish. Unit tests, which Angular sets up by default using Jasmine and Karma, instead check small, isolated pieces of code in complete isolation.
// A simplified Cypress end to end test
cy.visit('/login');
cy.get('input[name=email]').type('user@example.com');
cy.get('button[type=submit]').click();
cy.url().should('include', '/dashboard');
Real-world example
A team writes an end to end test simulating a customer logging in and reaching their dashboard, catching a real bug where a recent change accidentally broke the redirect after a successful login, something a smaller unit test would not have caught.
Common follow-ups: Why do end to end tests usually run slower than unit tests?;How many end to end tests should a typical project have compared to unit tests?
Testing with Jasmine & Karma;Routing
How would you set up Cypress in an Angular project to write your first end to end test?
Intermediate
You install Cypress as a development dependency, run its setup command to generate a starter configuration, then write test files describing the user flows you want to verify, such as visiting a page and checking that specific content appears correctly.
npm install cypress --save-dev
npx cypress open
// cypress/e2e/home.cy.ts
describe('Home Page', () => {
it('displays the welcome message', () => {
cy.visit('/');
cy.contains('Welcome').should('be.visible');
});
});
Real-world example
A team adds their first Cypress test to confirm their homepage loads correctly and displays the expected welcome message, catching any future regression where that critical first impression might break.
Common follow-ups: What is the difference between running Cypress tests interactively versus running them headlessly in a CI pipeline?;How do you handle waiting for an asynchronous action, like an API call, to finish during a Cypress test?
Testing with Jasmine & Karma;HTTP Client & Interceptors
What is Playwright and how does it compare to Cypress for testing an Angular app?
Intermediate
Playwright is another popular end to end testing tool, notable for supporting multiple browsers, including Chrome, Firefox, and Safari, from a single test suite, and for generally running tests faster in parallel. Cypress has traditionally had a friendlier visual test runner for debugging, though both tools are strong choices with active development.
// A simplified Playwright test
import { test, expect } from '@playwright/test';
test('shows welcome message', async ({ page }) => {
await page.goto('/');
await expect(page.getByText('Welcome')).toBeVisible();
});
Real-world example
A team choosing between the two testing tools picks Playwright specifically because they need to verify their app works correctly across Chrome, Firefox, and Safari, all from the same test suite without extra setup.
Common follow-ups: What specific advantages does testing across multiple browser engines actually provide?;How does the developer experience differ when debugging a failing test in each tool?
Testing with Jasmine & Karma;Cross Browser Testing
How would you mock a backend API response during an end to end test to avoid depending on a real server?
Advanced
Both Cypress and Playwright let you intercept outgoing network requests and respond with fake data instead of letting the request actually reach a real server, making tests faster, more reliable, and independent of any backend actually being available or in a specific state.
// Cypress intercepting a network request
cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts');
cy.visit('/products');
cy.wait('@getProducts');
cy.contains('Product Name').should('be.visible');
Real-world example
A team's end to end test suite mocks every backend API call using fixture files containing realistic sample data, letting their tests run reliably and quickly in a CI pipeline without needing a real backend server running at all.
Common follow-ups: What is the risk of relying entirely on mocked responses instead of occasionally testing against a real backend?;How do you keep fixture files in sync with the real API's actual response shape over time?
HTTP Client & Interceptors;Testing with Jasmine & Karma
Why should a team combine end to end tests with unit tests rather than relying on just one type?
Beginner
Unit tests are fast and pinpoint exactly which small piece of code broke, but cannot catch problems that only appear when pieces are combined together, like a broken navigation flow. End to end tests catch these bigger, real world problems but run slower and are less precise about exactly what broke. Using both together gives a team confidence at every level.
// Unit test, fast, checks one small piece in isolation
it('formats price correctly', () => {
expect(formatPrice(9.5)).toBe('$9.50');
});
// End to end test, slower, checks the whole real user flow
cy.visit('/checkout');
cy.contains('$9.50').should('be.visible');
Real-world example
A team relies on a large number of fast unit tests for detailed logic checks, combined with a smaller number of end to end tests covering their most critical user flows, like checkout and login, catching different kinds of problems at each level.
Common follow-ups: What is a reasonable ratio of unit tests to end to end tests for a typical project?;Which type of test should a team prioritize writing first when starting a new project?
Testing with Jasmine & Karma;Angular Style Guide & Best Practices