mediar-ai/packages/skills/skills/e2e-test-recorder

E2E Test Recorder

Record user interactions and generate Playwright/Cypress test scripts automatically.

Prerequisites

• Chrome browser installed
• Target web application accessible
• Desired test framework specified (Playwright or Cypress)

Instructions

1. Open Chrome and navigate to the starting URL provided by user

2. Begin recording mode:

   • Note the initial URL and page state
   • Prepare to capture all user interactions

3. Guide user through the test scenario:

   • Ask user to describe what they want to test
   • Confirm the expected flow (e.g., "login -> dashboard -> create item")

4. For each user interaction, capture:

   a. Click events:

   • Element selector (prefer data-testid, then role, then CSS)
   • Element text content for verification
   • Position on page

   b. Type events:

   • Target input field selector
   • Text being entered (mask passwords)
   • Any special keys (Enter, Tab)

   c. Navigation events:

   • New URLs visited
   • Page load confirmations

   d. Assertions to add:

   • Visible text confirmations
   • Element presence checks
   • URL validations

5. After user completes the flow, generate test code:

   For Playwright:

   test('descriptive test name', async ({ page }) => {
     await page.goto('starting-url');
     await page.click('[data-testid="button"]');
     await expect(page.locator('text=Success')).toBeVisible();
   });
   

   For Cypress:

   describe('Test Suite', () => {
     it('descriptive test name', () => {
       cy.visit('starting-url');
       cy.get('[data-testid="button"]').click();
       cy.contains('Success').should('be.visible');
     });
   });
   

6. Output the generated test file and provide instructions for running it

Error Handling

• If element has no good selector, suggest adding data-testid
• If page has dynamic content, add appropriate waits
• If authentication is needed, generate login helper

Notes

• Generated tests use best practices for selectors
• Includes automatic wait handling for async operations
• Add custom assertions by describing what to verify