How to identify if there is an actual issue in the code from cypress

Question

I am trying to write a test script using Cypress and in this scenario, there is an actual 500 server error in the system. But when I try to automate this using Cypress it does not give me any error and works fine. Is it because I am using fixtures? Could anyone tell me what is the procedure for handling these kinds of situations in Cypress?

Finally, I want cypress to throw an error if there is an actual error in the system and once it was fixed it should work fine again and the test should pass.

it('Add less than 400 (314) characters to value added service', function (){

  cy.intercept("POST", "**/api/update_profile/overview", {
    fixture: "supplier_profile_company_overview.json",
  }).as('submitCompanyOverview');

  cy.intercept("POST", "**/api/login/select_supplier_role", {
    fixture: "supplier_profile_submit_select_supplier_role.json",
  }).as('selectSupplierRole');

  cy.fixture('supplier_profile_sample_characters_314.json')
    .then((data)=> {
      cy.xpath('(//div[@class=\'v-input__slot\'])[5]')
        .type(data.description);
    });

  cy.xpath('//button[@class=\'md-button save-btn md-theme-default\']')
    .click();
  cy.contains('Company Information Updated').should('be.visible');

  cy.wait('@submitCompanyOverview').then(({response}) =>{
    expect(response.statusCode).to.eq(200);
  });
  cy.wait('@selectSupplierRole').then(({response}) =>{
    expect(response.statusCode).to.eq(200);
  });
});

score 2 · Answer 1 · answered Mar 01 '23 at 20:36

The usual procedure is to separate front end and back end tests.

If you try to us fixture and also test for status 500 in the same test, it will be extremely confusing when you look at it in a months time and try to debug.

Instead, have a new test to catch status 500 result from the server.

Back end

context('server tests', () => {

  it('checks update profile', () => {

    cy.fixture('supplier_profile_sample_characters_314.json').then((data)=> {

      cy.request("POST", "**/api/update_profile/overview", {
        data.description
      })
      .then(({response}) =>{
        expect(response.statusCode).to.eq(200);
      })
  })
})

Front end

it('Add less than 400 (314) characters to value added service', function (){

  cy.intercept("POST", "**/api/update_profile/overview", {
    fixture: "supplier_profile_company_overview.json",
  }).as('submitCompanyOverview');

  cy.intercept("POST", "**/api/login/select_supplier_role", {
    fixture: "supplier_profile_submit_select_supplier_role.json",
  }).as('selectSupplierRole');

  cy.fixture('supplier_profile_sample_characters_314.json')
    .then((data)=> {
      cy.xpath('(//div[@class=\'v-input__slot\'])[5]')
        .type(data.description);
    });

  cy.xpath('//button[@class=\'md-button save-btn md-theme-default\']')
    .click();
  cy.contains('Company Information Updated').should('be.visible');
})

score 0 · Accepted Answer · answered Mar 01 '23 at 15:00

But when I try to automate this using Cypress it does not give me any error and works fine. Is it because I am using fixtures?

You are not receiving errors from your backend because you are using cy.intercept(), which will return the response that you specify. In this case, you are returning the fixture, and because you did not provide a status code, it defaults to a 200 response.

Could anyone tell me what is the procedure for handling these kinds of situations in Cypress?

This depends on your requirements and what you are trying to test. If your priority is to validate that the backend and frontend are working together correctly, you would probably want to go without the cy.intercept()s and let the tests fail when the backend does not return successful responses. If your priority is to validate the UI of the frontend under some condition, then using cy.intercept() to force that state is probably the preferred method.

I want cypress to throw an error if there is an actual error in the system and once it was fixed it should work fine again and the test should pass.

There are two clear options I see for accomplishing this - you can remove the intercepts, which will cause Cypress to fail tests whenever the backend response is not a successful response, or you can do a cy.intercept() that returns fixture data, but only if the real response from the backend is successful.

cy.intercept({
  method: "POST", 
  url: "**/api/update_profile/overview"
}, (req) => { // don't provide a response yet
  req.continue((res) => { // req.continue sends the request to the backend
    if (res.statusCode < 400) { // checks if we get a 2XX or 3XX status code
      // If successful statusCode, send our fixture instead of actual response
      res.send({ fixture: "supplier_profile_company_overview.json" });
    } else {
      // If non-2XX/3XX statusCode, send the response as we receive it
      res.send(res.statusCode, res.body, res.headers)
    }
  });
});

How to identify if there is an actual issue in the code from cypress

2 Answers2