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')

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',
  },
])