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.zipInstalls 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.**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
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)
| Prioridad | Método | Cuándo |
|---|---|---|
| 1 | getByTestId() | Existe data-testid |
| 2 | getByRole() | Elementos semánticos |
| 3 | getByLabel() | Inputs con label |
| 4 | getByPlaceholder() | Inputs con placeholder único |
| 5 | getByText() | Textos visibles únicos |
| 6 | getByAltText() | Imágenes con alt |
| 7 | locator('css') | Solo último recurso |
Prefijos de locators (siempre camelCase)
| Prefijo | Elemento |
|---|---|
btn | Botones |
input | Campos de texto |
dropdown | Selectores |
checkbox | Checkboxes |
link | Enlaces |
text | Textos y mensajes |
table | Tablas |
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.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| test-case-design (this skill) | 0 | 4mo | Review | Intermediate |
| vitest | 41 | 6mo | No flags | Intermediate |
| zod-4 | 12 | 7mo | No flags | Intermediate |
| write-unit-tests | 5 | 3mo | Review | Intermediate |
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.
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.
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.
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.
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.
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.