Cypress E2E Testing Agent Skill

End-to-end testing skill using Cypress for web applications, covering custom commands, network intercepts, fixtures, cy.session, and component testing patterns.

3k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

195

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/PramodDutta/qaskills --skill Cypress E2E Testing

The instruction itself

20 sections, as written by the author

Cypress E2E Testing Skill

You are an expert QA automation engineer specializing in Cypress end-to-end testing. When the user asks you to write, review, or debug Cypress E2E tests, follow these detailed instructions.

Core Principles

Cypress is not Selenium -- Cypress runs in the browser alongside the app. Embrace its architecture.
Commands are asynchronous but chainable -- Never use async/await with Cypress commands.
Retry-ability -- Cypress automatically retries assertions. Lean on this feature.
Network control -- Use cy.intercept() to control and assert on network requests.
Test isolation -- Each test should start from a clean state. Use cy.session() for auth.

Project Structure

cypress/
  e2e/
    auth/
      login.cy.ts
      signup.cy.ts
    dashboard/
      dashboard.cy.ts
    checkout/
      cart.cy.ts
  fixtures/
    users.json
    products.json
  support/
    commands.ts
    e2e.ts
    component.ts
  pages/
    login.page.ts
    dashboard.page.ts
  plugins/
    index.ts
cypress.config.ts

Configuration

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    viewportWidth: 1280,
    viewportHeight: 720,
    defaultCommandTimeout: 10000,
    requestTimeout: 15000,
    responseTimeout: 30000,
    retries: {
      runMode: 2,
      openMode: 0,
    },
    video: false,
    screenshotOnRunFailure: true,
    experimentalRunAllSpecs: true,
    setupNodeEvents(on, config) {
      // Register plugins here
      return config;
    },
  },
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
    specPattern: 'src/**/*.cy.{ts,tsx}',
  },
});

Custom Commands

Defining Custom Commands

// cypress/support/commands.ts
declare global {
  namespace Cypress {
    interface Chainable {
      login(email: string, password: string): Chainable<void>;
      loginByApi(email: string, password: string): Chainable<void>;
      getByTestId(testId: string): Chainable<JQuery<HTMLElement>>;
      shouldBeVisible(text: string): Chainable<void>;
    }
  }
}

Cypress.Commands.add('login', (email: string, password: string) => {
  cy.visit('/login');
  cy.get('[data-testid="email-input"]').type(email);
  cy.get('[data-testid="password-input"]').type(password);
  cy.get('[data-testid="login-button"]').click();
  cy.url().should('include', '/dashboard');
});

Cypress.Commands.add('loginByApi', (email: string, password: string) => {
  cy.request({
    method: 'POST',
    url: '/api/auth/login',
    body: { email, password },
  }).then((response) => {
    window.localStorage.setItem('authToken', response.body.token);
  });
});

Cypress.Commands.add('getByTestId', (testId: string) => {
  return cy.get(`[data-testid="${testId}"]`);
});

Using `cy.session()` for Auth

Cypress.Commands.add('login', (email: string, password: string) => {
  cy.session(
    [email, password],
    () => {
      cy.visit('/login');
      cy.get('#email').type(email);
      cy.get('#password').type(password);
      cy.get('button[type="submit"]').click();
      cy.url().should('include', '/dashboard');
    },
    {
      validate() {
        cy.request('/api/auth/me').its('status').should('eq', 200);
      },
    }
  );
});

Page Object Pattern

// cypress/pages/login.page.ts
export class LoginPage {
  get emailInput() {
    return cy.get('[data-testid="email-input"]');
  }

  get passwordInput() {
    return cy.get('[data-testid="password-input"]');
  }

  get submitButton() {
    return cy.get('[data-testid="login-button"]');
  }

  get errorMessage() {
    return cy.get('[data-testid="error-message"]');
  }

  visit() {
    cy.visit('/login');
    return this;
  }

  fillEmail(email: string) {
    this.emailInput.clear().type(email);
    return this;
  }

  fillPassword(password: string) {
    this.passwordInput.clear().type(password);
    return this;
  }

  submit() {
    this.submitButton.click();
    return this;
  }

  login(email: string, password: string) {
    this.fillEmail(email);
    this.fillPassword(password);
    this.submit();
    return this;
  }

  assertError(message: string) {
    this.errorMessage.should('be.visible').and('contain.text', message);
    return this;
  }
}

export const loginPage = new LoginPage();

Writing Tests

Basic Test Structure

import { loginPage } from '../pages/login.page';

describe('Login', () => {
  beforeEach(() => {
    loginPage.visit();
  });

  it('should login successfully with valid credentials', () => {
    loginPage.login('[email protected]', 'SecurePass123!');
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome back').should('be.visible');
  });

  it('should show error for invalid credentials', () => {
    loginPage.login('[email protected]', 'wrongpassword');
    loginPage.assertError('Invalid email or password');
  });

  it('should disable submit button when form is empty', () => {
    loginPage.submitButton.should('be.disabled');
  });
});

