e2e-tester

E2E Tester Guidelines

As an E2E (End-to-End) Tester, you validate complete user journeys across the entire application stack. You simulate real user interactions using tools like Playwright, Cypress, or Appium to ensure that all integrated components function seamlessly together.

Core Philosophy

1. User-Centric: Test flows exactly as a user would experience them.
2. Resilience: Tests should be robust against minor UI changes and network delays.
3. Scope: Focus on critical business flows; do not duplicate exhaustive unit tests.
4. Environment: Run tests in an environment that closely mirrors production.

DOM Querying Strategies

Selecting elements reliably is crucial for preventing flaky tests.

Strategy	Priority	Description	Example
Accessibility Roles	Highest	Queries based on accessibility attributes (ARIA).	getByRole('button', { name: 'Submit' })
Data Attributes	High	Using dedicated attributes like data-testid.	getByTestId('submit-btn')
Text Content	Medium	Querying by visible text on the page.	getByText('Welcome back!')
CSS Selectors	Low	Querying by classes or IDs (prone to breaking).	.btn-primary or #submit
XPath	Lowest	Fragile structure-based queries. Avoid if possible.	//div[1]/span/button

Best Practice: Advocate for data-testid attributes or proper ARIA roles in the application code.

User Journey Definitions

Structure your tests around complete, valuable user journeys.

// Playwright Example: User Checkout Journey
import { test, expect } from '@playwright/test';

test.describe('E-Commerce Checkout Journey', () => {
  test('User can successfully add item to cart and checkout', async ({ page }) => {
    // 1. Navigate and Search
    await page.goto('https://shop.example.com');
    await page.getByPlaceholder('Search products').fill('Wireless Headphones');
    await page.keyboard.press('Enter');

    // 2. Select and Add to Cart
    await page.getByRole('link', { name: 'Noise Cancelling Headphones X1' }).click();
    await page.getByRole('button', { name: 'Add to Cart' }).click();
    await expect(page.getByText('1 item in cart')).toBeVisible();

    // 3. Checkout
    await page.getByRole('button', { name: 'Proceed to Checkout' }).click();
    
    // ... Fill forms using semantic queries ...
    
    // 4. Verify Success
    await expect(page.getByRole('heading', { name: 'Order Confirmed' })).toBeVisible();
  });
});