菜单
Testing E2E strategies based on Clean Architecture layers with cypress. Trigger: Invoke when writing tests E2E or testing user flows, verifying full integration in realistic scenarios.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Standardizes how the application handles asynchronous states, errors, and feedback using TanStack Query/Router patterns. Trigger: Apply when building async UIs to implement Suspense, Skeletons, and Error Boundaries instead of manual loading states.
Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.
TanStack Query and Router patterns and best practices. Trigger: When implementing data fetching and routing with TanStack Query and Router.
Testing strategies based on Clean Architecture layers. Trigger: Invoke when writing tests to enforce layer-specific mocking strategies (Unit vs Integration)
TypeScript strict patterns and best practices. Trigger: When writing TypeScript code - types, interfaces, generics.
Zod 4 schema validation patterns. Trigger: When using Zod for validation - breaking changes from v3.
| name | e2e |
| description | Testing E2E strategies based on Clean Architecture layers with cypress. Trigger: Invoke when writing tests E2E or testing user flows, verifying full integration in realistic scenarios. |
| license | Apache-2.0 |
| metadata | {"author":"jmgomezdev","version":"1.0"} |
// ❌ Brittle - breaks when styling changes
await page.locator('.btn-primary.large').click();
await page.locator('div > div > button:nth-child(2)').click();
// ✅ Semantic - uses accessible roles
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByRole('textbox', { name: 'Email' }).fill('test@example.com');
// ✅ Test IDs - explicit test hooks
await page.getByTestId('submit-button').click();
await page.getByTestId('email-input').fill('test@example.com');
// In your component:
<button data-testid="submit-button">Submit</button>
<input data-testid="email-input" type="email" />
// ✅ Mock API responses
test('handles API error', async ({ page }) => {
// Intercept and mock API call
await page.route('**/api/users', (route) => {
route.fulfill({
status: 500,
body: JSON.stringify({ error: 'Server error' }),
});
});
await page.goto('/users');
await expect(page.getByText('Failed to load users')).toBeVisible();
});
// ✅ Mock successful response
test('displays user list', async ({ page }) => {
await page.route('**/api/users', (route) => {
route.fulfill({
status: 200,
body: JSON.stringify({
users: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
],
}),
});
});
await page.goto('/users');
await expect(page.getByText('Alice')).toBeVisible();
await expect(page.getByText('Bob')).toBeVisible();
});
e2e, end-to-end, ``.