Custom plugin development in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a Cypress custom command plugin

What will be the output in the Cypress test runner console after running this custom command?

Cypress

Cypress.Commands.add('logMessage', (msg) => {
  cy.log(`Message: ${msg}`)
  return msg.length
})

describe('Test logMessage command', () => {
  it('logs and returns length', () => {
    cy.logMessage('hello').then(length => {
      cy.log(`Length is ${length}`)
    })
  })
})

A Logs 'Length is 5' only, no message logged

B Logs 'Message: hello' and then logs 'Length is 5'

C Throws an error because custom command returns a number directly

D Logs 'Message: hello' only, no length logged

💡 Hint

Remember that Cypress commands are asynchronous and return chainable objects.

The custom command logs the message and returns the length of the string. The test then logs the length, so both logs appear in order.

❓ assertion

intermediate

Correct assertion for a plugin-modified DOM element

A Cypress plugin modifies a button's text to 'Clicked' after a click. Which assertion correctly verifies this change?

Cypress

cy.get('button#submit').click()
// Which assertion verifies the text change?

A cy.get('button#submit').should('have.value', 'Clicked')

B cy.get('button#submit').should('contain', 'Clicked')

C cy.get('button#submit').should('have.text', 'Clicked')

D cy.get('button#submit').should('have.attr', 'text', 'Clicked')

💡 Hint

Check the difference between text content and attributes.

The button's visible text changes, so 'have.text' is the correct assertion. 'contain' works but is less strict. 'have.value' and 'have.attr' check different properties.

🔧 Debug

advanced

Identify the cause of plugin command failure

A custom Cypress plugin command fails with 'TypeError: cy.wrap is not a function'. What is the most likely cause?

A The plugin tries to use cy.wrap inside the plugins/index.js file where cy is not available

B The custom command is defined outside the Cypress.Commands.add block

C The plugin file does not import Cypress correctly, so cy is undefined

D The test file forgot to import the plugin command

💡 Hint

Remember where Cypress commands can be used vs plugin code.

The plugins/index.js runs in Node environment without Cypress commands. Using cy.wrap there causes this error.

🧠 Conceptual

advanced

Purpose of Cypress plugin file

What is the main purpose of the Cypress plugins file (cypress/plugins/index.js)?

A To write test cases and assertions

B To define custom Cypress commands that run in the browser

C To style the Cypress test runner UI

D To modify or extend the Node process that runs Cypress tests, like handling tasks or environment variables

💡 Hint

Think about what runs in Node vs browser in Cypress.

The plugins file runs in Node and is used to extend Cypress behavior outside the browser, like tasks or config.

❓ framework

expert

Correct way to register a custom task in Cypress plugin

Which code snippet correctly registers a custom task named 'readFile' in Cypress plugins file to read a file asynchronously?

Cypress

const fs = require('fs').promises;

module.exports = (on, config) => {
  // Register tasks here
}

A

on('task', {
  readFile: async (path) => {
    return await fs.readFile(path, 'utf8')
  }
})

B

on('task', {
  readFile: (path) => {
    fs.readFile(path, 'utf8')
  }
})

C

on('task', {
  readFile(path) {
    fs.readFileSync(path, 'utf8')
  }
})

D

on('task', {
  readFile(path) {
    return fs.readFile(path, 'utf8')
  }
})

💡 Hint

Remember tasks can return promises and should be async if needed.

Option A correctly defines an async function returning a promise from fs.readFile. Option A misses async/await, D misses return, C uses sync method without return.

Practice

1. What is the main purpose of creating a custom plugin in Cypress?

easy

A. To add new commands or tasks that extend Cypress functionality

B. To change the browser's default behavior during tests

C. To write test cases in a different programming language

D. To speed up the execution of all tests automatically

Solution

1. Step 1: Understand what plugins do in Cypress

   Plugins allow adding new commands or tasks that Cypress does not provide by default.

2. Step 2: Differentiate from other options

   Changing browser behavior or writing tests in other languages is not the role of plugins. Speeding up tests automatically is not guaranteed by plugins.

3. Final Answer:

   To add new commands or tasks that extend Cypress functionality -> Option A

4. Quick Check:

   Plugins extend Cypress features = D [OK]

Hint: Plugins add new commands or tasks to Cypress [OK]

Common Mistakes:

