This question is a part of another question I asked. However, I already found the answer to this part and thought it would be useful for other people as well.
Part of my other question:
I am using serenity in combination with cucumber for automated screen tests and want to include full-page screenshots in my serenity report. The screenshots in the report are normally only a capture of the viewport. Oftentimes however, this doesn't provide enough information as this is only a part of the screen.
I found that the capturing of serenity screenshots is a part of driver implementation. As most drivers conform with the W3C definition of screenshots those drivers only capture the current viewport.
tl;dr: use FirefoxDriver
I contacted David Burns of W3C. He was very helpful and his answer cleared up a lot for me.
First of all, FirefoxDriver for now still takes screenshots of the full page. David said:
FirefoxDriver (and in Marionette our W3C webdriver implementation) on the otherhand does screenshots by dumping the Document into a canvas and calling a Firefox specific API on Canvas to get a screenshot. Since we dump the entire document we can do full page screenshots. This however may change when we start putting more of the Servo code into Firefox and the way we can access screenshots changes.
So unfortunately this will probably change in the future, but for now it is good (when you use FFdriver)..
He also explains why this choice has been made and references to a talk he gave about how the rendering of webpages works.
Later in our conversation he also referenced to the minutes of the discussion about how screenshots should be captured.
His full answer:
Hi
The tl;dr; is its really hard take fullscreen shots since not all browsers have the information to create a screenshot of the whole page.
Long version:
At Selenium Conf this year I did a talk about how #isDisplayed can sometimes lie to you and the reason is the same as the screenshots. To make browsers appear to make web pages load as fast as possible they workout what needs to be rendered in the view port and then render it, via doing calculations on the CPU or GPU.
Because of this approach it means that browsers build up a display list of certain areas and creates "tiles" to render. It starts from the viewport and works out. Now, a browser is not going to render a whole page at a time, it will have a few times above and below ready for when you scroll and calculate the rest when you scroll.
Now ChromeDriver and Microsoft's EdgeDriver both do their screenshots from the display list and have internal APIs that only give them the viewport. This is because their reference tests (or reftests as they are known to vendors) only care about that. They both don't feel its worth the effort to do the rest because of the edge cases.
FirefoxDriver (and in Marionette our W3C webdriver implementation) on the otherhand does screenshots by dumping the Document into a canvas and calling a Firefox specific API on Canvas to get a screenshot. Since we dump the entire document we can do full page screenshots. This however may change when we start putting more of the Servo code into Firefox and the way we can access screenshots changes.
Because we only know the viewport info it leads to us then having to stitch images together to get a full page screenshot. Both ChromeDriver and IEDriver do this and both development teams consider this an ugly hack because its not always right and there isnt much they can do to make it right.
I hope that helps and explains it well. I suggest watching my talk as I explain how renders and layout engines work in Browsers.
David
Related
I'm trying to figure out how to hide the border (including the address bar, tabs, title bar... everything that isn't the browser viewport) of my Firefox instance instantiated by Selenium.
If there's some way to have it use a userChrome.css, that would be straightforward enough. I've tried loading a profile folder that included a userChrome.css using this answer as a guide, but it seemed to ignore the styles. I've also looked through Firefox's about:config to see if there's some preference that would hide the frame of the window, but I haven't found anything yet.
Any solution that allows me to hide all or some of these elements when creating the instance with Selenium would be helpful. I know it's silly, but that's how it goes sometimes, you know?
-edit-
I don't think the title bar needs to be hidden. But everything else should be hidden.
-another edit to clarify a few things-
I mentioned kiosk mode in the comments as an example of the sort of thing I'm going for. Kiosk mode isn't exactly what I'm looking for, though. The windows aren't meant to be fullscreen, but they should still lack the elements of a common browser window. Think of it as like an Electron app. Out of the box, Electron lacks an address bar, tabs, etc. That's basically what we have for our app, but it's with regular-old Firefox. Again, whether these elements are displayed or not doesn't typically impact the test, but we want them hidden anyway.
Finally, I a friend of mine tried achieving this goal using a userChrome.css wrapped in a Firefox profile and was able to get Selenium to use the userChrome. So perhaps I need to figure out what I'm doing wrong. The biggest difference between how he did it and how I'm doing it is I must use a remote web driver for testing. But even still, it should be able to load the userChrome.css file. I'll try to update this question with more details as I fiddle with it some more.
-edit-
I think the reason userChrome isn't working when specifying a profile is because of the version(s) of Selenium/Geckodriver/Firefox being used.
The geckodriver version I started with was 0.15. 0.17 behaved exactly the same. 0.18 didn't respect the profile I passed along to it at all and instead had Firefox open the profile selection window (not very useful, but I was able to at least select the correct profile and see the userChrome.css get applied). 0.24 is no different.
Firefox is 52.9.0. Not much I can do about that.
We're using selenium (standalone) server 3.8.1. Switching out for 3.141.59 Didn't change anything.
Unless there's a version combination that will work with Firefox 52, I think the only thing I can do is wait until there's an update.
At last I have figured it out. In order to get Selenium to use my custom profile, I needed to do the following:
FirefoxProfile profile = new FirefoxProfile(new File(path_to_profile));
FirefoxOptions options = new FirefoxOptions().setProfile(profile);
RemoteWebDriver driver = new RemoteWebDriver(options.toCapabilities());
driver.get(url_of_webpage);
Thanks to avinesh09 on Github for the info I needed to solve the problem. It's so simple, but this has to be the only way that I neglected to try to load the profile.
If fullscreen (kiosk) mode is what you ask for (as then all you see is the viewport) it is as simple as:
driver.manage().window().fullscreen();
It is the same user experience as pressing "F11" in your browser.
I have been testing an app using Firefox Web Driver but it is really slow comparing with HtmlUnitdriver, so I decided to translate to last one. All works fine but I have problems with some kind of links that loads information async.
In my case it is not problem of "wait" because I do and as i said before, using Firefox driver works very well. But with HtmlUnit doesnt work well.
In my scene I have following code:
Send
Viewing the app on a browser such as Firefox, when I click on that link, the system return me a result. But when I use HtmlUnitdriver, when I do click to the element, the driver goes directly to the href and then I have a bad result.
I don't really know how to do make works with it. I'm really interested on this way because is really fast.
I m trying to setup a few image categorization tasks on Mechanical Turk sandbox developer version. When I try to view the HIT(the annotation image), it appears blank. I clicked on the 'Accept HIT' button but I still couldn't see anything.
In order to make sure that nothing was wrong with my project setup in particular, I signed in as a worker to accept HITS on other projects involving image categorization. I still continue to see a blank image in their categorization projects, where the image to be annotated is supposed to be displayed.
Can anyone help with this problem?Thanks.
Problem solved - it was a simple browser incompatibility problem.
I know you have already answered this for yourself, however for other requesters out there I think this may be useful.
I was developing HITs and I too was having issues view the HIT in Sandbox in Chrome and Firefox, I realized that it had something to do with the script being blocked by the browser and the way to fix this was to "unblock the content" - usually a shield icon in the URL bar.
When further developing my HIT I added information about how to see the HIT in the description box of the HIT so turkers could read the instructions and then work on the HIT - to be absolutely clear to the turkers, I added a "(READ DESCRIPTION)" in the title so turkers would know where to look.
Hope this helps!
I'm evaluating using Titanium for a project that makes videos from browser based animations. I was hoping for a way to take screenshots from within the app for each frame. The documentation of takeScreenshot seems a little slim so I was hoping to ask before I build a prototype.
Does take screenshot get the full document, or just the visible content?
Does the screenshot include window chrome?
Someone from titanium QA was able to answer the question. takeScreenshot actually takes a screenshot of the whole desktop.
I'm trying to get screenshots from a web page with multiple browsers. Just experimenting with Selenium RC, I wrote code like this:
var sel = new DefaultSelenium(server, 4444, target, url);
sel.Start();
sel.Open(url);
sel.WaitForPageToLoad("30000");
var imageString = sel.CaptureScreenshotToString();
This basically works, but in most cases the screenshot is of a blank browser window, because the page is not yet ready for display. It kind of works if I add a sleep just after the WaitForPageToLoad, but that slows down the fast browsers and/or may be to short for the slower browsers (or under load).
A typical solution for this seems to be to wait for the presence of a certain element. However, this is meant as a simple generic solution to get a screenshot of a local web page with as many browsers as possible (to test the layout) and I don't want to have to enter certain element names or whatever. It's a simple tool where you just enter the Selenium Server URL and the URL you want to test, and get the screenshots back.
Any advice?
I use Selenium-RC to capture screenshots of remote pages where the waiting time is variant. In such cases, checking the title of the page and using time.sleep(n seconds) usually does it for me.
May be you can make use of Browser status bar to verify whether that page is loaded fully or not. I think this is the best solution.