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

Error with AngularJS Routing

Tips for updating the display after making an angular $http request using rxjs Observables

Is there a way to stop vue-panZoom from functioning temporarily?

What steps can I take to troubleshoot issues when creating a React app?

Sending a parameter to a form within Edge Animate

Baffled by the data visualization produced by Google Chart using information from

How can AngularJS be used to enforce a numeric format (including digits and decimal points) in a textfield?

Trouble with closing windows in the in-app browser on Android devices

Getting a specific index from an array using the Angular ng-repeat Directive: A step-by-step guide

Effective approach for incorporating external stylesheets and additional resources in Vue

The AWS Lambda function in Node.js encountered an internal server error

Generate an interactive pie chart with visually appealing animations using jQuery, without any actual data

Tips for creating a website with an integrated, easy-to-use editing tool

Manipulating Hyperlinks outside the Angular JS applicationIn certain cases, Angular JS

Difficulty of combining forEach with findById in mongoose

Angular promise did not assign a value to a variable

Changing an array into an object in JavaScript without rearranging the keys

Show session in HTML using ng-click after reloading the page

Is getElementById() returning null?

Issue with Ajax reload functions malfunctioning