• Thinking plugins change browser behavior directly
• Confusing plugins with test case languages
• Assuming plugins automatically speed up tests

2. Which file is typically used to define custom plugins in a Cypress project?

easy

A. cypress/plugins/index.js

B. cypress/support/commands.js

C. cypress/integration/spec.js

D. cypress.json

Solution

1. Step 1: Identify the plugin file location

   Custom plugins are defined in the cypress/plugins/index.js file where Node.js code runs.

2. Step 2: Differentiate from support and config files

   support/commands.js is for custom commands in browser tests, integration/spec.js is for test specs, and cypress.json is config.

3. Final Answer:

   cypress/plugins/index.js -> Option A

4. Quick Check:

   Plugins file = C [OK]

Hint: Plugins go in cypress/plugins/index.js file [OK]

Common Mistakes:

• Confusing plugins file with support commands file
• Choosing test spec files for plugins
• Selecting config file for plugin code

3. Given this plugin code snippet in cypress/plugins/index.js:

module.exports = (on, config) => {
  on('task', {
    logMessage(message) {
      console.log(message)
      return null
    }
  })
}

What happens when the test calls cy.task('logMessage', 'Hello')?

medium

A. The test fails because 'logMessage' is not a valid Cypress command

B. The message 'Hello' is printed in the browser console, and the task returns undefined

C. The message 'Hello' is printed in the Node.js console, and the task returns null

D. Nothing happens because tasks cannot receive arguments

Solution

1. Step 1: Understand the plugin task definition

   The plugin defines a task named 'logMessage' that logs the message to the Node.js console and returns null.

2. Step 2: Understand cy.task behavior

   Calling cy.task('logMessage', 'Hello') sends 'Hello' to the plugin task, which logs it in Node.js, not browser, and returns null.

3. Final Answer:

   The message 'Hello' is printed in the Node.js console, and the task returns null -> Option C

4. Quick Check:

   cy.task logs in Node.js console = A [OK]

Hint: cy.task runs plugin code in Node.js, not browser console [OK]

Common Mistakes:

• Thinking console.log prints in browser console
• Assuming tasks cannot take arguments
• Confusing tasks with custom commands

4. Identify the error in this plugin code snippet:

module.exports = (on, config) => {
  on('task', {
    multiplyNumbers(a, b) {
      return a * b
    }
  })
}

And select the correct fix.

medium

A. No error, the code is correct as is

B. Change the task to accept a single argument object like {a, b} instead of two arguments

C. Replace 'on' with 'off' to register the task properly

D. Return a Promise instead of a direct value

Solution

1. Step 1: Understand how Cypress tasks receive arguments

   Cypress tasks accept only one argument. Multiple arguments must be wrapped in an object.

2. Step 2: Identify the error and fix

   The function multiplyNumbers expects two arguments, but Cypress will pass only one. Fix by accepting a single object with properties a and b.

3. Final Answer:

   Change the task to accept a single argument object like {a, b} instead of two arguments -> Option B

4. Quick Check:

   Tasks accept one argument object = B [OK]

Hint: Tasks get one argument; use object to pass multiple values [OK]

Common Mistakes:

• Defining task functions with multiple parameters
• Using 'off' instead of 'on' to register tasks
• Thinking tasks must return Promises always

5. You want to create a custom plugin that reads a JSON file from disk and returns its content to your test. Which approach correctly implements this plugin task?

hard

A. Use console.log to print file content and return undefined

B. Use cy.readFile inside the plugin task to read the file asynchronously

C. Use browser fetch API inside the plugin task to get the file content

D. Use Node.js fs.readFileSync inside the plugin task and return parsed JSON

Solution

1. Step 1: Understand plugin environment

   Plugins run in Node.js, so Node.js modules like fs can be used to read files synchronously or asynchronously.

2. Step 2: Choose correct method to read file

   cy.readFile is a test command, not available in plugins. Browser fetch is not available in Node.js plugin context. Using fs.readFileSync and returning parsed JSON is correct.

3. Final Answer:

   Use Node.js fs.readFileSync inside the plugin task and return parsed JSON -> Option D

4. Quick Check:

   Plugins use Node.js fs to read files = A [OK]

Hint: Use Node.js fs module in plugins, not cy commands [OK]

Common Mistakes:

• Trying to use cy commands inside plugins
• Using browser APIs in Node.js plugin code
• Returning undefined instead of file content