PhantomJS should support a defined screen size for css media queries

[ariya]

david.bu...@edoceo.com commented:

Which version of PhantomJS are you using? Using 1.7 binary

What steps will reproduce the problem?

1. Set Viewport size
2. Load Page
3. Page is still wider than screen, CSS rules not followed.

What is the expected output? What do you see instead? I wanted the rendered PNG to more closely resemble what is seen on mobile or tablets.

Which operating system are you using? Gentoo 64bit

Please provide any additional information below.

It seems that rules from the responsive CSS methods are not respected.

I had some rules that said resize elements based on screen. I've tried to override the screen object in the page too but that didn't work either.

I'll post my script and some PNG images shortly

Disclaimer: This issue was migrated on 2013-03-15 from the project's former issue tracker on Google Code, Issue #895. :star2:   3 people had starred this issue at the time of migration.

[DavidDurman]

+1 We had an issue where our QUnit tests running in a local environment through PhantomJS where green but when they run on Jenkins they failed. After some investigation we found out that the Jenkins run the tests in a virtual machine with screen resolution set to 1024x768. This caused our iPad targeted media query to kick in (screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)). It would be great if we could control the screen size via PhantomJS command line arguments.

[sbressler]

I'm seeing the same thing. I would have thought that page.viewportSize is the size used and respected by CSS media-queries. Is it expected, given the old version of WebKit or some other code, that this indeed does not work? Instead, the last-listed CSS rule is the one observed. Does anyone know where this code lives if I were to take a peek at addressing?

[rbolton240]

This sounds like the problem I am experiencing...

I am trying to screen capture a web page (www.constructionequipment.com) using PhantomJSDriver, which works fine locally on my development box but when ran from a web server (without a display) does not properly handle detection of the screen due to the responsive nature of the web page.

What I am seeing happen (on the server) is the horizontal navigation bar at the top of the page always appears to display in a mobile mode (for responsive design) when screen captured, this is regardless of any width that I force the browser window to.

What I am seeing happen (on my development box) is the responsive menu adjusts appropriately as I resize the window programmatically. No issue here.

I was looking at the CSS for www.constructionequipment.com and found a media query being used ("@media" screen) which provides conditional logic for which CSS block to use based on the screen size.

I am thinking that the PhantomJS Driver is (in the case of running on the server) not properly detecting the screen width (since there is no display).

It should be noted that other responsive websites like CNN.com for example, work fine.

Has anyone else encountered this issue?

Thanks in advance.

Below is an attached screen capture of a dropdown menu in a wide browser window (which should be using a navigation bar instead). This was captured by my application running in a server environment and illustrates the problem I am seeing. My application works fine when ran locally.

You can go to constructionequipment.com and horizontally resize the window to see how it should behave.

wide with mobile menu

Custom .NET/C# application using...

Selenium WebDriver API .NET Bindings Runtime Version v4.0.30319 Version 2.44.0.0

phantomjs.exe

Development machine: Windows 7

Server machine: Win Server 2008 R2

.NET version v4.0.30319

Information about CSS @Media queries http://stackoverflow.com/questions/4189868/what-does-media-screen-and-max-width-1024px-mean-in-css

[jayesh22c]

Hello Aria,

I am using phamtomJSDriver in java to capture screen of the given URL my problem is that it is capturing the full page in case of one page site the size of image goes to 10-12 MBs . Is there any way to capture only visible portion of the page ? I am using GhostDriver.

Thanks

[gmisura]

From: http://phantomjs.org/screen-capture.html

var page = require('webpage').create(); //viewportSize being the actual size of the headless browser page.viewportSize = { width: 1024, height: 768 };

Adjust to your needs.

[jayesh22c]

gmisura : I am not talking about the ViewPort size I am talking about the size of the image captured. Like if the viewPort is set to (1024x768) then width of image will be same as viewport's width i.e.768 but its height will be of full page. I want the height of image also 1024.

[iradul]

@jayesh22c to render only view-port you should adjust clipRect, so something like this :

var vps = page.viewportSize,
    clipRect = {
        top: 0,
        left: 0,
        height: vps.height,
        width: vps.width
    },
    previousClipRect = page.clipRect;

page.clipRect = clipRect;
page.render(targetFile);
page.clipRect = previousClipRect;

[jayesh22c]

@iradul here is my java code :
WebDriver driver = new PhantomJSDriver(desiredCapabilities); driver.manage().window().setSize(new Dimension(1024,768)); driver.get(url); driver = new Augmenter().augment(driver); File srcFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE); FileUtils.copyFile(srcFile, new File("screenShot/"+name+".png")); System.out.println("****Captured Screen*****"); driver.quit(); for JS your code works fine :+1: and thanks for that but I am looking for something like that in java. thanks

[iradul]

@jayesh22c, I never used GhostDriver before but if you could somehow execute javascript code using WebDriver that might solve your problem. Take a look at this example, though this will probably execute javascript in page context.

[jayesh22c]

@iradul thanks :+1:

[stale[bot]]

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!