Cypress Fixtures: 5 Important Facts You Should Know

by

One of the best practices in test automation is separating the test data from the test files. This aspect is one of the primary requirement while designing test framework. Cypress helps us the abilities to separate the test data with Cypress Fixtures. In this topic, we will be discussing about Cypress fixtures with hands-on implementation and real time examples

Table of Contents

What is a fixture in Cypress?

Cypress Fixtures can be used source data from external files. Fixtures in Cypress help you to read from or write into files. One of the popular framework in test automation is Data-driven framework where we separate data from the test files. We usually keep the data in external file like Excel and read them using external libraries. Cypress provides us the same feature to read data from files.

Cypress provides us a folder called fixtures, where we can create JSON files and read data from it where we can read those files in multiple test files. We will store the data as key-value pair and access them.

How to use Cypress Fixtures in Tests?

We can access Cypress fixtures via the following syntax given below

cy.fixture(filePath)
cy.fixture(filePath, encoding)
cy.fixture(filePath, options)
cy.fixture(filePath, encoding, options)

We will understand the parameters that can be passed in fixtures

filepath – the path to where you have stored your test data

encoding – The encoding that are used while using a file. Some of the encodings are ascii, base64,hex,binary etc

options – In options, we can pass the timeout response. It is to specify the timeout to resolve cy.fixture()

How to read data from Fixtures in Cypress?

We will be defining the test data in a file under the fixture folder. We will be accessing the test data from the JSON file in the test script using Cypress fixtures.

Now, let us undertand an example for Cypress fixtures. We will be logging in the url using the username and password. So let us store the username and password values in a file.

Let us create a file named credentials.json under the fixture folder. We will be defining the variables in JSON format.

{
    "username" : "[email protected]",
    "password" : "admin",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}
fix 1
Fixture file example

Accessing the values from the Fixture file to the test file

Since we have defined our JSON values in the credentials.json file, we will see how we can access them in our test file using Cypress fixtures.

We will access the fixture data using the this keyword in the before hook

describe("Cypress Fixtures Example", function () {
    before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
    })
})

In the above example, we are accessing our JSON file via cy.fixture(‘credentials’). Since our JSON file name is credentials.json, we are passing the file name in cy.fixture(). Now we are using alias concept and defining our data as testdata. With the variable testdata, we can use the values of username and password in our test file

describe("Cypress Fixtures Example", function () {
    before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
    })
    it("Login with valid credentials", function () {
        cy.visit(this.testdata.adminUrl)
        cy.get('[id=Email]').clear()
        cy.get('[id=Email]').type(this.testdata.username)
        cy.get('[id=Password]').clear()
        cy.get('[id=Password]').type(this.testdata.password)
        cy.get('[type=submit]').click();
        cy.url().should('be.equal', this.testdata.adminUrl)
    });
});

As you can see above, in .type() we are passing the value from our credentials.json file as this.testdata.username. Similarly, for password we are accessing the value using this.testdata.password. For the url, we are using the same way as username and password.

When we run the test case, you can see the value getting printed in the dashboard. This way, we have executed our test case using Cypress Fixtures

fix 2
Fixture test result

Cypress Multiple Fixtures

In this section, we will understand how to use Cypress Fixtures with multiple fixture files.

If we want to use different fixture data for the same test file, for example, there are two set of credentials we need to verify for the login page, how can we access the files?

One way is to write multiple it blocks which will replicate the same code again and again. The other way, we can use Cypress fixtures to access different test data in the spec file. Let us see how we can achieve that using Cypress fixtures

We already have a fixture file called credentials.json.

{
    "username" : "[email protected]",
    "password" : "admin",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}

Now let us create another fixture file named userData.json where we will use different invalid username and password.

{
    "username" : "[email protected]",
    "password" : "user",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}

Now let us see how we can access the two different data in our test file.

We will refactor the same test file using the condition of using two different fixture files.

const testValueFixtures = [
    {
        "name": "credentials",
        "context": "1"
    },
    {
        "name": "userData",
        "context": "2"
    }
]
describe('Automation Test Suite - Fixtures', function () {
    //looping through both the fixtues 
    testValueFixtures.forEach((fixtureData) => {
        describe(fixtureData.context, () => {
            // accessing the test data from the fixture file
            before(function () {
                cy.fixture(fixtureData.name).then(function (testData) {
                    this.testData = testData;
                })
            })
            it("login", function () {
                cy.visit('https://admin-demo.nopcommerce.com/admin/')
                cy.get('[id=Email]').clear()
                cy.get('[id=Email]').type(this.testData.username)
                cy.get('[id=Password]').clear()
                cy.get('[id=Password]').type(this.testData.password)
                cy.get('[type=submit]').click();
                cy.url().should('be.equal', this.testData.adminUrl)
            })
        })
    })
})
fix 3
Accessing two fixture data example

Initially, we are creating a variable called testValueFixtures as an array where we are creating the context of two fixture files. In the first context, we are passing the name as ‘credentials‘ and the second as ‘userData‘ , as they represent our JSON file names where we have our value defined.

Secondly, we are looping through the both the fixture variables in describe block. And as we discussed previously, we are accessing the data in before block using .this()

The rest of the code is the same, where we are passing the data in the cy.get()

When we execute our test, it will run in two sets where the first case passes with valid credentials and the second fails due to invalid credentials

fix 4
Fixture using the first fixture file

As you can see above in the snapshot, the first test case has passed and it has entered the value from the first fixture file credentials.json

fix 5
Fixture example using the second fixture file

As you can see in the above screenshot, the test has failed and the values passed are from the second fixture file userData.json

You can also view how to write Cypress fixtures using the Page Object Model here