TE

test-case-design

Generates structured Playwright test suites using Page Object models and strict selector prioritization for reliable automation.

Install

mkdir -p .claude/skills/test-case-design && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15355" && unzip -o skill.zip -d .claude/skills/test-case-design && rm skill.zip

Installs to .claude/skills/test-case-design

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Diseñar casos de prueba y generar código Playwright nativo en TypeScript. Sin BDD. Sin Gherkin. Sin Cucumber. **Playwright Test puro con Page Objects.**
152 chars · catalog descriptionno explicit “when” trigger
Intermediate

Key capabilities

  • Design test cases for Playwright
  • Generate native Playwright TypeScript code
  • Create Page Object models
  • Prioritize selectors based on strict rules
  • Enforce file structure for locators, pages, and tests
  • Generate spec files with describe blocks and tests

How it works

This skill designs test cases and generates Playwright TypeScript code following strict conventions for selectors, file structure, and Page Object patterns.

Inputs & outputs

You give it
a module or feature to be tested
You get back
Playwright TypeScript test files including locators, page objects, and spec files

When to use test-case-design

  • Designing automated tests
  • Writing playwright specs
  • Generating page objects

About this skill

SKILL: test-case-design

Para uso exclusivo de Blu — QA Agent de Yeyu Windecker


🎯 Responsabilidad única

Diseñar casos de prueba y generar código Playwright nativo en TypeScript. Sin BDD. Sin Gherkin. Sin Cucumber. Playwright Test puro con Page Objects.


📥 Cómo se invoca

diseñar-tests [módulo]                    # solo diseña casos, sin código
diseñar-tests [módulo] --base [KEY]       # usa doc base de Jira

automatizar [módulo]                      # genera .spec.ts + Page Objects
automatizar [módulo] --base [KEY]         # usa doc base de Jira

📌 LINEAMIENTOS OBLIGATORIOS

Todo el código generado debe respetar estas convenciones sin excepción.

Prioridad de selectores (orden estricto)

PrioridadMétodoCuándo
1getByTestId()Existe data-testid
2getByRole()Elementos semánticos
3getByLabel()Inputs con label
4getByPlaceholder()Inputs con placeholder único
5getByText()Textos visibles únicos
6getByAltText()Imágenes con alt
7locator('css')Solo último recurso

Prefijos de locators (siempre camelCase)

PrefijoElemento
btnBotones
inputCampos de texto
dropdownSelectores
checkboxCheckboxes
linkEnlaces
textTextos y mensajes
tableTablas

Estructura de archivos

src/playwright/
├── locators/   → [módulo].locator.ts
├── pages/      → [módulo].page.ts
└── tests/      → [módulo].spec.ts

Naming

login.locator.ts
login.page.ts
login.spec.ts

Anti-patrones prohibidos

❌ page.waitForTimeout()       → usar expect().toBeVisible()
❌ Locators directos en .spec  → siempre via Page Object
❌ URLs hardcodeadas            → process.env.BASEURL
❌ CSS/XPath si existe semántico
❌ Datos sensibles en el código
❌ Expects sin mensaje descriptivo

🧪 Modo: diseñar-tests

Solo diseña los casos. No genera código.

Output — tabla de casos

## Casos de prueba: [módulo]

| # | Caso | Tipo | Prioridad | Datos |
|---|------|------|-----------|-------|
| 1 | [descripción] | Happy Path | 🔥 Smoke | [datos] |
| 2 | [descripción] | Unhappy Path | ✅ Regression | [datos] |
| 3 | [descripción] | Edge Case | ✅ Regression | [datos] |

⚙️ Modo: automatizar

Genera los 3 archivos del módulo:

1. [módulo].locator.ts

import { Page } from '@playwright/test';

export class [Módulo]Locator {
    readonly page: Page;

    constructor(page: Page) {
        this.page = page;
    }

    get input[Campo]() {
        return this.page.getByLabel('[label]');
    }

    get btn[Acción]() {
        return this.page.getByRole('button', { name: '[nombre]' });
    }

    get text[Mensaje]() {
        return this.page.getByTestId('[test-id]');
    }
}

