This post goes over how to generate E2E tests with the Cypress AI command.

Prerequisites

You have Cypress installed and set up:

npm install cypress

npx cypress open

You have Ollama installed and running:

curl -fsSL https://ollama.com/install.sh | sh

ollama serve

Install

Install the package:

npm install cy-ai

Download the LLM (large language model):

ollama pull qwen2.5-coder

Setup

Import the command in cypress/support/commands.js:

// cypress/support/commands.js
require('cy-ai');

If you’re running Chrome, disable chromeWebSecurity so the LLM requests aren’t blocked by CORS:

// cypress.config.js
module.exports = defineConfig({
  chromeWebSecurity: false,
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Write a test:

// cypress/e2e/example.cy.js
it('visits example.com', () => {
  cy.ai('go to https://example.com and see heading "Example Domain"');
});

If you’d like to configure the Cypress AI command (e.g., replace the LLM), check out the options.

How It Works

1. A prompt is created from your task, the HTML body, and the template.
2. The prompt is sent to the LLM server.
3. The LLM server responds with Cypress code.
4. The Cypress code is cleaned and run.
5. If the steps pass, the code is saved to cypress/e2e/**/__generated__/*.json.
6. If the steps fail, an error is thrown and the LLM response can be inspected in the browser Console.

When running tests, if the generated Cypress code exists, the command will reuse the existing code.

To regenerate a step, enable the regenerate option or delete the generated code in cypress/e2e/**/__generated__/*.json.

Links

• GitHub
• Documentation
• Demo