Files

Examples of using files to represent data, read data or write data in Cypress, for a full reference of commands, go to docs.cypress.io

cy.fixture()

To load a fixture, use the cy.fixture() command.

<button class="fixture-btn btn btn-primary">Get Comment</button>
<div class="fixture-comment"></div>
<script>
  function getComment() {
    const root = 'https://jsonplaceholder.cypress.io'
    $.ajax({
      url: `${root}/comments/1`,
      method: 'GET',
    }).then(function (data) {
      $('.network-comment').text(data.body)
    })
  }

  $('.fixture-btn').on('click', function (e) {
    e.preventDefault()
    getComment(e)
  })
</script>

// Instead of writing a response inline you can
// use a fixture file's content.
cy.fixture('example.json').then((comment) => {
  cy.intercept('GET', 'comments/*', comment).as('getComment')
})

We have code that gets a comment when the button is clicked in scripts.js

cy.get('.fixture-btn').click()

cy.wait('@getComment')
  .its('response.body')
  .should('have.property', 'name')
  .and('include', 'Using fixtures to represent data')

You can also just write the fixture in the route

cy.intercept('GET', 'comments', { fixture: 'example.json' }).as(
  'getComment',
)

// we have code that gets a comment when
// the button is clicked in scripts.js
cy.get('.fixture-btn').click()

cy.wait('@getComment')
  .its('response.body')
  .should('have.property', 'name')
  .and('include', 'Using fixtures to represent data')

cy.fixture or require

You can use require to load JSON fixtures.

// we are inside the "function () { ... }"
// callback and can use test context object "this"
// "this.example" was loaded in "beforeEach" function callback
expect(
  this.example,
  'fixture in the test context',
).to.deep.equal(requiredExample)

// or use "cy.wrap" and "should('deep.equal', ...)" assertion
cy.wrap(this.example).should('deep.equal', requiredExample)

cy.readFile()

To read a file's content, use the cy.readFile() command.

// You can read a file and yield its contents
// The filePath is relative to your project's root.
cy.readFile('cypress/fixtures/example.json').then((json) => {
  expect(json, 'parsed json').to.be.an('object')
})

JSON files are automatically parsed, so if you want the raw text, you need to convert it back. For example, you can go through a Cypress.Buffer

cy.readFile('cypress/fixtures/example.json', null)
  .invoke('toString')
  .should('be.a', 'string')

Or by convert the object to a JSON string

cy.readFile('cypress/fixtures/example.json')
  .then(JSON.stringify)
  .should('be.a', 'string')

You can assert that the file does not exist

// file does not exist
cy.readFile('cypress/fixtures/file-not-found.json')
  .should('not.exist')
  // yields null
  .should('be.null')

If you are not sure if the file exists or not, disable the built-in existence assertion and check the yielded value

// file exists
cy.readFile('cypress/fixtures/example.json')
  .should(Cypress._.noop)
  .then((jsonMaybe) => {
    expect(jsonMaybe, 'file exists').to.be.an('object')
  })
// file does not exist
cy.readFile('cypress/fixtures/file-not-found.json')
  // disable the built-in existence assertion
  .should(Cypress._.noop)
  .then((jsonMaybe) => {
    expect(jsonMaybe, 'file does not exist').to.be.null
  })

Tip: using a no-op assertion to disable the built-in command assertion is very common in Cypress

// element might exist or not
cy.get('selector')
  .should(Cypress._.noop)
  .then(($elMaybe) => {
    // check the jQuery object yourself
  })
// file exists or not
cy.readFile('file path')
  .should(Cypress._.noop)
  .then((fileContentsMaybe) => {
    // check the argument yourself
  })

cy.writeFile()

To write to a file with the specified contents, use the cy.writeFile() command.

// https://on.cypress.io/writefile

// You can write to a file

// Use a response from a request to automatically
// generate a fixture file for use later
cy.request('https://jsonplaceholder.cypress.io/users').then(
  (response) => {
    cy.writeFile('cypress/fixtures/users.json', response.body)
  },
)
cy.fixture('users').should((users) => {
  expect(users[0].name).to.exist
})

// JavaScript arrays and objects are stringified
// and formatted into text.
cy.writeFile('cypress/fixtures/profile.json', {
  id: 8739,
  name: 'Jane',
  email: '[email protected]',
})

cy.fixture('profile').should((profile) => {
  expect(profile.name).to.eq('Jane')
})

Writing combined JSON object

Sometimes you want to read an object from a file, add new properties, and then write the result into a JSON file. Just appending to the file would append the text, breaking the JSON format. Instead you can read the file, update the JSON object, then write the combined result back.

// write the initial object
const filename = './person.json'
cy.writeFile(filename, { name: 'Joe' })
// let's add another property
cy.readFile(filename).then((person) => {
  person.dress = 'sharp'
  // write the merged object
  cy.writeFile(filename, person)
})
// verify the file has the combined object
cy.readFile(filename).should('deep.equal', {
  name: 'Joe',
  dress: 'sharp',
})

Writing combined JSON array

Similarly, to add new items to the array, read the array, add new items, then write the updated array back.

// write the initial list
const filename = './people.json'
cy.writeFile(filename, [{ name: 'Joe' }])
// let's add another person
cy.readFile(filename).then((people) => {
  people.push({ name: 'Mike' })
  // write the merged list
  cy.writeFile(filename, people)
})
// verify the file has the combined array
cy.readFile(filename).should('deep.equal', [
  {
    name: 'Joe',
  },
  {
    name: 'Mike',
  },
])