TypeScript support for custom commands in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of adding TypeScript support for custom commands in Cypress?

It helps Cypress recognize the new commands with proper types, enabling code completion and type checking, which reduces errors and improves developer experience.

beginner

Where do you declare the types for your custom Cypress commands?

You declare them in a TypeScript declaration file, usually named cypress/support/index.d.ts or cypress/support/commands.d.ts, by extending the Cypress.Chainable interface.

intermediate

How do you extend Cypress commands with TypeScript to add a custom command named login?

You add a declaration like declare namespace Cypress { interface Chainable { login(email: string, password: string): Chainable<void>; } } in a declaration file, then implement Cypress.Commands.add('login', (email, password) => { ... }) in your commands file.

intermediate

Why is it important to declare custom Cypress command types in the support declaration file?

Declaring them there ensures TypeScript automatically knows about the custom commands' types when writing tests, so you get autocomplete and error checking for those commands.

beginner

What happens if you use a custom Cypress command without adding TypeScript support?

TypeScript will not recognize the command, causing errors or missing autocomplete, which can lead to mistakes or slower development.

Where do you extend the Cypress command types for custom commands in TypeScript?

A In a Cypress configuration JSON file

B In a TypeScript declaration file (<code>.d.ts</code>)

C In a <code>.ts</code> test file

D In the package.json file

Custom command types are declared in a TypeScript declaration file to extend Cypress.Chainable interface.

What interface do you extend to add custom commands in Cypress TypeScript support?

A Cypress.Chainable

B Cypress.CommandsInterface

C Cypress.CustomCommands

D Cypress.Commands

You extend the Cypress.Chainable interface to add custom command types.

Which of the following is the correct way to add a custom command implementation in Cypress?

A Cypress.Commands.add('myCommand', () => {})

B Cypress.Commands.create('myCommand', () => {})

C Cypress.addCommand('myCommand', () => {})

D Cypress.createCommand('myCommand', () => {})

The correct method to add a custom command is Cypress.Commands.add.

What benefit does TypeScript support for custom commands provide?

A Faster test execution

B Better UI design

C Type checking and autocomplete for custom commands

D Automatic test retries

TypeScript support provides type checking and autocomplete, improving code quality and developer experience.

If you forget to declare your custom command types, what will happen in your TypeScript Cypress tests?

A Tests will run faster

B Tests will fail to run

C Nothing, it works fine

D You will get type errors or no autocomplete for the custom commands

Without declaration, TypeScript does not recognize the custom commands, causing errors or missing autocomplete.

Explain how to add TypeScript support for a custom Cypress command named 'login'.

Think about declaration files and interface extension.

Why is it important to extend Cypress.Chainable interface when adding custom commands in TypeScript?

Consider how TypeScript understands new methods.