<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();

}); });