Execute tests on changing files using cypress.io

Question

Execute tests on changing files using cypress.io

I'm currently experimenting with using Cypress to test a large Angular application that I've developed. What I want to achieve is to load an expectation file into my test and then run the test based on this expectation file.

Despite trying different combinations of cy.readFile(), cy.fixture(), and even using axios to load the file via HTTP, I haven't been successful so far.

The main problem seems to be that I can't utilize these methods outside of the it() function, which prevents me from looping through the data to create the individual tests. I am attempting something similar to the following... Is this feasible in Cypress? Am I overlooking something obvious?

Assume my expectation file looks like this:

{
    "mainPage": [1, 2, 3],
    "otherPage": [4, 5, 6]
}

I aim for my code to load it and navigate through the various pages:

describe(`Testing the application`, function() {
    cy.readFile("path/to/expectation.json").then(function(expectation) {
        Object.keys(expectation).forEach(function(pageName) {
            it(`for page ${pageName}`, function() {
                gotoPage(pageName);
                var pageData = getDataFromPage();
                expect(pageData).to.equal(expectation[pageName]);
            })
        })
    })
})

To me, this seems like quite a common scenario, so I'm puzzled as to why it's proving to be challenging :)

javascript angularjs testing mocha.js cypress

Answer 1

Answer №1

My situation is quite similar, as I need to access an application configuration file located in the app assets folder.

I retrieve the file using a require statement like this:

const runtimeConfig = require('../../../src/data/my-config');

This method works effectively, allowing me to set expectations based on the file contents for testing purposes.

Therefore, your code implementation may resemble the following:

const expectation = require('path/to/expectation.json');

describe(`Testing the application`, function() {
  Object.keys(expectation).forEach(function(pageName) {
    it(`for page ${pageName}`, function() {
      gotoPage(pageName);
      var pageData = getDataFrompage();
      expect(pageData).to.equal(expectation[pageName]);
    })
  })
})

readFile()

When attempting to use cy.readFile(), an error message is displayed:

Uncaught Error: Cannot call "cy.readFile()" outside a running test.

To prevent this error, you can enclose the read operation within a before block:

let runtimeConfig;
before(function(){
  cy.readFile('./src/data/my-config.json').then( fileContents => {
    runtimeConfig = fileContents;
  })
})

Unfortunately, Cypress does not wait for the file read operation to finish before proceeding with the tests.

fixture()

Another approach attempted was using the fixture pattern demonstrated in example.spec.js:

context('Files', function(){
  beforeEach(function(){
    cy.visit('https://example.cypress.io/commands/files')
  })
  it('cy.fixture() - load a fixture', function(){
    // Instead of writing a response inline you can
    // connect a response with a fixture file
    // located in fixtures folder.

    cy.server()

    // https://on.cypress.io/fixture
    cy.fixture('example.json').as('comment')

    cy.route(/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('responseBody')
      .should('have.property', 'name')
      .and('include', 'Using fixtures to represent data')

However, incorporating this method for my config file by moving it to the /cypress/fixtures directory did not yield the desired results.

This process also seems somewhat convoluted – in essence, transforming a file read into a simulated route navigation to enable Cypress to pause for its completion.

Overall, this approach appears intricate and does not align well with the dynamic testing scenario outlined.

Answer 2

My situation is quite similar, as I need to access an application configuration file located in the app assets folder.

I retrieve the file using a require statement like this:

const runtimeConfig = require('../../../src/data/my-config');

This method works effectively, allowing me to set expectations based on the file contents for testing purposes.

Therefore, your code implementation may resemble the following:

const expectation = require('path/to/expectation.json');

describe(`Testing the application`, function() {
  Object.keys(expectation).forEach(function(pageName) {
    it(`for page ${pageName}`, function() {
      gotoPage(pageName);
      var pageData = getDataFrompage();
      expect(pageData).to.equal(expectation[pageName]);
    })
  })
})

readFile()

When attempting to use cy.readFile(), an error message is displayed:

Uncaught Error: Cannot call "cy.readFile()" outside a running test.

To prevent this error, you can enclose the read operation within a before block:

let runtimeConfig;
before(function(){
  cy.readFile('./src/data/my-config.json').then( fileContents => {
    runtimeConfig = fileContents;
  })
})

Unfortunately, Cypress does not wait for the file read operation to finish before proceeding with the tests.

fixture()

Another approach attempted was using the fixture pattern demonstrated in example.spec.js:

context('Files', function(){
  beforeEach(function(){
    cy.visit('https://example.cypress.io/commands/files')
  })
  it('cy.fixture() - load a fixture', function(){
    // Instead of writing a response inline you can
    // connect a response with a fixture file
    // located in fixtures folder.

    cy.server()

    // https://on.cypress.io/fixture
    cy.fixture('example.json').as('comment')

    cy.route(/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('responseBody')
      .should('have.property', 'name')
      .and('include', 'Using fixtures to represent data')

However, incorporating this method for my config file by moving it to the /cypress/fixtures directory did not yield the desired results.

This process also seems somewhat convoluted – in essence, transforming a file read into a simulated route navigation to enable Cypress to pause for its completion.

Overall, this approach appears intricate and does not align well with the dynamic testing scenario outlined.

Answer 3

Answer №2

Assume that you are working with data stored in an expectation.json file.
```
{
  "homePage": [5, 6, 7],
  "aboutPage": [8, 9, 10]
}
```

In order to generate test cases dynamically based on this data, your code could look something like the following:

const data = require("path/to/expectation.json");

describe('Testing the application', function() {
   Object.keys(data).forEach(function(page, i){
      it(`Test Case For: ${page}`, function() {
        cy.log(data[page])
      })
   })
})

https://i.stack.imgur.com/QQGLp.png

Answer 4

Assume that you are working with data stored in an expectation.json file.
```
{
  "homePage": [5, 6, 7],
  "aboutPage": [8, 9, 10]
}
```

In order to generate test cases dynamically based on this data, your code could look something like the following:

const data = require("path/to/expectation.json");

describe('Testing the application', function() {
   Object.keys(data).forEach(function(page, i){
      it(`Test Case For: ${page}`, function() {
        cy.log(data[page])
      })
   })
})

https://i.stack.imgur.com/QQGLp.png

Execute tests on changing files using cypress.io

Answer №1

Answer №2

Similar questions

Transferring data using AJAX between an AngularJS frontend and a Node.js backend

Can you explain the variance in these code snippets when implementing React's setState() function?

AngularJS has encountered an issue with a route resolve promise that has not been completely resolved

Does the Angular templateCache get shared across different applications? And does it stay persistent?

View an image in advance of uploading it and concealing any broken images

Issue with handling keypress event and click event in Internet Explorer

Get the large data file in sections

AngularJS can be used to display a webpage

Displaying country-specific API details (such as capital and currency) in a card container when selecting a country from a dropdown menu

GraphQL Shield throws an 'Unauthorized' error for a permitted mutation

top margin is functioning properly in Internet Explorer, but not in Google Chrome

What impact does the spread operator have on the efficiency of code execution

Store data in LocalStorage according to the selected value in the dropdown menu

React Context Matters: Troubles Unleashed

Could the issue with jQuery selector potentially be connected to AngularJS?

Restrict the PHP generated Json response to display only the top 5 results

A guide to sending props to a CSS class in Vue 3

Angular-indexedDB: Crafting personalized queries

Sharing an array with a child component using the @Input decorator

What steps should be taken to enable the "You and moderator can reply" feature in a bot when sending proactive messages to channels?