Creating Fixtures from Response Bodies dynamically using Cypress Exec(), a practical approach

Suresh Krishnan Nair — Thu, 04 Apr 2024 16:49:42 +0000

cy.exec() is used to execute shell commands directly within your Cypress tests. This feature enables you to interact with the underlying operating system, perform tasks such as working with the file system, running build scripts, seeding your test database, starting processes, killing processes or executing any other command-line operations needed during your tests.

In this article, we explore how the cy.exec() command can be utilized to handle test fixtures effectively by creating fixtures from response bodies dynamically, along with examples and best practices.

Understanding Test Fixtures: Test fixtures are pre-defined data used as inputs for executing tests. These fixtures would include JSON files, database snapshots, or any other data source required for test scenarios.

Use Case: Creating Fixtures from API Responses

In this scenario ,we are using exec() to write to a file to create a fixture from response body

cy.intercept('POST', '/comments').as('postComment')
cy.get('.add-comment').click()
cy.wait('@postComment').then(({ response }) => {
//execute shell command 
 cy.exec(
    `echo ${JSON.stringify(response.body)} >cypress/fixtures/comment.json`
  )
  cy.fixture('comment.json').should('deep.eq', response.body)
})

//Reads data from comment.json fixture
cy.fixture('comment.json').then((commentData) => {
      // Use the commentData in your test
      console.log(commentData);
      // Add assertions or other test logic here
    });

Lets breakdown the command cy.exec()

The backticks `` are used for template literals in JavaScript, allowing embedded expressions.
The echo command is used to output text.
${JSON.stringify(response.body)} is an embedded expression that converts the response.body object into a JSON string.
> is a shell commands, used to redirect the output of the preceding command to a file.
cypress/fixtures/comment.json specifies the path and filename where the output of the echo command will be written.

This approach helps to verify the intercepted data from the API against the UI, or for other assertions .

Usage Considerations:

Ensure that the response.body object contains valid JSON data. Otherwise, the JSON.stringify() function may throw an error.
Keep in mind that using cy.exec() to write fixture files can be useful for capturing dynamic or changing data during test runs, but it may introduce dependencies on the local environment or require additional clean up steps in test suites.

I would like to acknowledge the Cypress documentation for its comprehensive resources and helpful examples that enriched the content of this article.

Understanding Callback Functions in TypeScript: A Beginner’s Guide

Suresh Krishnan Nair — Sat, 30 Mar 2024 16:53:38 +0000

What are Callback Functions?

Callback functions are functions passed as arguments to other functions and executed at a later time or after a specific event. They allow us to define behavior that should occur once a certain task is completed. Imagine them as “callbacks” to let you know when something has finished.

Exploring the Structure of a Callback Function:

Higher-Order Function: The function that takes a callback function as an argument.
Callback Function: The function passed as an argument to the higher-order function.
Asynchronous Task: The task that takes time to complete (e.g., fetching data from a server).
Completion Event: Triggered when the asynchronous task is finished.

Illustrating with a Diagram:


   +-----------------------------+
   |   Higher-Order Function    |
   +-----------------------------+
   |                             |
   |    +----------------------+ |
   |    |   Callback Function  | |
   |    +----------------------+ |
   |    |                      | |
   |    |   (Task Completed)   | |
   |    |                      | |
   |    +----------------------+ |
   |                             |
   +-----------------------------+
            |
            |
   +-----------------------------+
   |   Asynchronous Task        |
   +-----------------------------+
            |
            |
   +-----------------------------+
   |   Completion Event         |
   +-----------------------------+

Example in TypeScript:

function fetchData(callback: (data: any) => void) {
  // Simulate fetching data asynchronously
  setTimeout(() => {
    const data = 'Sample data 1';
    callback(data);
  }, 5000);

  console.log("Initiated "); // Added log message to see when fetchData is initiated

  // Simulate fetching more data asynchronously after a delay
  setTimeout(() => {
    const data = 'Sample data 2';
    callback(data);
  }, 6000);
}

// Usage of the callback function
fetchData((data) => {
  console.log('Data received:', data);
});

Output:

Initiated
Data received: Sample data 1
Data received: Sample data 2

Explanation:

Let’s break down the provided TypeScript example into its components:

Higher-Order Function: fetchData

fetchData is the higher-order function in this example.
It takes a callback function as a parameter.
The callback function represents the behavior that should occur once the data is fetched.

Callback Function Parameter: (callback: (data: any) => void)

The callback function parameter is defined in the fetchData function signature.
It accepts a function as an argument, which takes one parameter data of type any and returns void.
This parameter is a function reference that will be invoked when the data fetching operation completes.

Asynchronous Task: setTimeout

Inside the fetchData function, there are two setTimeout calls, which simulate asynchronous tasks.
These asynchronous tasks represent the fetching of data from an external source.
Each setTimeout call has a delay before executing its callback function, mimicking the time taken to fetch the data.

Completion Event: Callback Invocation

The completion event occurs when the setTimeout functions execute their callback functions.
Inside each setTimeout callback function, the callback parameter (the provided callback function) is invoked with the fetched data as an argument.

Usage of the Callback Function:

The fetchData function is called with a callback function as an argument.
This callback function defines what should be done with the fetched data.
In this example, the callback function logs the received data to the console.

Execution Flow:

The fetchData function is called with a callback function as an argument.
Inside fetchData, the asynchronous tasks (data fetching) are initiated using setTimeout.
After the specified delay, each setTimeout executes its callback function.
Inside each callback function, the provided callback function (callback) is invoked with the fetched data.
The provided callback function handles the received data as specified in its definition.

Overall, this example illustrates how callback functions can be used to handle asynchronous operations, allowing us to define behavior that occurs once the asynchronous tasks are completed.

Disclaimer: “This article was created with the help of AI”

DEV Community: Suresh Krishnan Nair

Creating Fixtures from Response Bodies dynamically using Cypress Exec(), a practical approach

Understanding Callback Functions in TypeScript: A Beginner’s Guide