Recommended way to import function into a spec and share value between multiple tests in cypress?

Question

I need to access a "random string generator function" in my spec file and call the function and be able to access the returned random value in all the tests within the spec file.

What would be the recommended way to do this?

Edit: bit more about what I want to do :

at the start of the spec I generate a random number, us that as id to create an entry in 1st test search for it and edit it in the 2nd test delete it in the 3rd ...

Answer 1

It's even easier if your random function is synchronous, you can just add it to the Cypress object and use it tests directly.

Place this in cypress/support/index.js or at the top of the test.

Cypress.userName = () => `User-${Math.floor(Math.random() * 100000)}`;

In the test

describe('add, edit, delete a User', () => {

  const userName = Cypress.userName(); // same random name for all tests in this block

  it('add a user', () => {
    cy.get('.username').type(userName);
    cy.get('Submit').click();
  })

  it('search for the user', () => {
    cy.get('.search').type(userName);
    cy.get('.found-user').should('contain', userName);
  })

  it('rejects an unknown user', () => {
    const anotherUser = Cypress.userName(); // new name provided here
    cy.get('.search').type(anotherUser);  
    cy.get('.found-user').should('not.contain', anotherUser);  // not added yet
  })

})
  

As a bonus you don't have to be extra careful to use it('...', function() { all the time, it works with arrow function format it('...', () => {.

Answer 2

You can get random strings that are more appropriate to the usage by using Faker.js.

Sample taken from this article Using Faker to generate data for your Cypress tests

/cypress/plugins/index.js

const faker = require("faker");

module.exports = (on, config) => {
    on("task", {
        freshUser() {
            user = {
                username: faker.name.firstName(),
                email: faker.internet.email(),
                password: "SuperSecret",
            };
            return user;
        },
    });
};

In the test

/// <reference types="Cypress" />

let user;

describe("Docket Post Test", () => {
    before(function () {
        cy.task("freshUser").then((object) => {
            user = object;
        });
    });

    it("Register a new user", () => {
        cy.apiRegister({
            username: user.username,
            email: user.email,
            password: user.password,
        });
    });
});

Kevin's full repo is here.

Answer 3

I had a similar requirement for my Tests, the way I am doing it is:

First I created a file data.json under the fixtures folder with the content:

username: "user-102020"

Then I am generating my random string and then saving this value in the fixtures file. I am writing all this in the before() block of my first test since I want to pass on the same random value to all my tests.

before(function() {
  const uniqueUsername = `User-${Math.floor(Math.random() * 100000)}`

  cy.readFile("cypress/fixtures/data.json", (err, data) => {
    if (err) {
      return console.error(err);
    };
  }).then((data) => {
    data.username = uniqueUsername
    cy.writeFile("cypress/fixtures/data.json", JSON.stringify(data))
  })
})

Then in the remaining tests, I am using the username from the data.json fixtures file. With every run, a new random value will be generated and this will be replaced in the data.json file and then used throughout.

describe('Random Test', function() {
  before(function() {
    cy.visit(url)
    cy.fixture('data').then(function(data) {
      this.data = data
    })
  })

  it('Validate successful Login', function() {
    cy.get('#txtUsername').type(this.data.username)
    //Rest of the test
  })
})

================

Now as per your question:

Create a custom command. Go to cypress/support/commands.js and write:

Cypress.Commands.add('updateRandomValueToFixtures', (uniqueUsername) => {
  cy.readFile("cypress/fixtures/data.json", (err, data) => {
    if (err) {
      return console.error(err);
    };
  }).then((data) => {
    data.username = uniqueUsername
    cy.writeFile("cypress/fixtures/data.json", JSON.stringify(data))
  })
})

Create a file data.json under the fixtures folder with the content:

username: "user-102020"

For the first test use:

//Generate a random value    
const uniqueUsername = `User-${Math.floor(Math.random() * 100000)}`

//Update the random value in the fixture file
cy.updateRandomValueToFixtures(uniqueUsername)

//Use the uniqueUsername to search
    describe('Random Test', function() {
      before(function() {
        cy.fixture('data').then(function(data) {
          this.data = data
        })
      })
    
      it('Some test', function() {
        //this.data.username has the random value, use it to search
      })
    })

For Second Test use:

//Edit previously created random value and save it in a variable
const uniqueUsername = newValue

//Update the random value in the fixture file
cy.updateRandomValueToFixtures(uniqueUsername)

For the third test:

describe('Random Test', function() {
  before(function() {
    cy.fixture('data').then(function(data) {
      this.data = data
    })
  })

  it('Some test', function() {
    //this.data.username has the updated random value, use it to delete
  })
})