Angular E2E Testing with Cypress: Replacing Protractor
Angular E2E Testing with Cypress: Replacing Protractor
Protractor is deprecated. Cypress is now the go-to E2E testing tool for Angular apps.
Why Cypress over Protractor:
- Faster and more reliable tests
- Better debugging with time-travel and screenshots
- Real-time reloading during test development
- No need for Selenium WebDriver
- Rich ecosystem of plugins
Setup:
npx cypress install
npm install cypress @cypress/schematic --save-dev
Writing tests:
describe('Login Page', () => {
it('should login successfully', () => {
cy.visit('/login');
cy.get('[data-testid=email]').type('user@test.com');
cy.get('[data-testid=password]').type('password123');
cy.get('[data-testid=submit]').click();
cy.url().should('include', '/dashboard');
});
});
Best practices:
- Use data-testid attributes for selectors
- Avoid using CSS classes or IDs that may change
- Mock API calls with cy.intercept()
- Use fixtures for test data
- Run in CI/CD pipeline with headless mode
Have you migrated from Protractor to Cypress? How was the experience?
Cypress has been a massive upgrade over Protractor for Angular E2E testing. The time-travel debugging and real-time reloading make writing tests so much faster. Using data-testid attributes and cy.intercept() for API mocking are essential best practices. Running in headless mode in CI/CD pipelines is seamless.