Cypress: Ability to tell Cypress we're on retina screen and browser render accordingly.

[ChrisBAshton]

Current behavior:

Given HTML like this:

<figure>
    <picture>
        <source media="(min-width: 1000px)"
         srcset="https://placeimg.com/750/500/any, https://placeimg.com/1500/1000/any 2x">
        <img alt="" src="http://example.com/some/fallback/image">
    </picture>
</figure>

If we set Cypress viewport to a large size:

cy.viewport(2880, 1800);

...and we then get the computed image of the srcset:

cy.get(`figure img`).then($image => {
    expect($image[0].src).to.equal('https://placeimg.com/1500/1000/any');
});

I would expect the large viewport size to deliver the high-res image (https://placeimg.com/1500/1000/any), but I'm actually getting the low-res image (https://placeimg.com/750/500/any). Same happens if I set it to macbook-15.

Desired behavior:

There should be a way to tell Cypress we're on a retina screen, and the browser should render accordingly.

Steps to reproduce:

Write any HTML that offers a retina option, and try to test for the retina option being delivered. It currently doesn't seem possible in Cypress.

Versions

Cypress: 3.0.1, OSX, Headless

[brian-mann]

Screen resolution unfortunately doesn't have anything to do with DPI. You can have either combination, both high resolutions or low resolutions and still have 1x/1.5x/2x/3x DPI.

There's ways that the chrome debugger protocol enables you to change the DPI via the mobile device overrides settings, but they are the only browser that enables you to do that.

[Vandivier]

I want to thumb up one of the above comments to support the feature, but I also want to be clear about which feature we are discussing.

I think it would be great for Cypress to allow dpi configuration! I'm not so interested in specifying whether a screen is retina.