E2E tests simulate real user scenarios across the full application stack. Cypress excels in developer experience with time-travel debugging and automatic waiting. Playwright offers cross-browser support, better parallelization, and handles multiple contexts.
E2E Testing:
Cypress:
Playwright:
When to Use:
// cypress/e2e/auth.cy.js
describe('Authentication', () => {
beforeEach(() => {
cy.visit('/login');
});
it('logs in successfully with valid credentials', () => {
cy.get('[data-cy=email]').type('user@example.com');
cy.get('[data-cy=password]').type('password123');
cy.get('[data-cy=submit]').click();
// Cypress auto-waits for elements
cy.url().should('include', '/dashboard');
cy.get('[data-cy=welcome]').should('contain', 'Welcome');
});
it('shows error for invalid credentials', () => {
cy.get('[data-cy=email]').type('wrong@example.com');
cy.get('[data-cy=password]').type('wrongpassword');
cy.get('[data-cy=submit]').click();
cy.get('[data-cy=error]').should('be.visible')
.and('contain', 'Invalid credentials');
});
it('intercepts API calls', () => {
cy.intercept('POST', '/api/login', {
statusCode: 200,
body: { token: 'fake-token', user: { name: 'Test User' } }
}).as('loginRequest');
cy.get('[data-cy=email]').type('user@example.com');
cy.get('[data-cy=password]').type('password');
cy.get('[data-cy=submit]').click();
cy.wait('@loginRequest');
cy.url().should('include', '/dashboard');
});
});