A Cypress plugin and CLI tool which automatically adds and enables IntelliSense for your custom commands!
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!
npm i --save-dev cypress-codegen- Add the required plugin code to
cypress.config.tslike 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",
},
},
});- Put all of your custom commands in
cypress/commandsas regular functions. - Run the
cypress-codegenCLI command, or just open Cypress! - You will notice that the Cypress support file(s) are updated to automatically import all your custom commands!
Check out this project's cypress directory for a generic example!
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.
cypress-codegen will attempt to read your prettierrc config by default, but will use the prettier defaults otherwise.
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!