TypeScript support for custom commands in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a custom Cypress command with TypeScript support.

Cypress

Cypress.Commands.[1]('login', (email: string, password: string) => {
  cy.get('#email').type(email);
  cy.get('#password').type(password);
  cy.get('button[type=submit]').click();
});

Drag options to blanks, or click blank then click option'

Aadd

Bcreate

Cregister

Ddefine

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'create' or 'register' instead of 'add' causes errors.

Trying to use 'define' is not a Cypress method.

The correct method to add a custom command in Cypress is 'add'.

2fill in blank

medium

Complete the TypeScript declaration to extend Cypress commands interface.

Cypress

declare global {
  namespace Cypress {
    interface Chainable<Subject = any> {
      [1](email: string, password: string): Chainable<void>;
    }
  }
}

Drag options to blanks, or click blank then click option'

AuserLogin

Bauthenticate

CsignIn

Dlogin

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name than the custom command causes TypeScript errors.

Misspelling the method name breaks autocomplete.

The custom command name 'login' must match the command added in Cypress.Commands.add.

3fill in blank

hard

Fix the error in the custom command usage with TypeScript support.

Cypress

cy.[1]('[e-mail]', 'password123');

Drag options to blanks, or click blank then click option'

Alogin

Bsignin

Cauthenticate

DsignIn

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'signin' or 'signIn' instead of 'login' causes runtime errors.

Using 'authenticate' is not defined as a command.

The correct custom command name is 'login' as declared and added.

4fill in blank

hard

Fill both blanks to correctly import and use the custom command types in Cypress.

Cypress

import './commands';

/// <reference types="[1]" />

// Now you can use cy.[2]() with TypeScript support.

Drag options to blanks, or click blank then click option'

Acypress

Bcypress/support

Ccypress/types

Dcypress/plugins

Attempts:

3 left

💡 Hint

Common Mistakes

Referencing wrong type paths causes TypeScript errors.

Using incorrect command names breaks autocomplete.

The reference types should be 'cypress' for Cypress types, and the command used is 'login' as defined.

5fill in blank

hard

Fill all three blanks to define, declare, and use a custom command with TypeScript support.

Cypress

Cypress.Commands.[1]('logout', () => {
  cy.get('#logout').click();
});

declare global {
  namespace Cypress {
    interface Chainable {
      [2](): Chainable<void>;
    }
  }
}

// Usage:
cy.[3]();

Drag options to blanks, or click blank then click option'

Aadd

Blogout

ClogoutUser

DsignOut

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names in declaration and usage causes errors.

Using 'signOut' or 'logoutUser' instead of 'logout' breaks the code.

The method to add commands is 'add', and the command name must be consistent as 'logout' in declaration and usage.

Practice

1. What is the main benefit of adding TypeScript support for custom commands in Cypress?

easy

A. It makes tests run faster by optimizing command execution.

B. It provides type checking and better editor autocomplete for custom commands.

C. It automatically generates test reports for custom commands.

D. It allows running tests on multiple browsers simultaneously.

Solution

1. Step 1: Understand TypeScript role in Cypress

   TypeScript adds static type checking and editor support to catch errors early.

2. Step 2: Identify benefit for custom commands

   Typing custom commands improves autocomplete and prevents mistakes when using them.

3. Final Answer:

   It provides type checking and better editor autocomplete for custom commands. -> Option B

4. Quick Check:

   TypeScript support = type checking + autocomplete [OK]

Hint: TypeScript helps catch errors before running tests [OK]

Common Mistakes:

• Confusing TypeScript support with test speed improvements
• Thinking it auto-generates reports
• Believing it enables multi-browser runs

2. Which is the correct way to declare a custom command with TypeScript support in Cypress?

easy

A. namespace Cypress { interface myCommand { Chainable(): void } }

B. interface Cypress { Chainable { myCommand(): void } }

C. declare interface Cypress { myCommand(): void }

D. declare namespace Cypress { interface Chainable { myCommand(): Chainable<void> } }

Solution

