cypress · mindrally — скилл для Claude Code: что делает и как установить
Скилл учит ИИ-агента писать надёжные сквозные тесты на Cypress. Набор правил отсекает хрупкие селекторы и настраивает сетевые перехваты.
npx skills add Mindrally/skills --skill cypress -a claude-codeЧто делает cypress
Ассистент начинает следовать практикам сквозного тестирования веб-приложений. Инструкции требуют искать элементы по атрибутам data-testid или data-cy и запрещают опираться на классы CSS. Для проверки состояний используются цепочки .should(), которые задействуют встроенные повторные попытки фреймворка.
Шаблон задаёт структуру пользовательских сценариев по схеме Given-When-Then. Повторяющиеся шаги вроде авторизации выносятся в cypress/support/commands.js через Cypress.Commands.add и сохраняются сессиями cy.session. Внешние запросы перехватываются вызовом cy.intercept с псевдонимами.
Команды нельзя смешивать с async/await, поскольку рантайм сам управляет внутренней очередью вызовов. Ожидание через паузы с фиксированным временем запрещено, а тесты обязаны оставаться независимыми друг от друга.
Какие задачи решает
- писать стабильные селекторы без привязки к стилям CSS
- изолировать сценарии через сохранение сессий в
cy.session - перехватывать сетевые запросы с помощью
cy.intercept - устранять случайные таймауты и лишние явные паузы
Примеры запросов агенту
- Напиши сквозной тест авторизации пользователя с проверкой формы через
data-testid. - Добавь кастомную команду в
cypress/support/commands.jsдля входа в профиль черезcy.session. - Перехвати маршрут
/api/usersчерезcy.interceptи проверь отображение списка.
Как установить cypress
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill cypress -a claude-code2Вручную: положить файлы
~/.claude/skills/cypress/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/cypress/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill cypress -a codex2Вручную: положить файлы
.agents/skills/cypress/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill cypress -a cursor2Вручную: положить файлы
.cursor/skills/cypress/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Mindrally/skills cypress2Вручную: положить файлы
.github/skills/cypress/SKILL.md1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill cypress -a gemini-cli2Командой платформы
gemini skills install https://github.com/Mindrally/skills --path cypressВручную: положить файлы
.devin/skills/cypress/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill cypress -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о cypress
Как установить cypress в Claude Code?
Выполните в терминале команду npx skills add Mindrally/skills --skill cypress -a claude-code.
Зачем нужен этот скилл?
Он задаёт правила написания тестов для веб-приложений, запрещая хрупкие локаторы и ручные задержки.
Почему запрещено использовать async и await?
Команды фреймворка автоматически выстраиваются во внутреннюю очередь, поэтому совмещение с асинхронным синтаксисом JavaScript нарушает их исполнение.
Исходный текст
SKILL.md · Apache-2.0
---
name: cypress
description: Cypress end-to-end testing best practices for web applications, covering test structure, commands, and reliability patterns.
metadata:
maintainer: Mindrally
source: https://github.com/Mindrally/skills
---
# Cypress Testing Best Practices
You are an expert in Cypress end-to-end testing.
## Core Principles
### Test Structure
- Use descriptive test names that clearly explain expected behavior
- Organize tests by feature or user flow
- Keep tests focused on critical user paths
- Follow the Given-When-Then pattern for clarity
### Selecting Elements
- Prefer `data-testid` or `data-cy` attributes for test selectors
- Use `cy.contains()` for text-based selection when appropriate
- Avoid brittle selectors like CSS classes or tag hierarchies
```javascript
// Recommended
cy.get('[data-testid="submit-button"]').click();
cy.contains('Submit').click();
// Avoid
cy.get('.btn-primary').click();
```
### Commands and Assertions
- Chain commands fluently for readability
- Use built-in retry-ability; avoid explicit waits
- Prefer `.should()` assertions over `.then()` for automatic retries
- Use `.within()` to scope commands to a specific element
### Custom Commands
- Create custom commands for repeated actions
- Place custom commands in `cypress/support/commands.js`
- Document custom commands with JSDoc comments
```javascript
Cypress.Commands.add('login', (email, password) => {
cy.session([email, password], () => {
cy.visit('/login');
cy.get('[data-testid="email"]').type(email);
cy.get('[data-testid="password"]').type(password);
cy.get('[data-testid="submit"]').click();
cy.url().should('include', '/dashboard');
});
});
```
### Handling Async Operations
- Cypress commands are automatically queued; don't mix with async/await
- Use `cy.intercept()` to mock or wait for network requests
- Use `cy.wait()` with aliases, not arbitrary timeouts
```javascript
cy.intercept('GET', '/api/users').as('getUsers');
cy.visit('/users');
cy.wait('@getUsers');
cy.get('[data-testid="user-list"]').should('be.visible');
```
### Test Isolation
- Each test should be independent and repeatable
- Use `beforeEach` hooks for setup
- Use `cy.session()` for efficient authentication
### Anti-Patterns to Avoid
- Using `cy.wait(5000)` with arbitrary timeouts
- Testing third-party sites you don't control
- Writing overly long tests that test multiple features
- Relying on the state from previous tests
© Mindrally · Apache-2.0 · Mindrally/skills
Похожие скиллы
Все скиллы по теме «Тесты и QA» →Сначала — cypress от других авторов.