cypress by bobmatnyc/claude-mpm-skills
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill cypressCypress 运行浏览器自动化,具备一流的网络控制、时间旅行调试和强大的本地开发工作流。当浏览器级渲染很重要时,可将其用于关键路径的 E2E 测试和组件测试。
npm i -D cypress
npx cypress open
// cypress/e2e/health.cy.ts
describe("health", () => {
it("loads", () => {
cy.visit("/");
cy.contains("Hello").should("be.visible");
});
});
对于选择器,优先使用 data-testid(或 data-cy)属性。避免为关键交互使用脆弱的 CSS 链和纯文本选择器。
<button data-testid="save-user">保存</button>
cy.get('[data-testid="save-user"]').click();
等待应用程序可见的条件或网络别名,而不是使用 cy.wait(1000)。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
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 进行网络控制为确定性测试和速度而存根响应。将一小部分“真实后端”冒烟测试分开存放。
cy.intercept("GET", "/api/users/1", {
statusCode: 200,
body: { id: "1", email: "a@example.com" },
}).as("getUser");
优先使用 cy.session 来缓存登录信息,以提高速度和稳定性。
// cypress/support/commands.ts
Cypress.Commands.add("login", () => {
cy.session("user", () => {
cy.request("POST", "/api/auth/login", {
email: "test@example.com",
password: "password",
});
});
});
// e2e 测试规范
beforeEach(() => {
cy.login();
});
运行组件测试以隔离验证 UI 行为,同时保持浏览器渲染。
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")}>保存</Button>);
cy.contains("保存").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 },
});
当运行时间主导反馈循环时,通过 Cypress Cloud 并行化长的 E2E 套件。
cy.wait(1000) 作为同步机制。cy.session 和每个测试的设置来隔离状态。操作:
data-testid 钩子。should("be.visible"))。操作:
每周安装量
213
代码仓库
GitHub 星标数
18
首次出现
2026年1月23日
安全审计
安装于
opencode179
gemini-cli172
codex172
github-copilot166
cursor143
kimi-cli136
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.
npm i -D cypress
npx cypress open
// cypress/e2e/health.cy.ts
describe("health", () => {
it("loads", () => {
cy.visit("/");
cy.contains("Hello").should("be.visible");
});
});
Prefer data-testid (or data-cy) attributes for selectors. Avoid brittle CSS chains and text-only selectors for critical interactions.
<button data-testid="save-user">Save</button>
cy.get('[data-testid="save-user"]').click();
Wait on app-visible conditions or network aliases rather than cy.wait(1000).
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.interceptStub responses for deterministic tests and speed. Keep a small set of “real backend” smoke tests separate.
cy.intercept("GET", "/api/users/1", {
statusCode: 200,
body: { id: "1", email: "a@example.com" },
}).as("getUser");
Prefer cy.session to cache login for speed and stability.
// 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();
});
Run component tests to validate UI behavior in isolation while keeping browser rendering.
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");
});
});
Store artifacts for failed runs and keep videos optional to reduce storage.
// cypress.config.ts
import { defineConfig } from "cypress";
export default defineConfig({
video: false,
screenshotOnRunFailure: true,
retries: { runMode: 2, openMode: 0 },
});
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:
Weekly Installs
213
Repository
GitHub Stars
18
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode179
gemini-cli172
codex172
github-copilot166
cursor143
kimi-cli136
xdrop 文件传输脚本:Bun 环境下安全上传下载工具,支持加密分享
20,700 周安装