Quick Start

JavaScript
// Basic E2E test structure
await playwright.goto('https://app.example.com/login');
await playwright.fill('[data-testid="email"]', process.env.TEST_EMAIL);
await playwright.fill('[data-testid="password"]', process.env.TEST_PASSWORD);
await playwright.click('[data-testid="login-button"]');
await playwright.waitForURL('**/dashboard');

Workflow

1. Setup Environment

   • Load test credentials from .env file
   • Initialize Playwright browser context
   • Set viewport and user agent if needed

2. Navigate to Application

   • Go to starting URL
   • Wait for page load completion
   • Verify initial page state

3. Execute Test Flow

   • Fill forms using test data
   • Click buttons and links in sequence
   • Wait for navigation/state changes
   • Assert expected elements appear

4. Capture Results

   • Take screenshot on assertion failures
   • Log test step outcomes
   • Generate pass/fail report

Progress Checklist:

• Environment loaded (.env credentials)
• Browser launched and page navigated
• Login flow completed
• Core user journey executed
• Assertions validated
• Screenshots captured (if failed)
• Results reported

Examples

Example 1: Login Flow Test Input: Test login with valid credentials

JavaScript
await playwright.goto(process.env.APP_URL);
await playwright.fill('#email', process.env.TEST_EMAIL);
await playwright.fill('#password', process.env.TEST_PASSWORD);
await playwright.click('[type="submit"]');
await playwright.waitForSelector('[data-testid="user-menu"]');

Output: PASS - User successfully logged in, dashboard visible

Example 2: Purchase Flow Test Input: Complete checkout process

JavaScript
await playwright.click('[data-testid="add-to-cart"]');
await playwright.click('[data-testid="checkout"]');
await playwright.fill('#card-number', process.env.TEST_CARD);
await playwright.click('[data-testid="place-order"]');
await playwright.waitForText('Order confirmed');

Output: PASS - Order placed successfully, confirmation page reached

Example 3: Failed Test with Screenshot Input: Submit form with invalid data

JavaScript
await playwright.fill('#email', 'invalid-email');
await playwright.click('[type="submit"]');
await playwright.waitForSelector('.error-message');
// Test fails here due to unexpected error

Output: FAIL - Screenshot saved to ./test-results/error-1234.png

Best Practices

• Use data-testid attributes for reliable element selection
• Store all test credentials in .env (TEST_EMAIL, TEST_PASSWORD, etc.)
• Wait for specific elements rather than arbitrary timeouts
• Take screenshots immediately after failed assertions
• Use descriptive test names and clear assertion messages
• Set reasonable timeouts for slow operations (30s for navigation)
• Clear browser state between test runs
• Use headless mode for CI/CD environments

Common Pitfalls

• Don't use CSS selectors that change frequently (classes, IDs)
• Don't hardcode credentials in test files
• Don't forget to wait for async operations to complete
• Don't take screenshots before the failure occurs
• Don't run tests against production data
• Don't assume immediate page state changes after clicks
• Don't skip cleanup steps that affect subsequent tests