1. Step 1: Recall TypeScript declaration syntax for Cypress commands

   Custom commands are declared inside the Cypress namespace extending Chainable interface.

2. Step 2: Match correct syntax

   declare namespace Cypress { interface Chainable { myCommand(): Chainable<void> } } correctly uses 'declare namespace Cypress' and extends 'Chainable' with 'myCommand'.

3. Final Answer:

   declare namespace Cypress { interface Chainable { myCommand(): Chainable<void> } } -> Option D

4. Quick Check:

   Namespace + Chainable interface = correct declaration [OK]

Hint: Custom commands extend Cypress.Chainable interface inside namespace [OK]

Common Mistakes:

• Missing 'declare' keyword
• Incorrect interface or namespace nesting
• Placing method outside Chainable interface

3. Given this TypeScript declaration for a custom command:

declare namespace Cypress {
  interface Chainable {
    login(email: string, password: string): Chainable<void>
  }
}

What is the correct way to use this login command in a test?

medium

A. cy.login(['[e-mail]', 'pass123'])

B. cy.login(email: '[e-mail]', password: 'pass123')

C. cy.login('[e-mail]', 'pass123')

D. cy.login()

Solution

1. Step 1: Understand method signature

   The login command takes two string arguments: email and password.

2. Step 2: Match correct usage syntax

   cy.login('[e-mail]', 'pass123') calls login with two string arguments in order, matching the declaration.

3. Final Answer:

   cy.login('[e-mail]', 'pass123') -> Option C

4. Quick Check:

   Method call with two string args = correct usage [OK]

Hint: Pass arguments as ordered parameters, not as object or array [OK]

Common Mistakes:

• Using named parameters syntax (not valid in JS calls)
• Passing arguments as array instead of separate params
• Calling without required arguments

4. You wrote this custom command declaration:

declare namespace Cypress {
  interface Chainable {
    clickButton(): void
  }
}

But when you use cy.clickButton() in your test, TypeScript shows an error. What is the problem?

medium

A. The return type should be Chainable<void>, not void.

B. The method name cannot be clickButton.

C. Custom commands must be declared outside the Cypress namespace.

D. You forgot to import Cypress in the test file.

Solution

1. Step 1: Check return type for custom commands

   Custom commands should return Chainable<T> to allow chaining in Cypress.

2. Step 2: Identify mismatch causing TypeScript error

   Returning void breaks chaining and causes TypeScript to complain.

3. Final Answer:

   The return type should be Chainable<void>, not void. -> Option A

4. Quick Check:

   Custom commands must return Chainable for chaining [OK]

Hint: Custom commands return Chainable, not void [OK]

Common Mistakes:

• Using void return type instead of Chainable
• Declaring commands outside Cypress namespace
• Assuming method names are restricted

5. You want to create a custom command fillForm that accepts an object with optional name and email fields. How should you declare it in TypeScript to support chaining and optional properties?

hard

A. declare namespace Cypress { interface Chainable { fillForm(data: { name?: string; email?: string }): Chainable<void> } }

B. declare namespace Cypress { interface Chainable { fillForm(data: { name: string; email: string }): void } }

C. declare namespace Cypress { interface Chainable { fillForm(data?: { name: string; email: string }): Chainable<void> } }

D. declare namespace Cypress { interface Chainable { fillForm(data: { name: string; email?: string }): Chainable<string> } }

Solution

1. Step 1: Define optional properties correctly

   Use question marks (?) to mark properties as optional in the data object.

2. Step 2: Ensure return type supports chaining

   Return type must be Chainable<void> to allow chaining in Cypress tests.

3. Final Answer:

   declare namespace Cypress { interface Chainable { fillForm(data: { name?: string; email?: string }): Chainable<void> } } -> Option A

4. Quick Check:

   Optional props + Chainable return = correct declaration [OK]

Hint: Use '?' for optional props and Chainable<void> return [OK]

Common Mistakes:

• Forgetting '?' for optional properties
• Using void return type instead of Chainable
• Returning wrong Chainable generic type