Background:

Hey all, I have a Cypress test I'm trying to write that should check whether an image URL has been called, after the image itself has been clicked on.

Currently I run the test and it finds the image URL on the first run but when it is re-run, the test fails to find it because the image has already been saved to the browser cache.

Is there a way to clear the browser cache before each Cypress test so that the image URL will always get called/found when I run the test?

Current solution:

it('should request webp image format for zoomed pdp image', () => {
  cy.intercept(
    '**/cdn/cs/set/assets/blt2bd0405f3cb027cb/5005769.jpg?fit=bounds&format=webply&quality=80&width=1600&height=1600&dpr=1.5'
  ).as('zoomedImageRequest');
  cy.gotoPage('product/transparent-red-sorting-case-to-go-5005769');
  cy.get(pdp.pdpImage).click();
  cy.wait('@zoomedImageRequest').then((xhr) => {
    const zoomedImageUrl = xhr.response.url;
    expect(zoomedImageUrl).to.contain('format=webply');
  });
});

Background:

Hey all, I have a Cypress test I'm trying to write that should check whether an image URL has been called, after the image itself has been clicked on.

Currently I run the test and it finds the image URL on the first run but when it is re-run, the test fails to find it because the image has already been saved to the browser cache.

Is there a way to clear the browser cache before each Cypress test so that the image URL will always get called/found when I run the test?

Current solution:

it('should request webp image format for zoomed pdp image', () => {
  cy.intercept(
    '**/cdn/cs/set/assets/blt2bd0405f3cb027cb/5005769.jpg?fit=bounds&format=webply&quality=80&width=1600&height=1600&dpr=1.5'
  ).as('zoomedImageRequest');
  cy.gotoPage('product/transparent-red-sorting-case-to-go-5005769');
  cy.get(pdp.pdpImage).click();
  cy.wait('@zoomedImageRequest').then((xhr) => {
    const zoomedImageUrl = xhr.response.url;
    expect(zoomedImageUrl).to.contain('format=webply');
  });
});

• javascript
• automated-tests
• cypress
• cypress-custom-mands
• cypress-intercept

Share Improve this question Follow edited Jul 11, 2022 at 22:41 Fody 32.4k33 gold badges3636 silver badges5858 bronze badges asked Jul 11, 2022 at 15:24 devDandevDan 5511 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Try clearing the network cache at the top of the test,

cy.wrap(Cypress.automation('remote:debugger:protocol', {
  mand: 'Network.clearBrowserCache',
}))

cy.intercept(...).as('zoomedImageRequest');

cy.gotoPage('product/transparent-red-sorting-case-to-go-5005769');
cy.get(pdp.pdpImage).click();
cy.wait('@zoomedImageRequest').then((xhr) => {
  const zoomedImageUrl = xhr.response.url;
  expect(zoomedImageUrl).to.contain('format=webply');
});

There is also a header that can be removed, but I found it not to be consistent

cy.intercept('...', req => {
  delete req.headers['if-none-match'];
})