What is the difference between fixtures and support files in Cypress? Which one is better to use?

Question

Both fixtures and support files store static data, right? What is the best recommended to use?

Answer 1

A use case for fixtures could be to put static data that is used during a test, such as a JSON body.

Say you need to store some request body JSON that you're going to be using a lot. It won't change much and doesn't need to be changed by tests. requestBody.json could be stored in fixtures and then in the test spec the .json could be referenced and then used in a test. Files in cypress/fixtures/ are not meant to change or be dynamic in the tests:

const requestBody = require("../fixtures/requestBody.json");

describe('Test', () => {
  it('should do something', () => {
    cy.request({
      method: 'GET',
      url: myUrl,
      body: requestBody
    })....

---

A use case for support could be to define a Custom Command in cypress/support/commands.js .

Say you need to send a header with some data that you don't want to expose, such as an Authorization key. You also need to hardcode the GET method, but you want to leave the url and body to be dynamic. A Custom Command could be defined in cypress/support/commands.js :

Cypress.Commands.add('getRequestWithSecret', (url, body) => {
    cy.request({
        method: 'GET',
        headers: {
            Authorization: mySecretKey
        },
        url: url,
        body: body
    });
});

and then this Custom Command can be used in the code. You can see in the example below there is a mixture of static and dynamic content. The fixture being imported, as well as the Custom Command. getRequestWithSecret is dynamic because it is accepting inputs. cypress/support/index.js and commands.js get loaded before the test spec starts. This is pretty useful because it means that you can add scripts that can run before tests start. So these don't need to be imported into your tests at runtime.

const requestBody = require("../fixtures/requestBody");

describe('Test', () => {
  it('should do something', () => {
    cy.getRequestWithSecret({
      url: myUrl,
      body: requestBody
    })....

Answer 2

Both have different purposes. Fixtures are used as external pieces of static data that can be used by your tests whereas the support file is a great place to put reusable behavior such as custom commands or global overrides that you want to be applied and available to all of your spec files. For more better understanding, I recommend you to read the cypress official docs https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Support-file

Answer 3

Fixture is static data that is needed for tests - usually we put images, JSON files, and some downloadable fixtures there.

In support files we add/customize commands, and import Plugins and other dependencies needed for the test. It can also be used to make some initial setup, like before/beforeAll functions, but this part is better made in configuration files or directly in the tests.