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.

Practice

1. What is the main purpose of overwriting existing commands in Cypress?

easy

A. To change or extend the behavior of built-in Cypress commands

B. To delete commands from Cypress

C. To create new commands unrelated to existing ones

D. To speed up test execution by skipping commands

Solution

1. Step 1: Understand command overwriting

   Overwriting commands means changing how existing Cypress commands behave.

2. Step 2: Identify the purpose

   This lets you add features like logging or fix issues in commands.

3. Final Answer:

   To change or extend the behavior of built-in Cypress commands -> Option A

4. Quick Check:

   Overwriting = Change behavior [OK]

Hint: Overwriting means changing existing command behavior [OK]

Common Mistakes:

• Thinking overwriting deletes commands
• Confusing overwriting with creating new commands
• Assuming overwriting speeds up tests automatically

2. Which of the following is the correct syntax to overwrite the click command in Cypress?

easy

A. Cypress.Commands.add('click', (subject, options) => { return subject.click(options) })

B. Cypress.Commands.override('click', (originalFn, subject) => { originalFn(subject) })

C. Cypress.overwrite('click', (subject, options) => { return subject.click(options) })

D. Cypress.Commands.overwrite('click', (originalFn, subject, options) => { return originalFn(subject, options) })

Solution

1. Step 1: Recall Cypress overwrite syntax

   Use Cypress.Commands.overwrite with the command name and a function receiving originalFn.

2. Step 2: Check parameters and call

   The function must call originalFn(subject, options) to keep original behavior.

3. Final Answer:

   Cypress.Commands.overwrite('click', (originalFn, subject, options) => { return originalFn(subject, options) }) -> Option D

4. Quick Check:

   Overwrite syntax = Cypress.Commands.overwrite [OK]

Hint: Use Cypress.Commands.overwrite with originalFn first param [OK]

Common Mistakes:

• Using Cypress.Commands.add instead of overwrite
• Wrong method name like override
• Missing originalFn parameter

3. Given this overwrite code:

Cypress.Commands.overwrite('type', (originalFn, subject, text, options) => {
  cy.log(`Typing: ${text}`)
  return originalFn(subject, text, options)
})

What will happen when cy.get('input').type('hello') runs?

medium

A. It types 'hello' and logs 'Typing: hello' in the test runner

B. It types 'hello' but does not log anything

C. It throws an error because of wrong parameters

D. It logs 'Typing: hello' but does not type anything

Solution

1. Step 1: Analyze the overwrite function

   The overwrite logs the text being typed, then calls the original type command with all parameters.

2. Step 2: Understand the effect on cy.type

   When cy.get('input').type('hello') runs, it logs the message and types 'hello' into the input.

3. Final Answer:

   It types 'hello' and logs 'Typing: hello' in the test runner -> Option A

4. Quick Check:

   Overwrite logs then calls original = logs and types [OK]

Hint: Overwrite calls originalFn after logging to keep behavior [OK]

Common Mistakes:

• Assuming logging prevents typing
• Thinking parameters are incorrect
• Believing it throws an error

4. What is wrong with this overwrite code?

Cypress.Commands.overwrite('click', (subject, options) => {
  cy.log('Clicking element')
  return subject.click(options)
})

medium

A. It should use Cypress.Commands.add instead of overwrite

B. It misses the originalFn parameter required for overwriting

C. It uses cy.log which is not allowed inside overwrites

D. It calls subject.click instead of originalFn

Solution

1. Step 1: Check overwrite function parameters

   Overwrites must receive originalFn as the first parameter to call the original command.

2. Step 2: Identify missing parameter

   This code only has subject and options, missing originalFn.

3. Final Answer:

   It misses the originalFn parameter required for overwriting -> Option B

4. Quick Check:

   Overwrite needs originalFn first param [OK]

Hint: Overwrite must have originalFn as first parameter [OK]

Common Mistakes:

• Omitting originalFn parameter
• Confusing add with overwrite
• Thinking cy.log is disallowed

5. You want to overwrite the visit command to add a console log only when the URL contains 'admin'. Which overwrite code correctly implements this?

hard

A. Cypress.Commands.overwrite('visit', (url, options) => {
if (url.includes('admin')) {
console.log('Admin page visited')
}
return cy.visit(url, options)
})

B. Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
if (url.includes('admin')) {
console.log('Admin page visited')
}
return originalFn(options, url)
})

C. Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
if (url.includes('admin')) {
console.log('Admin page visited')
}
return originalFn(url, options)
})

D. Cypress.Commands.add('visit', (url, options) => {
if (url.includes('admin')) {
console.log('Admin page visited')
}
cy.visit(url, options)
})

Solution

1. Step 1: Use correct overwrite signature

   Overwrite must have originalFn as first parameter, then url and options.

2. Step 2: Call originalFn with correct argument order

   Call originalFn(url, options) to keep original behavior.

3. Step 3: Add conditional console log

   Check if url.includes('admin') and log message accordingly.

4. Final Answer:

   Cypress.Commands.overwrite('visit', (originalFn, url, options) => { if (url.includes('admin')) { console.log('Admin page visited') } return originalFn(url, options) }) -> Option C

5. Quick Check:

   Overwrite with originalFn and correct args [OK]

Hint: Always call originalFn with correct parameters in overwrite [OK]

Common Mistakes:

• Swapping url and options in call
• Using add instead of overwrite
• Omitting originalFn parameter