Custom plugin development in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Cypress plugin function.

Cypress

module.exports = (on, config) => {
  on('task', {
    [1]() {
      return null;
    }
  });
};

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

AmyCustomTask

BtaskFunction

ChandleTask

DcustomTaskHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a function name.

Forgetting to pass the handler function.

The 'on' function listens for events like 'task'. The second argument is an object containing the handler function named 'customTaskHandler'.

2fill in blank

medium

Complete the code to register a custom task that logs a message.

Cypress

module.exports = (on, config) => {
  on('task', {
    logMessage(message) {
      console.[1](message);
      return null;
    }
  });
};

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

Alog

Bprint

Cwrite

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'print' which is not a console method in JavaScript.

Using 'send' which is unrelated.

The correct method to output to the console is 'console.log'.

3fill in blank

hard

Fix the error in the plugin code to correctly return a value from a custom task.

Cypress

module.exports = (on, config) => {
  on('task', {
    getNumber() {
      return [1];
    }
  });
};

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

A42

Breturn 42

CPromise.resolve(42)

Dconsole.log(42)

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a raw value without Promise in async context.

Using console.log instead of returning a value.

Custom tasks must return a Promise or a value. Returning Promise.resolve(42) ensures asynchronous handling.

4fill in blank

hard

Fill both blanks to define and export a plugin that registers two custom tasks.

Cypress

module.exports = ([1], [2]) => {
  on('task', {
    taskOne() {
      return 'done';
    },
    taskTwo() {
      return 123;
    }
  });
};

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

Aon

Bconfig

Cevent

Dsettings

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of parameters.

Using incorrect parameter names.

The plugin function receives 'on' and 'config' as parameters to register events and access configuration.

5fill in blank

hard

Fill all three blanks to create a plugin that logs a message and returns a value asynchronously.

Cypress

module.exports = ([1], [2]) => {
  on('task', {
    async logAndReturn(value) {
      console.[3](`Value is: ${value}`);
      return Promise.resolve(value);
    }
  });
};

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

Aon

Bconfig

Clog

Dprint

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'print' instead of 'log' for console output.

Mixing up the order of parameters.

The plugin function parameters are 'on' and 'config'. The console method to output is 'log'.