2. [módulo].page.ts

import { expect, Page } from '@playwright/test';
import { [Módulo]Locator } from '../locators/[módulo].locator';

export class [Módulo]Page {
    readonly page: Page;
    readonly locator: [Módulo]Locator;

    constructor(page: Page) {
        this.page = page;
        this.locator = new [Módulo]Locator(page);
    }

    async navigateTo() {
        await this.page.goto(`${process.env.BASEURL}/[ruta]`);
    }

    async [acción]([params]: [tipos]) {
        await this.locator.[elemento].[acción]([params]);
    }

    async verify[Resultado]() {
        await expect(
            this.locator.[elemento],
            '[mensaje descriptivo del assert]'
        ).[matcher]();
    }
}

3. [módulo].spec.ts

import { test, expect } from '@playwright/test';
import { [Módulo]Page } from '../pages/[módulo].page';

test.describe('[Módulo] — [descripción]', () => {

    let [módulo]Page: [Módulo]Page;

    test.beforeEach(async ({ page }) => {
        [módulo]Page = new [Módulo]Page(page);
        await [módulo]Page.navigateTo();
    });

    // ─── SMOKE ───────────────────────────────────────────────
    test('[caso happy path]', async () => {
        await [módulo]Page.[acción]([datos]);
        await [módulo]Page.verify[Resultado]();
    });

    // ─── REGRESSION ──────────────────────────────────────────
    test('[caso unhappy path]', async () => {
        await [módulo]Page.[acción]([datos inválidos]);
        await [módulo]Page.verify[Error]();
    });

    // ─── EDGE CASES ───────────────────────────────────────────
    test('[caso edge]', async () => {
        await [módulo]Page.[acción]([datos límite]);
        await [módulo]Page.verify[Resultado]();
    });
});

💬 Mensaje final al usuario

✅ Código generado para: [módulo]

Archivos creados:
📄 src/playwright/locators/[módulo].locator.ts
📄 src/playwright/pages/[módulo].page.ts
📄 src/playwright/tests/[módulo].spec.ts

Para ejecutar:
npx playwright test [módulo].spec.ts
npx playwright test --grep "smoke"
npx playwright test --grep "regression"

When not to use it

  • When using BDD, Gherkin, or Cucumber frameworks
  • When direct locators are preferred in spec files
  • When hardcoding URLs or sensitive data

Limitations

  • The skill generates Playwright Test puro con Page Objects
  • The skill prohibits direct locators in .spec files
  • The skill prohibits page.waitForTimeout()

How it compares

This skill enforces a specific, opinionated Playwright testing methodology with strict selector priority and Page Object patterns, unlike general test automation approaches.

Compared to similar skills

test-case-design side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
test-case-design (this skill)04moReviewIntermediate
vitest416moNo flagsIntermediate
zod-4127moNo flagsIntermediate
write-unit-tests53moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

vitest

antfu

Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.

41183

zod-4

prowler-cloud

Zod 4 schema validation patterns. Trigger: When creating or updating Zod v4 schemas for validation/parsing (forms, request payloads, adapters), including v3 -> v4 migration patterns.

1260

write-unit-tests

tldraw

Writing unit and integration tests for the tldraw SDK. Use when creating new tests, adding test coverage, or fixing failing tests in packages/editor or packages/tldraw. Covers Vitest patterns, TestEditor usage, and test file organization.

545

develop-ai-functions-example

vercel

Develop examples for AI SDK functions. Use when creating, running, or modifying examples under examples/ai-functions/src to validate provider support, demonstrate features, or create test fixtures.

536

javascript-testing-patterns

wshobson

Implement comprehensive testing strategies using Jest, Vitest, and Testing Library for unit tests, integration tests, and end-to-end testing with mocking, fixtures, and test-driven development. Use when writing JavaScript/TypeScript tests, setting up test infrastructure, or implementing TDD/BDD workflows.

323

ts-library

onmax

Use when authoring TypeScript libraries - covers project setup, package exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and release workflows. Patterns extracted from 20+ high-quality ecosystem libraries.

323

Search skills

Search the agent skills registry