1

I am relatively new to using PhantomJS, and would like to take screenshots of our website to be diffd later on. What I am curious to know is whether or not changing the user-agent setting will affect the perspective of the screenshot (i.e. will the image appear different)? - If it will not, how would you suggest me being able to take screenshots emulating different browsers (hopefully using Phantom, but open to suggestions)?

// PhantomJS Code
page = require('webpage').create();
// Used for Firebird (old Firefox)
page.settings.userAgent = 'Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.5) Gecko/20031007 Firebird/0.7';
// Used for Chrome
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36';
page.viewportSize = {width: 1200, height : 800};
page.open("webAddress", function() {
    page.render(picName);
    pahntom.exit();
});

Link to HTML/CSS code used and referenced below

Yes, I have tested by changing the user agent attribute, and have taken screenshots to confirm (code above). Our site is rathe well defined, and does not generally change from browser to browser, so this is more of precautionary action. - I have also tried to make changes that would deliberately cause the site to look different when used in different browsers. They still appear to captured the same way by PhantomJS no matter what I change.

** Disclaimer: As noted, I am relatively new to PhantomJS. I have read through much of the documentation, and related posts, but have not really found an answer to my question yet. I am also a new web developer (have done much backend programming so I'm not necessarily a newbie programmer) so perhaps my "deliberate" changes were incorrect? Or, perhaps I'm not using the user-agent attribute in the correct manner?

Please let me know if I could be more specific. - Any/all help would be greatly appreciated!

sramzan
  • 96
  • 8

1 Answers1

0

It certainly can appear differently. Some web servers respond with a fixed-width page by default. If you specifically set a user agent string that is known to the web server and which denotes a mobile browser, you might get a small screen-optimized version of the page.

PhantomJS has a default viewport of 400 x 300 pixels. Which means that mobile versions of pages are likely rendered as expected. Fixed width pages can increase that viewport size.

Not all sites react differently depending on the user agent string. Keep in mind that the page will likely look differently if you're taking screenshots during multiple script executions without changing anything, because some pages as well as ads change frequently.

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
  • Thanks for that! - I actually set my own viewport settings. Would that prevent varying results from various browsers when changing the user agent? The reason I ask is b/c of the tests I ran above. I used the chrome web browser user agent, and then used a mobile safari user agent. But, the results looked identical. Perhaps this is b/c I defined the viewport? – sramzan Sep 25 '16 at 22:21
  • Some websites don't sniff the user agent string at all and instead rely on the viewport size using responsive design. – Artjom B. Sep 26 '16 at 05:09
  • Ah I see, so that could be the issue. - Thanks a lot @Artjom for the help, it really helped to clear things up! – sramzan Sep 29 '16 at 15:07