testing-automation-web

<skill_overview> Convert manual test scenarios into stable, reliable automated tests using modern frameworks User requests to automate a manual test case Transitioning from manual exploration to regression suite Writing E2E tests for verified features </skill_overview>

<framework_selection> <when_to_use>Modern web apps, cross-browser, speed, stability</when_to_use> <key_features>Auto-waiting, tracing, reliable locators</key_features> <when_to_use>Component testing, developer-friendly experience</when_to_use> <key_features>Time travel, real-time reloading, easy debugging</key_features> </framework_selection>

<automation_principles> Use user-facing attributes over implementation details getByRole(‘button’, { name: ‘Submit’ }) getByTestId(‘submit-order’) css(‘.btn-primary’) xpath(‘//div[3]/button’)

<workflow_manual_to_auto> 1. Verify the scenario manually first to ensure feature works 2. Identify stable locators for all interactive elements 3. Map manual steps to framework commands 4. Replace manual data entry with fixtures or factories 5. Add assertions for key states (not just “no error”) </workflow_manual_to_auto>

<code_structure_playwright>

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

test.describe('Feature: [Name]', () => {
  test.beforeEach(async ({ page }) => {
    // Setup state
    await page.goto('/[url]');
  });

  test('should [expected behavior]', async ({ page }) => {
    // Arrange
    const user = { name: 'Test User' };
    
    // Act
    await page.getByLabel('Name').fill(user.name);
    await page.getByRole('button', { name: 'Save' }).click();

    // Assert
    await expect(page.getByText('Saved successfully')).toBeVisible();
  });
});