testing-e2e
Purpose
This skill enables end-to-end (E2E) testing using tools like Playwright, Cypress, and Selenium for browser automation, visual regression testing, and integration with CI/CD pipelines. It focuses on reliable test automation for web applications.
When to Use
Use this skill for full-stack testing of web apps, such as verifying user flows, UI interactions, or visual changes. Apply it in scenarios like regression testing before deployments, cross-browser compatibility checks, or when debugging UI issues in production-like environments.
Key Capabilities
- Automate browser interactions with Playwright: Supports headless mode, tracing, and visual comparisons via
expect.toHaveScreenshot(). - Run Cypress tests: Includes real-time reloading, automatic waiting, and custom commands for assertions.
- Implement Selenium for legacy setups: Use WebDriver to control browsers and handle dynamic content.
- Page Object Model (POM): Structure tests with reusable page classes, e.g., define locators in a separate file.
- Visual regression: Capture and compare screenshots using Playwright's trace viewer or Cypress plugins.
- CI integration: Generate reports and artifacts for tools like GitHub Actions or Jenkins.
Usage Patterns
To set up E2E tests, initialize a project with the chosen tool and write tests in a dedicated directory. Always use environment variables for sensitive data, like $PLAYWRIGHT_BROWSER for browser selection.
Example 1: Playwright test for login flow
- Create a test file:
tests/login.spec.js - Code snippet:
const {test} = require('@playwright/test'); test('login success', async ({page}) => {await page.goto('https://app.example.com'); await page.fill('#username', 'user'); await page.click('#login');}); - Run with:
npx playwright test --headed --project=chromium
Example 2: Cypress test for form submission
- Add to
cypress/integration/form.spec.js - Code snippet:
describe('Form Submission', () => {it('submits correctly', () => {cy.visit('/form'); cy.get('#name').type('Test User'); cy.get('button[type=submit]').click(); cy.url().should('include', '/success');});}); - Execute via:
npx cypress run --browser chrome --spec cypress/integration/form.spec.js
For Selenium, use WebDriver with POM: Define a page class and call methods in tests.
Common Commands/API
- Playwright CLI:
npx playwright installto setup browsers;npx playwright test --trace onfor tracing; API:page.locator('selector').click()for interactions. - Cypress CLI:
npx cypress openfor interactive mode;npx cypress run --config video=trueto enable videos; API:cy.get('selector').should('be.visible')for assertions. - Selenium setup: Use
webdriverioor similar; Command:node selenium-test.jswith script likedriver.get('https://example.com'); Config: JSON file for WebDriver options, e.g.,{"browserName": "chrome"}. - Visual regression: Playwright's
npx playwright show-trace trace.zipto view traces; Cypress via plugins likecypress-image-snapshot.
Integration Notes
Integrate this skill into your workflow by adding it to package.json scripts, e.g., "test:e2e": "npx playwright test". For CI, use GitHub Actions with a step: run: npx cypress run --reporter junit. If API keys are needed (e.g., for cloud services), set env vars like $SELENIUM_GRID_URL or $CYPRESS_API_KEY. Ensure browsers are installed via tools like playwright install --with-deps. For multi-tool setups, use a config file like playwright.config.ts with exports for projects.
Error Handling
When tests fail, check logs first: Use Playwright's --trace flag to generate traces and debug with the trace viewer. For Cypress, enable --config video=true to capture videos. Handle common errors by adding retries, e.g., in Playwright: test('retry', {retries: 2}, async () => {...}). For Selenium, wrap code in try-catch blocks:
try {
await driver.findElement(By.id('element')).click();
} catch (error) {
console.error('Element not found:', error);
}Assert conditions explicitly to avoid flaky tests, and use env vars for dynamic configs to prevent setup errors.
Graph Relationships
- Cluster: Connected to "testing" cluster for related skills like unit testing or integration testing.
- Tags: Links to skills with tags "e2e", "playwright", "cypress", and "testing".
- Dependencies: Relates to CI/CD skills for pipeline integration and browser automation tools for execution environments.