How to use mergeDeletedHeaders method in Cypress

When using the pattern cy.route(method, url, response), the response parameter is use to stub the call and return the supplied response to your app, see (route() - Arguments)

response (String, Object, Array)

Supply a response body to stub in the matching route.

Note that creating an overwrite of cy.route() will be hooking into the route configuration, not the capture of the route.

The pattern cy.route(options) has an onResponse option which can be used to console.log() the response, but cy.log() does not work there, probably because we invoke a command inside a command.

Cypress.log() can be used instead.

cy.route({
  url: 'http://example.com',
  method: 'GET',
  onResponse: (response => {
    const message = `The route '${response.url}' had a ${response.status} status code.`;
    const log = Cypress.log({
      displayName: 'Route debugging',
      message: message,
      consoleProps: () => {
        // return an object which will
        // print to dev tools console on click
        return {
          message: message,
        }
      }
    })
    log.finish();  // remove log spinner
  })
})

/*
  Command log output:

    ROUTE DEBUGGING
    The route 'http://example.com' had a 200 status code.

*/

it('Testing picture uploading', () => {
    cy.fixture('testPicture.png').then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: 'testPicture.png',
            mimeType: 'image/png'
        });
    });
});

Use cypress file upload package: https://www.npmjs.com/package/cypress-file-upload

Note: testPicture.png must be in fixture folder of cypress

It realy depends how the application under test handles requests. But I guess you use the adal libary.

With the help of https://mechanicalrock.github.io/2020/05/05/azure-ad-authentication-cypress.html it worked for me in a vuejs application using adal v1.

The important part is

   localStorage.setItem("adal.token.keys", `${Cypress.config("clientId")}|`);
    localStorage.setItem(`adal.access.token.key${Cypress.config("clientId")}`, ADALToken);
    localStorage.setItem(`adal.expiration.key${Cypress.config("clientId")}`, expiresOn);
    localStorage.setItem("adal.idtoken", ADALToken);

I actually did not request the token from azure but just copied in what I saw F12 tools as my token when using the application under test.

You can use tasks to execute node code. In your plugins.js create the task with the arguments you need, returning the calculated value:

  on('task', {
    // you can define and require this elsewhere
    getTicketBySummary('getTicketBySummary', { issues, summaryTitle }) {
      return issues.data.issues.filter(...);
    }
  })
}

In your test, execute the task via cy.task:

  it('returns an array containing a found ticket summary', () => {
    cy.task('getTicketBySummary', {
      issues: mockedTickets,
      summaryTitle: 'This is ticket number 1',
    }).then(result => {
      expect(result).eq(mockedTickets.data.issues[0]);
    })
  });

That being said, getTicketBySummary looks like a pure function that doesn't depend on fs. Perhaps separate helper functions that actually need node as that could avoid need cy.task. If you want to be able to import commonjs (require) via ES6 import/export you would usually need to setup build tools (babel/rollup/etc) to be able to resolve that effectively.

Hopefully that helps!

Is failing because you have this assertion .should('have.attr', 'target') before this invocation .invoke('removeAttr', 'target').

this will work

 cy.get(`${sitestovisit.searchBoxFormID} > form`)
   .invoke('removeAttr', 'target')

And.. if you need to see if the target attribute exist before deleting it I would do this.

  cy
      .get(`${sitestovisit.searchBoxFormID} > form`)
      .should('have.attr', 'target')

  cy
       .get(`${sitestovisit.searchBoxFormID} > form`)
       .invoke('removeAttr', 'target')

The difference is between attribute and property.

Under the hood cy.getByTestId('save').should('be.disabled') is checking that the element has property disabled. The standard button translates the attribute disabled into a corresponding property, so it passes the above assertion.

The custom button obviously does not have that behavior, so it might be difficult to treat custom-button the same as button.

One thing that works for your sample is

cy.getByTestId('save').should('have.attr', 'disabled')

This should work for all occurrences of custom-button (if my assumption about it's behavior is correct).

If you have trouble with standard button, you can check both:

cy.getByTestId('save').should($el => {
  return $el.attr('disabled').length > 0 || $el.prop('disabled').length > 0
})

You can make a custom assertion if that's a pain to code everywhere.

IMO using .find('button') isn't optimal, since it's an internal implementation of the custom-button.

Your problem stems from the fact that cypress commands are not promises, although behaving like promises.

I can think of two options:

• Try to refactor your test code to not use async/await, as these commands don't behave as expected when running your code on cypress (check this bug). Cypress already has a whole way of dealing with async code as it creates a command queue that always run sequentially and in the expected order. That means you could observe the effects of your async code to validate that it happened before moving forward on your test. For instance, if User.createUserOnServer must wait a successful API call, add code to your test that will wait for the request to complete, using cy.server(), cy.route() and cy.wait(), like below:

  cy.server();
  cy.route('POST', '/users/').as('createUser');
  // do something to trigger your request here, like user.createOnServer()
  cy.wait('@createUser', { timeout: 10000});
  

• Use another third-party library that changes how cypress works with async/await, like cypress-promise. This lib may help you to treat cypress commands as promises that you can await in your before code (read more about it in this article).

I want to extract the balance at the beginning of the test

Comparing two numeric values, use a .then() to remove the currency and convert.

The .then() command is a useful way to apply javascript transforms to a value in a chain of Cypress commands.

cy.get('[data-testid="wallet"]')   
  .invoke('text')                                 // get text  "100 kr"
  .then(text => +text.replace('kr', '').trim())   // remove currency and convert
  .then(initial => {

    // spend 25 kr

    cy.get('[data-testid="wallet"]')
      .invoke('text')
      .then(text => +text.replace('kr', '').trim())
      .should('eq', initial - 25)
})

Since some of the code is repeated (and you will want other similar tests), bundle it up in a custom command

Cypress.Commands.add('currency', (selector) => {
  cy.get(selector)   
    .invoke('text')                                  // get text
    .then(text => +text.replace('kr', '').trim())    // remove currency and convert
})


cy.currency('[data-testid="wallet"]')
  .then(initial => {

    // spend 25 kr

    cy.currency('[data-testid="wallet"]')
      .should('eq', initial - 25)
  })

Note .invoke('text') extracts all text in the selected element and child elements.

If there are more children of the wallet than just the value, e.g

<div data-testid="wallet">
  <div>Amount: </div>
  <div class="css-3ro84u">100 kr</div>
</div>

you can add a .filter() to pick the currency child

Cypress.Commands.add('currency', (selector) => {
  cy.get(selector)   
    .children()
    .filter((index, child) => child.innerText.includes('kr'))   // filter
    .invoke('text')                                
    .then(text => +text.replace('kr', '').trim())               // convert
})

To make sure the value of number is passed on to the type, you have to add a then, something like:

let number

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber')
      .then((res) => {
        number = res.response.body.numbers.id
      })
      .then(() => {
        cy.get('#someELement').type(number)
      })
  })
})

If you want to use the variable globally throughout the project, you can use the Cypress.env() method. Cypress Docs.

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber').then((res) => {
      cypress.env('number', res.response.body.numbers.id) //Sets Number
    })
    cy.get('#someELement').type(Cypress.env('number')) //Gets Number and types it
  })

  it('some different test', () => {
    cy.get('#someELement').type(Cypress.env('number')) //types the number
  })
})