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.