Network Intercept Patterns

describe('Product listing', () => {
  it('should display products from API', () => {
    cy.intercept('GET', '/api/products', {
      fixture: 'products.json',
    }).as('getProducts');

    cy.visit('/products');
    cy.wait('@getProducts');

    cy.get('[data-testid="product-card"]').should('have.length', 3);
  });

  it('should show error state on API failure', () => {
    cy.intercept('GET', '/api/products', {
      statusCode: 500,
      body: { error: 'Internal Server Error' },
    }).as('getProductsFail');

    cy.visit('/products');
    cy.wait('@getProductsFail');

    cy.contains('Something went wrong').should('be.visible');
    cy.get('[data-testid="retry-button"]').should('be.visible');
  });

  it('should show loading state', () => {
    cy.intercept('GET', '/api/products', (req) => {
      req.on('response', (res) => {
        res.setDelay(2000);
      });
    }).as('getProductsSlow');

    cy.visit('/products');
    cy.get('[data-testid="loading-spinner"]').should('be.visible');
    cy.wait('@getProductsSlow');
    cy.get('[data-testid="loading-spinner"]').should('not.exist');
  });

  it('should send correct query parameters', () => {
    cy.intercept('GET', '/api/products*').as('getProducts');

    cy.visit('/products');
    cy.get('[data-testid="search-input"]').type('laptop');
    cy.get('[data-testid="search-button"]').click();

    cy.wait('@getProducts').then((interception) => {
      expect(interception.request.url).to.include('q=laptop');
    });
  });
});

Working with Fixtures

// cypress/fixtures/users.json
{
  "validUser": {
    "email": "[email protected]",
    "password": "SecurePass123!",
    "name": "Test User"
  },
  "adminUser": {
    "email": "[email protected]",
    "password": "AdminPass123!",
    "name": "Admin User"
  }
}

describe('User management', () => {
  beforeEach(() => {
    cy.fixture('users.json').as('users');
  });

  it('should login with fixture data', function () {
    const { email, password } = this.users.validUser;
    cy.login(email, password);
    cy.url().should('include', '/dashboard');
  });
});

Form Testing

describe('Registration form', () => {
  beforeEach(() => {
    cy.visit('/register');
  });

  it('should validate required fields', () => {
    cy.get('button[type="submit"]').click();
    cy.contains('Name is required').should('be.visible');
    cy.contains('Email is required').should('be.visible');
    cy.contains('Password is required').should('be.visible');
  });

  it('should validate email format', () => {
    cy.get('#email').type('not-an-email');
    cy.get('#email').blur();
    cy.contains('Please enter a valid email').should('be.visible');
  });

  it('should validate password strength', () => {
    cy.get('#password').type('123');
    cy.get('#password').blur();
    cy.contains('Password must be at least 8 characters').should('be.visible');
  });

  it('should complete registration successfully', () => {
    cy.intercept('POST', '/api/auth/register', {
      statusCode: 201,
      body: { id: '123', email: '[email protected]' },
    }).as('register');

    cy.get('#name').type('New User');
    cy.get('#email').type('[email protected]');
    cy.get('#password').type('SecurePass123!');
    cy.get('#confirmPassword').type('SecurePass123!');
    cy.get('button[type="submit"]').click();

    cy.wait('@register');
    cy.url().should('include', '/login');
    cy.contains('Registration successful').should('be.visible');
  });
});

File Upload

it('should upload a file', () => {
  cy.get('[data-testid="file-input"]').selectFile('cypress/fixtures/sample.pdf');
  cy.contains('sample.pdf').should('be.visible');
  cy.get('[data-testid="upload-button"]').click();
  cy.contains('Upload successful').should('be.visible');
});

it('should drag and drop a file', () => {
  cy.get('[data-testid="file-input"]').selectFile('cypress/fixtures/image.png', {
    action: 'drag-drop',
  });
});

Multi-Tab and Window Handling

it('should handle links opening in new tab', () => {
  // Remove target="_blank" to keep navigation in same tab
  cy.get('a[data-testid="external-link"]')
    .invoke('removeAttr', 'target')
    .click();

  cy.url().should('include', '/external-page');
});

it('should verify external link href', () => {
  cy.get('a[data-testid="external-link"]')
    .should('have.attr', 'href')
    .and('include', 'https://external-site.com');
});

Component Testing

// src/components/Button.cy.tsx
import { Button } from './Button';

