OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add bobmatnyc/claude-mpm-skills --skill cypress
Cypress end-to-end and component testing patterns for web apps: reliable selectors, stable waits, network stubbing, auth handling, CI parallelization, and flake reduction
npx skills add bobmatnyc/claude-mpm-skills --skill cypress
Cypress runs browser automation with first-class network control, time-travel debugging, and a strong local dev workflow. Use it for critical path E2E tests and for component tests when browser-level rendering matters.
Prefer data-testid (or data-cy) attributes for selectors. Avoid brittle CSS chains and text-only selectors for critical interactions.
Wait on app-visible conditions or network aliases rather than cy.wait(1000).
cy.interceptStub responses for deterministic tests and speed. Keep a small set of “real backend” smoke tests separate.
Prefer cy.session to cache login for speed and stability.
Run component tests to validate UI behavior in isolation while keeping browser rendering.
Store artifacts for failed runs and keep videos optional to reduce storage.
Parallelize long E2E suites via Cypress Cloud when runtime dominates feedback loops.
cy.wait(1000) as a synchronization mechanism.cy.session and per-test setup.Actions:
data-testid hook for the element.should("be.visible")).Actions:
<button data-testid="save-user">Save</button>cy.get('[data-testid="save-user"]').click();cy.intercept("GET", "/api/users/*").as("getUser");
cy.visit("/users/1");
cy.wait("@getUser");
cy.get('[data-testid="user-email"]').should("not.be.empty");cy.intercept("GET", "/api/users/1", {
statusCode: 200,
body: { id: "1", email: "a@example.com" },
}).as("getUser");// cypress/support/commands.ts
Cypress.Commands.add("login", () => {
cy.session("user", () => {
cy.request("POST", "/api/auth/login", {
email: "test@example.com",
password: "password",
});
});
});// e2e spec
beforeEach(() => {
cy.login();
});npx cypress open --component// cypress/component/Button.cy.tsx
import React from "react";
import Button from "../../src/Button";
describe("<Button />", () => {
it("clicks", () => {
cy.mount(<Button onClick={cy.stub().as("onClick")}>Save</Button>);
cy.contains("Save").click();
cy.get("@onClick").should("have.been.calledOnce");
});
});// cypress.config.ts
import { defineConfig } from "cypress";
export default defineConfig({
video: false,
screenshotOnRunFailure: true,
retries: { runMode: 2, openMode: 0 },
});