Testing how the browser loads images depending on viewport
The test in cypress/e2e/spec.cy.js observes the images loaded by the <picture> element to confirm that the mobile version is requested for mobile viewport. The desktop viewport causes the page to request the desktop image version.
The loaded image resolution is confirmed using naturalWidth property.
cy.intercept('elva-480w-close-portrait.jpg').as('mobileImage')
cy.visit('responsive-images/picture.html')
// the mobile image was loaded
cy.wait('@mobileImage')
// check the native resolution of the loaded image
cy.get('img').should('have.prop', 'naturalWidth', 480)The folder responsive-images copied from mdn/learning-area. The responsive HTML markup is described at MDN: Responsive images