# E2e Test Recorder

> E2E Test Recorder

- Skill: `mediar-ai/e2e-test-recorder` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add mediar-ai/e2e-test-recorder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mediar-ai/e2e-test-recorder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: mediar-ai (https://skillmd.com/u/mediar-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mediar-ai/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:
   ```typescript
   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:
   ```javascript
   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