Generate E2e

Generate comprehensive browser-based E2E tests for complete user workflows using Playwright, Cypress, or Selenium.

Purpose

Create automated tests that simulate real user interactions:

• Complete user journeys (signup → login → purchase)
• Multi-page workflows
• Form interactions and validations
• Navigation flows
• Browser-specific behaviors
• Mobile responsive testing

Supported Frameworks

Playwright (Recommended)

• Multi-browser support (Chromium, Firefox, WebKit)
• Auto-wait for elements
• Network interception
• Mobile emulation
• Parallel execution

Cypress

• Time-travel debugging
• Real-time reloads
• Automatic waiting
• Network stubbing
• Screenshot/video capture

Selenium WebDriver

• Mature ecosystem
• Cross-browser support
• Remote execution (Selenium Grid)
• Mobile testing (Appium)

Test Generation

When invoked, generate E2E tests with:

1. User workflow analysis

• Identify key user journeys
• Map page interactions
• Define success criteria

1. Page Object Model

• Create page classes
• Define selectors
• Implement action methods

1. Test scenarios

• Happy path workflows
• Error handling paths
• Edge cases

1. Assertions

• URL validation
• Element presence
• Content verification
• State changes

Example: Playwright Test

import { test, expect } from '@playwright/test';

test.describe('User Registration Flow', () => {
  test('should complete full registration workflow', async ({ page }) => {
    // Navigate to signup
    await page.goto('https://example.com/signup');

    // Fill registration form
    await page.fill('[name="email"]', '[email protected]');
    await page.fill('[name="password"]', 'SecurePass123!');
    await page.fill('[name="confirmPassword"]', 'SecurePass123!');
    await page.check('[name="terms"]');

    // Submit and wait for navigation
    await page.click('button[type="submit"]');
    await page.waitForURL('**/verify-email');

    // Verify success message
…

Example: Cypress Test

describe('User Dashboard Workflow', () => {
  beforeEach(() => {
    cy.login('[email protected]', 'password123');
  });

  it('should load dashboard with user data', () => {
    cy.visit('/dashboard');
    cy.get('.welcome-message').should('contain', 'Welcome, John');
    cy.get('.user-stats').should('be.visible');
  });

  it('should create new project', () => {
    cy.visit('/dashboard');
    cy.get('[data-testid="new-project"]').click();

    cy.get('[name="projectName"]').type('My New Project');
    cy.get('[name="description"]').type('Project description here');
    cy.get('button[type="submit"]').click();
…

Page Object Model

// pages/LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.page.fill('[name="email"]', email);
    await this.page.fill('[name="password"]', password);
    await this.page.click('button[type="submit"]');
  }

  async getErrorMessage() {
    return this.page.locator('.error-message').textContent();
  }
}
…

Best Practices

• Use data-testid attributes - Stable selectors
• Implement Page Objects - Reusable page interactions
• Handle waits properly - Auto-wait or explicit waits
• Test realistic scenarios - Actual user workflows
• Parallelize tests - Faster execution
• Capture screenshots on failure - Debugging aid
• Use fixtures - Consistent test data
• Test across browsers - Chrome, Firefox, Safari