Cypress intercept all image requests with regex url

Question

I want to intercept all image GET requests and check if they have 200 status code. My try so far.

cy.intercept({ method: 'GET' , url: '/**/*.(png|svg|jpeg|webp|jpg)/'}).as('imageRequest')
cy.get('@imageRequest').its('response.statusCode').should('eq', 200)

It fails to intercept the image requests. I want one regex url to capture all image requests.

After suggested solutions I could wrote a test like Expect 5 images to be loaded on this page. Intercepts the 4 svg and 1 jpg request successfully.

  cy.intercept({
    method: 'GET',
    url: /\/.+\.(png|svg|jpeg|webp|jpg)/    // add the regex directly
  }).as('imageRequest')

....

  const imageCount = 5

  cy.get('[data-cy="profile::"]').click()
  
  for (let i = 0; i < imageCount; i++) {
    cy.wait('@imageRequest').then(({response}) => {
      expect(response.statusCode).to.eq(200);
    })
  }

But I still wonder how to put the test logic like if I have any image request with non 200 status code. Is there a failed image request?

score 1 · Answer 1 · answered Jul 05 '22 at 16:27

I'm afraid it is a bit tricky, and you are kind of limited by the way intercept behaves. Your command will match the first extension type requests, e.g. .png and will omit the others. A potential solution will be to listen to each extension type, but only if you are sure these extension types are registered/called, so:

const imageExtensionTypes = ['png', 'svg', 'jpeg', 'webp', 'jpg'];

imageExtensionTypes.forEach(extensionType => {
   cy.intercept(`/**/*.${extension}`).as(`${extensionType}_imageRequest`)
})
 ...

imageExtensionTypes.forEach(extensionType => {
   cy.wait(`@${extensionType}_imageRequest`).then(({ response }) => { 
      expect(response.statusCode).to.eq(200);
   })
})

This has worked. I can test if the page I am going to have 1 png 1 svg. — Erenn, Jul 07 '22 at 07:49

score 1 · Accepted Answer · answered Jul 05 '22 at 21:22

Using a regex with cy.intercept() is possible, but don't surround it with quotes.

Also you can't use **/* pattern which is part of the Glob pattern (a different way to specify wildcard patterns).

See Matching url

cy.intercept({ 
  method: 'GET', 
  url: /\/.+\.(png|svg|jpeg|webp|jpg)/            // add the regex directly
}).as('imageRequest')

// cy.visit() or button click()

cy.get('@imageRequest').its('response.statusCode').should('eq', 200)

If you already have the regex pattern specified as a string, you can convert it like this

const pattern = '\/.+\.(png|svg|jpeg|webp|jpg)'   // the pattern given as a string
const regex = new RegExp(pattern)                 // make a regex from the pattern
 
cy.intercept({ 
  method: 'GET', 
  url: regex
}).as('imageRequest')

Actually after trying both solutions this has better usage. With a loop to intercept images I can write a test like: `Expect 5 images to be loaded in this page/tab`. Added to question. — Erenn, Jul 07 '22 at 08:07
The loop to make 5x `cy.wait()` looks great. Not sure I understand the latest question - obviously you can ignore the status code if you wish. The intercept will catch good and bad status codes, if that's what you're asking. — Fody, Jul 07 '22 at 08:26

Cypress intercept all image requests with regex url

2 Answers2