К основному содержанию
скилл CX Codex

cypress · mindrally — скилл для Claude Code: что делает и как установить

Скилл учит ИИ-агента писать надёжные сквозные тесты на Cypress. Набор правил отсекает хрупкие селекторы и настраивает сетевые перехваты.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Mindrally/skills --skill cypress -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/cypress/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/cypress/

По шагам, с командами для каждой платформы: Как установить скилл в 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 от других авторов.

cypress Claude MPM Team Скилл для написания E2E- и компонентных тестов на Cypress: устойчивые селекторы, ожидания без фиксированных пауз, перехват сети. CX Codex +1 653установок improve-codebase-architecture Matt Pocock Скилл ищет архитектурные узкие места в кодовой базе и показывает варианты углубления модулей в HTML-отчёте. Подойдёт для ревью перед рефакторингом. 1 163 035установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок tdd Matt Pocock Скилл управляет циклом красный-зелёный в TDD: проверяет, что тесты пишутся до кода, держит их на уровне публичных интерфейсов и не завязывает на внутреннюю структуру. 1 141 062установок skill-creator официальный anthropics Помогает создать новый скилл, доработать существующий и проверить результат через тестовые промпты и оценки. 414 180установок agent-browser vercel-labs Скилл управляет браузером через CLI: открывает страницы, заполняет формы, нажимает кнопки и проверяет веб-приложения. Подходит для задач, где агенту нужно действовать в интерфейсе. CX Codex +1 1 200 000установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок

Из того же набора236

autogen-development Подсказывает агенту, как писать код на Microsoft AutoGen: создание агентов, групповые чаты, инструменты, оркестрация. CX Codex +1 721установок oauth-implementation Инструкции по настройке OAuth 2.0 и 2.1 с защитой через PKCE, ротацией токенов и валидацией redirect URI. Помогает внедрить авторизацию без устаревших небезопасных потоков. CX Codex +1 719установок figma-integration Направляет ИИ-агента при переносе макетов из Figma в код: от разбора токенов и стилей до настройки MCP-серверов. Помогает сохранить сетку, типографику и состояния компонентов. CX Codex +1 718установок shopify Скилл задаёт правила вёрстки тем Shopify: шаблоны Liquid, архитектуру Online Store 2.0 и работу с корзиной. CX Codex +1 717установок vercel-development Набор правил для ИИ-агента: как писать код под Next.js App Router, React Server Components и Vercel AI SDK. Пригодится, когда агент лепит клиентские компоненты там, где хватило бы серверных. CX Codex +1 712установок rest-api-django Набор правил для ИИ-агента, который пишет Django REST API: структура проекта, сериализаторы, JWT-аутентификация, борьба с N+1. CX Codex +1 712установок postcss-best-practices Скилл с рекомендациями по настройке PostCSS, сжатию стилей через cssnano и интеграции с Vite, Webpack и Next.js. CX Codex +1 710установок kotlin-development Задаёт правила разработки на Kotlin: стандарты чистых функций, именования, неизменяемых моделей данных и модульных тестов. CX Codex +1 709установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой