Retina screenshots with half the resolution

[joaoffalcao]

Hi,

I'm trying to use BackstopJS for testing my app and I'm facing a retina issue. Right now, on my backstop.json I define my viewports but, after generating my references I obtain screenshots with half the resolutions that I'd defined (comparing to the chrome emulator) because I'm running this tests on a MacBook. Have you ever had this issue? How do you solved it?

Regards,
João Falcão

[garris]

Please post examples of your BackstopJS config files and output. Thanks.

[raypatterson]

Hi,

Curious about this issue before I start troubleshooting.

Is the expectation that the images would match the screen pixel density?

I am wondering if this is related to:
ariya/phantomjs#10964

Thanks

[joaoffalcao]

I'm still trying to fix this problem.
After some tests, I'm thinking that the issue isn't the retina display because my app uses a different view for tablet and phone and my saved screenshots are from tablet, so maybe that's the problem. Maybe I will need to change the user agent for both cases.

[joaoffalcao]

After tries, I figured out that the problem was, in fact, the user agent and not the retina. So, I will close this issue.

[raypatterson]

Hope I'm not hijacking your issue @joaoffalcao, but would you mind sharing your solution for generating retina images? I don't understand how you are changing the user agent to generate retina images.

Thanks

[joaoffalcao]

@raypatterson actually, I'm not setting the user agent, on my app I have to set a class on the html, so on onReady.js I did something like

casper.then(function(){
        if (viewport.name.indexOf('phone') != -1) {
            casper.evaluate(function () {
                angular.element(document.getElementsByTagName('body')).addClass('phone');
            });
        };
    });

I'd tried to set the user agent onBefore.js but it didn't worked.

[garris]

@joaoffalcao Glad you were able to figure it out! Cheers.

[raypatterson]

@joaoffalcao ok thanks for explaining!