This repository has been archived by the owner. It is now read-only.

PhantomJS should support a defined screen size for css media queries #10895

Open
ariya opened this Issue Nov 30, 2012 · 10 comments

Comments

Projects
None yet
7 participants
@ariya
Owner

ariya commented Nov 30, 2012

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.
🌟   3 people had starred this issue at the time of migration.

@DavidDurman

This comment has been minimized.

Show comment
Hide comment
@DavidDurman

DavidDurman Apr 23, 2014

+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.

DavidDurman commented Apr 23, 2014

+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

This comment has been minimized.

Show comment
Hide comment
@sbressler

sbressler Jul 12, 2014

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?

sbressler commented Jul 12, 2014

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 comment has been minimized.

Show comment
Hide comment
@rbolton240

rbolton240 Mar 24, 2015

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.

wide with mobile menu

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

rbolton240 commented Mar 24, 2015

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.

wide with mobile menu

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

This comment has been minimized.

Show comment
Hide comment
@jayesh22c

jayesh22c Jun 23, 2015

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

jayesh22c commented Jun 23, 2015

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

This comment has been minimized.

Show comment
Hide comment
@gmisura

gmisura Jun 23, 2015

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.

gmisura commented Jun 23, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jayesh22c

jayesh22c Jun 23, 2015

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.

jayesh22c commented Jun 23, 2015

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

This comment has been minimized.

Show comment
Hide comment
@iradul

iradul Jun 23, 2015

Contributor

@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;
Contributor

iradul commented Jun 23, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@jayesh22c

jayesh22c Jun 24, 2015

@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 👍 and thanks for that but I am looking for something like that in java.
thanks

jayesh22c commented Jun 24, 2015

@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 👍 and thanks for that but I am looking for something like that in java.
thanks

@iradul

This comment has been minimized.

Show comment
Hide comment
@iradul

iradul Jun 24, 2015

Contributor

@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.

Contributor

iradul commented Jun 24, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@jayesh22c

jayesh22c commented Jun 25, 2015

@iradul thanks 👍

@ghost ghost removed old.Priority-Medium labels Dec 19, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.