Дом
generate
alirezarezvani/claude-skills
Создать тесты Playwright. Использовать, когда пользователь говорит «написать тесты», «создать тесты», «добавить тесты для», «протестировать этот компонент», «e2e-тест», «создать тест для», «протестировать эту страницу» или «протестировать эту функцию».
...Расширить всеО компании «generate»
Этот навык «generate» создает готовые к использованию в производственной среде сквозные тесты Playwright на основе пользовательской истории, URL-адреса, пути к компоненту или описания функции. Он решает проблему ручного написания надёжных тестов для браузеров, соответствующих соглашениям: перед генерацией он анализирует существующий проект, чтобы определить каталог тестов, базовый URL, фикстуры и соглашения для page-objects, благодаря чему результат соответствует именно целевому коду, а не общему шаблону.
Этот рабочий процесс анализирует, что именно нужно тестировать, использует субагент Explore для чтения конфигурации Playwright и существующих тестов, выбирает подходящий шаблон (аутентификация, CRUD, оформление заказа, поиск, формы, панель управления, настройки, введение, API, доступность) и адаптирует его с использованием реальных селекторов и данных. Generate Тесты d следуют строгим правилам качества: порядок приоритета локаторов, отдающий предпочтение getByRole, getByLabel и другим семантическим локаторам перед простым CSS; утверждения с автоматической повторной попыткой, ориентированные на веб; а также явный запрет на антипаттерны, такие как waitForTimeout, селекторы page.$ и ненужное использование page.evaluate. Он соответствует проектным конвенциям в отношении использования TypeScript вместо JavaScript, объектов страниц и фикстур, а также может generate поддерживать объекты страниц, фикстуры и файлы тестовых данных, когда это необходимо. Наконец, он запускает тест generate d с помощью CLI Playwright и повторяет попытки при сбоях.
Он предназначен для веб-разработчиков и инженеров по контролю качества, которые используют Playwright и хотят обеспечить последовательное и удобное для сопровождения покрытие e2e generate d в стиле своего собственного проекта. Среди вариантов использования — тестирование процессов входа в систему и оформления заказа, валидации форм, интерфейсов поиска и фильтрации, а также поведения компонентов. Набор поставляется с файлом SKILL.md и библиотекой patterns.md, содержащей конкретные примеры тестов для процессов аутентификации, CRUD и валидации.
Часто задаваемые вопросы
Какие входные данные он принимает?
Пользовательская история, путь к файлу компонента, страница или URL-адрес, либо название функции — например, «пользователь может войти в систему с помощью электронной почты и пароля» или «src/components/UserProfile.tsx».
Какой стиль локаторов и утверждений он использует?
Предпочтение отдаётся семантическим локаторам (getByRole, getByLabel, getByText, getByPlaceholder, getByTestId в указанном порядке), и всегда используются утверждения с автоматической повторной попыткой, ориентированные на веб-приложения, вместо ручного извлечения текста.
Каких антипаттернов он избегает?
Он никогда не использует page.waitForTimeout(), селекторы page.$/page.$$, голые CSS-селекторы (если это не является неизбежным) или page.evaluate() для тех задач, которые могут выполнять локаторы.
Проверяет ли он тесты, которые пишет?
Да — он запускает тест generate d с помощью команды 'npx playwright test
Будет ли он соответствовать конвенциям моего проекта?
Он анализирует файл playwright.config.ts и существующие тесты, чтобы учесть различия между TypeScript и JavaScript, а также существующие объекты страниц, пользовательские фикстуры и каталоги с тестовыми данными.
Все файлы
2 файла SKILL.md 4,4 КБ Viewpatterns.md 5,7 КБ ViewGenerate production-ready Playwright tests from a user story, URL, component name, or feature description.
Input
$ARGUMENTS contains what to test. Examples:
"user can log in with email and password""the checkout flow""src/components/UserProfile.tsx""the search page with filters"
Steps
1. Understand the Target
Parse $ARGUMENTS to determine:
- User story: Extract the behavior to verify
- Component path: Read the component source code
- Page/URL: Identify the route and its elements
- Feature name: Map to relevant app areas
2. Explore the Codebase
Use the Explore subagent to gather context:
- Read
playwright.config.tsfortestDir,baseURL,projects - Check existing tests in
testDirfor patterns, fixtures, and conventions - If a component path is given, read the component to understand its props, states, and interactions
- Check for existing page objects in
pages/ - Check for existing fixtures in
fixtures/ - Check for auth setup (
auth.setup.tsorstorageStateconfig)
3. Select Templates
Check templates/ in this plugin for matching patterns:
| If testing... | Load template from |
|---|---|
| Login/auth flow | ../pw/templates/auth/login.md |
| CRUD operations | templates/crud/ |
| Checkout/payment | templates/checkout/ |
| Search/filter UI | templates/search/ |
| Form submission | templates/forms/ |
| Dashboard/data | templates/dashboard/ |
| Settings page | templates/settings/ |
| Onboarding flow | templates/onboarding/ |
| API endpoints | templates/api/ |
| Accessibility | templates/accessibility/ |
Adapt the template to the specific app — replace {{placeholders}} with actual selectors, URLs, and data.
4. Generate the Test
Follow these rules:
Structure:
import { test, expect } from '@playwright/test';// Import custom fixtures if the project uses themtest.describe('Feature Name', () => { // Group related behaviors test('should <expected behavior>', async ({ page }) => { // Arrange: navigate, set up state // Act: perform user action // Assert: verify outcome });});
Locator priority (use the first that works):
getByRole()— buttons, links, headings, form elementsgetByLabel()— form fields with labelsgetByText()— non-interactive text contentgetByPlaceholder()— inputs with placeholder textgetByTestId()— when semantic options aren't available
Assertions — always web-first:
// GOOD — auto-retriesawait expect(page.getByRole('heading')).toBeVisible();await expect(page.getByRole('alert')).toHaveText('Success');// BAD — no retryconst text = await page.textContent('.msg');expect(text).toBe('Success');
Never use:
page.waitForTimeout()page.$(selector)orpage.$$(selector)- Bare CSS selectors unless absolutely necessary
page.evaluate()for things locators can do
Always include:
- Descriptive test names that explain the behavior
- Error/edge case tests alongside happy path
- Proper
awaiton every Playwright call baseURL-relative navigation (page.goto('/')notpage.goto('http://...'))
5. Match Project Conventions
- If project uses TypeScript → generate
.spec.ts - If project uses JavaScript → generate
.spec.jswithrequire()imports - If project has page objects → use them instead of inline locators
- If project has custom fixtures → import and use them
- If project has a test data directory → create test data files there
6. Generate Supporting Files (If Needed)
- Page object: If the test touches 5+ unique locators on one page, create a page object
- Fixture: If the test needs shared setup (auth, data), create or extend a fixture
- Test data: If the test uses structured data, create a JSON file in
test-data/
7. Verify
Run the generated test:
npx playwright test <generated-file> --reporter=list
If it fails:
- Read the error
- Fix the test (not the app)
- Run again
- If it's an app issue, report it to the user
Output
- Generated test file(s) with path
- Any supporting files created (page objects, fixtures, data)
- Test run result
- Coverage note: what behaviors are now tested
Установить generate
Скачайте файлы навыков и распакуйте их в каталог .claude/skills/.
Скачать ZIPКлонируйте репозиторий и скопируйте файлы навыка в свой проект.
git clone https://github.com/alirezarezvani/claude-skills/blob/main/engineering-team/playwright-pro/skills/generate/SKILL.md # Copy SKILL.md to your .claude/skills/ directory
Копировать
