generate-playwright-tests

Overview

This skill creates a Playwright test file (.spec.ts or .spec.js) based on:

1. Target URL – the page to be tested.
2. Short specification – a bullet‑point description of the interactions and assertions you need.

The output is ready to run with Playwright’s test runner.

Input Format

• url – full URL of the page (e.g., https://example.com/login).
• spec – plain‑text list of steps, each on its own line.
  Use the following verbs to indicate actions:
  • click <selector>
  • fill <selector> with "<value>"
  • type <selector> with "<value>"
  • check <selector>
  • uncheck <selector>
  • select <selector> option "<option>"
  • assert <selector> contains "<text>"
  • assert <selector> is visible
  • assert <selector> has attribute "<attr>" with value "<value>"

Example Input

url: https://example.com/login
spec:
- fill input[name="email"] with "user@example.com"
- fill input[name="password"] with "Secret123"
- click button[type="submit"]
- assert h1 contains "Welcome"
- assert .profile-pic is visible

Generation Steps

1. Parse the input
   Extract url and split each spec line into an action and its parameters.

2. Create test skeleton

   import { test, expect } from '@playwright/test';
   
   test('generated test for <page description>', async ({ page }) => {
     await page.goto('<url>');
   });
   

3. Map spec verbs to Playwright commands

Verb	Playwright Code
click <selector>	await page.click('<selector>');
fill <selector> with "<value>"	await page.fill('<selector>', '<value>');
type <selector> with "<value>"	await page.type('<selector>', '<value>');
check <selector>	await page.check('<selector>');
uncheck <selector>	await page.uncheck('<selector>');
select <selector> option "<option>"	await page.selectOption('<selector>', '<option>');
assert <selector> contains "<text>"	await expect(page.locator('<selector>')).toContainText('<text>');
assert <selector> is visible	await expect(page.locator('<selector>')).toBeVisible();
assert <selector> has attribute "<attr>" with value "<value>"	await expect(page.locator('<selector>')).toHaveAttribute('<attr>', '<value>');

4. Insert each command into the test body in the order given.

5. Add a final optional teardown (e.g., await page.close();) if desired.

Example Output

Given the example input above, the generated file (login.spec.ts) would be:

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

test('login flow', async ({ page }) => {
  // Navigate to the target page
  await page.goto('https://example.com/login');

  // Fill in credentials
  await page.fill('input[name="email"]', 'user@example.com');
  await page.fill('input[name="password"]', 'Secret123');

  // Submit the form
  await page.click('button[type="submit"]');

  // Verify successful login
  await expect(page.locator('h1')).toContainText('Welcome');
  await expect(page.locator('.profile-pic')).toBeVisible();
});

Usage Instructions

1. Provide the URL and spec in the format described.
2. Run the skill – it will return the complete test file content.
3. Save the output to a file ending with .spec.ts (or .spec.js if you prefer JavaScript).
4. Install Playwright (if not already):

   npm i -D @playwright/test
   npx playwright install
   

5. Execute the test:

   npx playwright test login.spec.ts
   

Tips for Effective Specs

• Use unique selectors (data‑testids, IDs, or stable class names) to avoid flaky tests.
• Quote values exactly as they appear on the page.
• Combine actions when possible; e.g., fill can replace a separate click on a text box if the selector targets the input directly.
• Add comments in the spec (prefixed with #) for extra context; they will be ignored in generation.

With this skill, you can quickly turn a concise description of user interactions into a fully functional Playwright test suite.