Overwriting existing commands in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to overwrite the 'click' command in Cypress.

Cypress

Cypress.Commands.overwrite('click', (originalFn, element, options) => {
  // custom behavior
  return [1](element, options)
})

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

Aelement.click

BoriginalFn

Cclick

Dcy.click

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cy.click' inside the overwrite causes infinite recursion.

Calling 'element.click' directly bypasses Cypress's command queue.

The original function is passed as 'originalFn' and should be called to preserve default behavior.

2fill in blank

medium

Complete the code to add a log message before clicking in the overwritten 'click' command.

Cypress

Cypress.Commands.overwrite('click', (originalFn, element, options) => {
  cy.log('Clicking element')
  return [1](element, options)
})

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

Acy.click

Belement.click

CoriginalFn

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Calling 'cy.click' causes recursion.

Calling 'element.click' bypasses Cypress's command queue.

Use 'originalFn' to call the original click command after logging.

3fill in blank

hard

Fix the error in the overwritten 'type' command to preserve original behavior.

Cypress

Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
  // add delay before typing
  cy.wait(500)
  return [1](element, text, options)
})

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

AoriginalFn

Bcy.type

Ctype

Delement.type

Attempts:

3 left

💡 Hint

Common Mistakes

Calling 'cy.type' causes infinite recursion.

Calling 'element.type' bypasses Cypress's command queue.

Call 'originalFn' to keep the original 'type' command behavior after the delay.

4fill in blank

hard

Fill both blanks to overwrite 'visit' command to log URL and then call original.

Cypress

Cypress.Commands.overwrite('visit', ([1], url, [2]) => {
  cy.log(`Visiting: ${url}`)
  return [1](url, [2])
})

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

AoriginalFn

Boptions

Dopts

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names causes errors.

Not passing options to originalFn loses command options.

The first argument is 'originalFn' and the third is 'options' to pass along.

5fill in blank

hard

Fill all three blanks to overwrite 'select' command to log selected value and call original.

Cypress

Cypress.Commands.overwrite('select', ([1], element, [2], [3]) => {
  cy.log(`Selecting value: ${value}`)
  return originalFn(element, value, options)
})

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

AoriginalFn

Bvalue

Coptions

Dval

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing argument order causes runtime errors.

Not passing all arguments to originalFn breaks the command.

The overwrite function receives originalFn, value, and options in order.