cypress-codegen

cypress-codegen

A Cypress plugin and CLI tool which automatically adds and enables IntelliSense for your custom commands!

Table of Contents

• Why Do I Need This Plugin?
• Installation
• Usage
• Example
• Configuration

Why Do I Need This Plugin?

The process for adding Cypress custom commands to test suites is quite manual and involves bloating projects with too much boilerplate code. Additionally, custom commands are hard to write because we don't get IntelliSense or the ease of navigating to the command's definition. The cypress-codegen plugin will enable IntelliSense and "go to definition" shortcuts, and will also generate boilerplate for adding custom commands to Cypress!

Installation

npm i --save-dev cypress-codegen

Plugin Usage

1. Add the required plugin code to cypress.config.ts like so:

import { cypressCodegen } from "cypress-codegen";
import { defineConfig } from "cypress";

export default defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
            cypressCodegen(on, config);
            return config;
        },
    },

    component: {
        setupNodeEvents(on, config) {
            cypressCodegen(on, config);
            return config;
        },
        devServer: {
            framework: "react",
            bundler: "vite",
        },
    },
});

1. Put all of your custom commands in cypress/commands as regular functions.
2. Run the cypress-codegen CLI command, or just open Cypress!
3. You will notice that the Cypress support file(s) are updated to automatically import all your custom commands!

Example

Check out this project's cypress directory for a generic example!

Custom Command Chaining

If you want to create custom commands that are meant to be scoped to a previous command's result, just add those separately. See the Cypress docs for more details.

Code Styling

cypress-codegen will attempt to read your prettierrc config by default, but will use the prettier defaults otherwise.

Command Line Usage

You can run cypress-codegen in your terminal to generate types for your Cypress project! Pass the --testingType option to run it for a particular testing type, component or e2e (defaults to e2e).

Currently, only the default supportFile config options are supported. See the docs for more details. Also, JavaScript usage is not supported. Use TypeScript, it's better!