無料GitHub で公開

cypress

Assists with end-to-end testing of web applications using Cypress. Use when writing E2E tests, setting up component testing, configuring CI pipelines with parallelization, or building custom test commands. Trigger words: cypress, e2e testing, end-to-end, cypress run, cy.get, integration testing, browser testing.

TerminalSkills/skills

インストール方法を見る

含まれるファイル（2）

SKILL.md3.7 KB
_scores.json1.4 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Cypress

Overview

Cypress is an end-to-end testing framework for web applications that runs tests directly in the browser for fast, reliable feedback. It provides element selection, network interception, component testing, and CI integration with parallelization and video recording.

Instructions

When selecting elements, use data-testid or data-cy attributes with cy.get("[data-testid='submit']") instead of CSS classes or IDs for resilient selectors.
When testing interactions, use cy.get().type(), .click(), .select(), and .check() for user actions, and chain .should() assertions for expected outcomes.
When handling API calls, use cy.intercept() to stub external APIs with fixtures or spy on requests, and cy.wait("@alias") after actions that trigger calls instead of cy.wait(ms).
When writing custom commands, use Cypress.Commands.add() for reusable patterns like login, database seeding, and common workflows, with TypeScript declarations for IntelliSense.
When testing components, use cy.mount() with framework-specific mounting libraries (@cypress/react, @cypress/vue) to test components in isolation.
When configuring CI, use cypress run --record --key for Cypress Cloud integration with --parallel to split tests across machines, and --browser to specify the browser.
When setting up the project, configure cypress.config.ts with baseUrl, viewport dimensions, timeouts, and environment variables.

Examples

Example 1: Write E2E tests for a checkout flow

User request: "Add Cypress tests for our e-commerce checkout process"

Actions:

Set up test with cy.visit("/products") and select a product
Intercept the cart API with cy.intercept("POST", "/api/cart") and alias it
Fill in shipping form using cy.get("[data-testid='email']").type(...)
Assert order confirmation with cy.url().should("include", "/confirmation")

Output: A reliable E2E test covering the full checkout flow with stubbed API responses.

Example 2: Set up component testing for React

User request: "Configure Cypress component testing for our React project"

Actions:

Install @cypress/react and configure component testing in cypress.config.ts
Create stories for key components using cy.mount(<Component />)
Test interactions with cy.get().click() and assert DOM changes
Add to CI pipeline alongside E2E tests

Output: Isolated component tests running in a real browser with full Cypress API.

Guidelines

Use data-testid attributes for test selectors; never rely on CSS classes, text content, or DOM structure.
Keep tests independent: each test should set up its own state (login, seed data).
Use cy.intercept() to stub external APIs; do not let tests depend on third-party service availability.
Add cy.wait("@alias") after actions that trigger API calls; do not use cy.wait(ms) for timing.
Write tests from the user's perspective: "fill in the form, click submit, see confirmation."
Use fixtures for large API response data; inline small responses in cy.intercept().
Run Cypress in CI with --record for test replay, screenshots, and video on failure.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

3dsmax-rendering

無料

Scripts and configures production rendering in Autodesk 3ds Max with the V-Ray and Corona renderers: output size and files, render elements, denoising, light mix, batch and command-line rendering, and network rendering. Use when a user asks to set up a production render, render several cameras in one batch, render from the command line or on a render farm, add render passes for compositing, or cut render time for archviz and product shots.

日本語の概要は準備中です。原文の説明を表示しています。