describe('Button component', () => {
  it('should render with correct text', () => {
    cy.mount(<Button>Click me</Button>);
    cy.contains('Click me').should('be.visible');
  });

  it('should handle click events', () => {
    const onClick = cy.stub().as('onClick');
    cy.mount(<Button onClick={onClick}>Click me</Button>);
    cy.contains('Click me').click();
    cy.get('@onClick').should('have.been.calledOnce');
  });

  it('should be disabled when disabled prop is true', () => {
    cy.mount(<Button disabled>Click me</Button>);
    cy.get('button').should('be.disabled');
  });

  it('should apply variant styles', () => {
    cy.mount(<Button variant="primary">Primary</Button>);
    cy.get('button').should('have.class', 'btn-primary');
  });
});

Best Practices

Use cy.intercept() over cy.server()/cy.route() -- The newer API is more powerful.
Prefer cy.session() for authentication -- It caches session state across tests.
Use data-testid attributes -- They survive refactoring better than class selectors.
Never use cy.wait(ms) -- Use cy.wait('@alias') for network requests or assertions for DOM.
Keep tests independent -- Do not rely on test execution order.
Use beforeEach not before -- Each test should set up its own state.
Return nothing from Cypress commands -- Commands are chainable, not promise-based.
Avoid conditional testing -- Cypress tests should be deterministic.
Use API shortcuts for state setup -- Use cy.request() to set up data instead of UI clicks.

10. Limit use of .then() -- Most operations should be chainable assertions.

Anti-Patterns to Avoid

Using async/await -- Cypress commands are not Promises. They queue commands.
Assigning Cypress commands to variables -- const el = cy.get('.foo') does not work as expected.
Using arbitrary waits -- cy.wait(5000) is a guaranteed source of flakiness.
Visiting external sites -- Cypress does not support cross-origin navigation well.
Testing third-party widgets directly -- Stub them or use their test hooks.
Using .then() for simple assertions -- Use .should() instead, which retries.
Deeply nested callbacks -- Flatten your test logic; avoid callback hell.
Overusing cy.wrap() -- Use it only when you genuinely need to wrap non-Cypress values.
Testing implementation details -- Focus on what the user sees and does.

10. Running too many specs in a single file -- Split large files by feature area.

Debugging Tips

Use cy.log() to print messages to the Cypress command log.
Use cy.debug() to pause and inspect in DevTools.
Use cy.pause() to step through commands one at a time.
Use .then(console.log) to inspect values during test execution.
Open Cypress in interactive mode: npx cypress open.
Check the Cypress command log sidebar for time-travel debugging.
Use cy.screenshot() to capture the current state for debugging.

CI Integration

# .github/workflows/cypress.yml
name: Cypress Tests
on: [push, pull_request]

jobs:
  cypress:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chrome, firefox, edge]
    steps:
      - uses: actions/checkout@v4
      - uses: cypress-io/github-action@v6
        with:
          browser: ${{ matrix.browser }}
          start: npm run dev
          wait-on: 'http://localhost:3000'
          record: true
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

Other skills for the same job

different authors, same section of the catalogue

Webapp Testing

by anthropics

vendor ×12

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

6k tokens scripts

Finishing A Development Branch

by ZhanlinCui

×7

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

1k tokens

Test Driven Development

by w95

×7

Use when implementing any feature or bugfix, before writing implementation code

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes

10k tokens scripts

Verification Before Completion

by ZhanlinCui

×6

Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always

Expert guidance for systematic backtesting of trading strategies. Use when developing, testing, stress-testing, or validating quantitative trading strategies. Covers "beating ideas to death" methodology, parameter robustness testing, slippage modeling, bias prevention, and interpreting backtest results. Applicable when user asks about backtesting, strategy validation, robustness testing, avoiding overfitting, or systematic trading development.

Cloud laboratory platform for automated protein testing and validation. Use when designing proteins and needing experimental validation including binding assays, expression testing, thermostability measurements, enzyme activity assays, or protein sequence optimization. Also use for submitting experiments via API, tracking experiment status, downloading results, optimizing protein sequences for better expression using computational tools (NetSolP, SoluProt, SolubleMPNN, ESM), or managing protein design workflows with wet-lab validation.

This skill should be used for time series machine learning tasks including classification, regression, clustering, forecasting, anomaly detection, segmentation, and similarity search. Use when working with temporal data, sequential patterns, or time-indexed observations requiring specialized algorithms beyond standard ML approaches. Particularly suited for univariate and multivariate time series analysis with scikit-learn compatible APIs.

19k tokens

How to use it

Copy the folder

Take pramoddutta/cypress e2e testing from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npx. Without those the skill loads but fails at the first command.

Cypress E2E Testing Agent Skill

Install

The instruction itself

Cypress E2E Testing Skill

Core Principles

Project Structure

Configuration

Custom Commands

Defining Custom Commands

Using cy.session() for Auth

Page Object Pattern

Writing Tests

Basic Test Structure

Network Intercept Patterns

Working with Fixtures

Form Testing

File Upload

Multi-Tab and Window Handling

Component Testing

Best Practices

Anti-Patterns to Avoid

Debugging Tips

CI Integration

Other skills for the same job

How to use it

Using `cy.session()` for Auth