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 install to setup browsers; npx playwright test --trace on for tracing; API: page.locator('selector').click() for interactions.

• Cypress CLI: npx cypress open for interactive mode; npx cypress run --config video=true to enable videos; API: cy.get('selector').should('be.visible') for assertions.

• Selenium setup: Use webdriverio or similar; Command: node selenium-test.js with script like driver.get('https://example.com') ; Config: JSON file for WebDriver options, e.g., { "browserName": "chrome" } .

• Visual regression: Playwright's npx playwright show-trace trace.zip to view traces; Cypress via plugins like cypress-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.