expediagroup/cypress-codegen

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

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

Model your Cypress project exactly like the one in this repository!

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",
        },
    },
});

2. Put all of your custom commands in cypress/commands as regular functions.
3. Run the cypress-codegen CLI command, or just open Cypress!
4. 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!

cypress-codegen's Issues

Missing support for projects with Cypress directories not in the root

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior. Also mention the version of the project on which the issue can be reproduced.

Expected behavior

A clear and concise description of what you expected to happen. If this can be reproduced with a test that's even better!

Additional context

Add any other context about the issue here.

Types generation break generic types

Hey! Great job with the codegen. I found one issue related to it.

Version: Cypress 11
Library version: latest
Macbook

Given I have custom command with generic type passed to it, types generation is breaking my code.

Example:

cy.get<AccountsListResponse>('@getAccountByCompany')
   .then((response) => {
       // some simple code inside
    })
    .as('account');

Output:

 cy.get <
 AccountsListResponse >
 '@getAccountByCompany'
 .then((response) => {
      // some simple code inside
 })
 .as('account')

To be honest it's quite easy to reproduce with generic types.

Cannot find module ./cypress/commands/cypress/commands/

I am getting the following error:

Cannot find module './cypress/commands/cypress/commands/auth-commands.ts'

I have traced the error from the following line in src/plugin/index.ts:

  on('task', {
    importCustomCommands: () => {
      return {
        filePaths: globSync(`${COMMANDS_DIRECTORY}/**/*`, { nodir: true }),
        commandsDirectory: `cypress${sep}commands${sep}`
      };
    }
  });

to another line in src/index.ts:

 const customCommandObject = require(`../../../${projectName}cypress/commands/${filePath.replace(
        commandsDirectory,
        ''
      )}`);

Notice that sep depends on operating system in node context, but somehow I think that is different with the globing that happens, because I am on Windows and running the whole thing in bash. I think there should be a mix-up of paths somewhere between bash and the OS. To resolve this, I suggest that the commands path be configurable when one configs the plugin itself to make it less opinionated and prone to breaking in different envs.

For now doing the following should be fine.

  on('task', {
    importCustomCommands: () => {
      return {
        filePaths: globSync(`${COMMANDS_DIRECTORY}/**/*`, { nodir: true }),
        commandsDirectory:  new RegExp(`cypress[\\\\\\/]commands[\\\\\\/]`, 'g')
      };
    }
  });

This allows the replace statement used in beforeAll to replace the path regardless of the operating system's sep, hence the import statement can also be safely removed.

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://www.npmjs.com/~expediagroup_oss.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Cannot use commands with inputs that use object destructuring

Describe the bug

Cannot use commands with inputs that use object destructuring. Results in babel types error on Cypress startup

To Reproduce

Try to use this custom command:

export const objectDestructureExample = ({ input, logText }: { input: string; logText: string }) => {
  cy.log(logText);
  cy.contains(input);
};

Expected behavior

A clear and concise description of what you expected to happen. If this can be reproduced with a test that's even better!

Additional context

Add any other context about the issue here.