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.