Selenium or Watir Webdriver, how to save resized screenshot? - ruby

I try to get a resized 400x400 screenshot of google. I try this both in Selenium and Watir with no success.
require 'watir-webdriver'
b = Watir::Browser.new
b.goto 'google.com'
b.window.resize_to(400,400)
b.driver.save_screenshot("screenshot.jpg")
I always get the screenshot with the original browser size.
Any idea how can I save it resized to 400x400?

At present, WebDriver defines a screenshot as a "full page screenshot". That is, the entire DOM should be represented by the image generated by the save_screenshot method. The fact that the Chrome driver doesn't generate a screenshot of the full DOM is a bug in the Chrome driver. So the real answer is that there is no way to generate a screenshot of only the browser view port using WebDriver.
Having said that, it might be possible to use other programmatic means to accomplish this, depending on your OS. On Windows, for example, it would be pretty easy to get the desktop window's window handle (HWND), capture the image of the desktop (using the Windows GetDesktop and PrintWindow APIs), and cropping it using the coordinates supplied by the WebDriver Window API.

I was able to reproduce the problem with Firefox, but Chrome generates resized screenshot. My guess is that it is a bug in FirefoxDriver. Take a look if the problem is already reported in Selenium bug tracker and if not, report it.

Related

firefox: take screenshot programmatically

It's possible to take screenshots of web pages in Firefox using the developer toolbar. Is it possible to do this programmatically too, e.g., from the command line? I've tried with Selenium, but with no luck.
edit: I know it's possible to take screenshots using Selenium, but this only gets you the full screen. Using the developer toolbar in Firefox, one can use CSS selectors to select only parts of a page, which is what I want to do (and forgot to specify, sorry). What I've read online is that Selenium cannot access the developer toolbar because it's not part of the DOM.

Selenium Webdriver take screenshot of viewport only

I only need screenshots of the current viewport, particularly respecting the scroll position. Basically what the current Chrome driver does.
From what I've read it seems this should be entirely possible, but for some reason the screenshot commands always strive to take a full document screenshot. In fact the IE driver takes multiple viewport shots and then stitches them together.
I'm using the Ruby webdriver, and I can't see anyway to take a screenshot of just the viewport. Is it possible?
There are two competing definitions of "screenshot" when dealing with WebDriver. The first is the definition used by the open-source project, where a screenshot is defined to be an image of the entire DOM of the loaded page. In this case, both the IE driver and the Firefox driver are doing the correct thing as defined by the project since 2010. The Chrome implementation of WebDriver is incorrect in returning an image of only the visible view port.
The W3C WebDriver specification, on the other hand, defines screenshots to be of the current view port only. This is at odds with the current open-source project's driver implementations (IE and Firefox), and can be expected to change in the future. Once the specification has attained "Candidate Recommendation" status, those drivers are likely to be updated.
As an aside, it should be noted that the IE driver in no way uses a "scroll-and-stitch" method to create its screenshots. It does resize the browser window large enough to display the entire DOM, as calculated at the moment the screenshot is requested, and take an image of that. However, please note that there are issues with IE 10 and 11 in producing these full-DOM screenshots depending on the bit-ness of your operating system and of the IEDriverServer executable you're using.
At present, you'll need to use a tool external to WebDriver to obtain view-port-only screenshots for IE and Firefox.
This is a frequently changing issue..
AFAIK right now Chrome- and IEDriver both capture screenshots of the viewport only, while FFDriver captures a full-page screenshot (FF will change this in the future). See also my answer to this question.

How to make screenshots on chromecast?

I would like to make screenshots of the receiver application running of the Chromecast device.
I need to have it running on the device to show the video and the application together.
Is there a way to do this ?
Ali Naddaf's answer is technically true, however with a little work I was able to make a faithful reconstruction of the screen, to the point that it is indistinguishable from an actual screenshot.
We will use code from the html2canvas project, see http://html2canvas.hertzen.com/documentation.html . It will render our screen to a canvas. In particular, copy&paste the compiled code from http://html2canvas.hertzen.com/build/html2canvas.js to the Chromecast console. (adding a tag to dom seems not to work) You can access the Chromecast console & developer tools by accessing the ip.ad.dr.ss:9222 port via Chrome.
Issue the following command:
html2canvas(document.body, {onrendered: function(canvas){document.write('');}});
This will destructively replace the screen with the screenshot (I find this convenient but you can easily think of a more polite way if you wish)
In the elements browser, you will have an img, with a base64 url specified as a src. Click on the url, chrome will open the image in a new tab. Hopefully it's the screenshot that you wanted.
You might find that some pictures are missing because of e.g. same origin policy. The javascript have other privileges than accessing images from html. If this happens, work it out somehow (use https for images for example), then goto 1.
You have your screenshot!
No, that is not possible due to many reasons such as media rights and security.
I'm extending zsolt-szatmari's answer into a copy-pastable script that you can use in the Chromecast Developer Tools console:
As he said, copy and paste http://html2canvas.hertzen.com/build/html2canvas.js code into the console
Call the html2canvas method: it will create a new canvas element into the DOM: html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } });.
Get a base64 string representation of the image currently displayed in the canvas: document.getElementsByTagName('canvas')[0].toDataURL('image/png');
You'll then get a very long base64 string: if you click on it, Chrome will show the image in a new tab. Please note that this image could be far from what is really shown on your Chromecast due to html2canvas limits:
The screenshot is based on the DOM and as such may not be 100%
accurate to the real representation as it does not make an actual
screenshot, but builds the screenshot based on the information
available on the page.
(source)
I was thinking that you could maybe use this to capture the canvas to an image file, which normally works in javascript with canvas:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
Of course then you would need to transfer this image file to somewhere - not exactly sure how to the last bit from the chromecast. Maybe that is not possible.
As a chromecast developer myself I needed screenshots of the app running to show customers. I ended up doing a kind of "simulation" of the chromecast - calling some mockup methods in javascript to display the data and then accessing my receiver app via the cast url on my desktop in the browser. Then I used a screen capture program to capture the browser output. This gave me the same screenshot as from running the receiver app on chromecast on TV, which is essentially just a browser showing your html+css+javascript receiver.

Taking screenshots on Firefox and Safari (using their APIs or Canvas code)

I've been dealing with taking screenshots for Firefox and Safari browsers but I can't figure out how to do it! With Google Chrome API I can do it this way (it's pretty simple):
chrome.tabs.captureVisibleTab(null, null, function (image)).....etc
BUT I can't find a SIMPLE way to do it on Firefox and Safari!! The only answer I got here was using the 'html2canvas' (http://html2canvas.hertzen.com/examples.html) BUT IT IS NOT a 100% solution in order to take EXACT screenshots of a specific webpage!! It doesn't work for me in this case!!!
Can someone help me with this issue in order to find a simple solution for Firefox and Safari?
I have personally used html2canvas and I found it quite efficient for taking partial or full page screenshots. But it does require you some knowledge of JavaScript and client side scripting.
If you are looking for a more easier approach , there are numerous extensions on Google Chrome webstore.
A popular one is Awesome Screenshot which even allows you to take screenshot of entire webpage (till the scroll bar ends).
You can use Mozilla's chrome tools to draw some or all of the window to an image canvas:
var c2d = myCanvas.getContext('2d');
c2d.drawWindow(window, x, y, w, h, 'rgb(255,255,255)');
See drawWindow(), XUL.
I don't remember exactly, but that's the gist. The magic is the .drawWindow() method, which cannot be executed on the content side, it must be in an area with chrome privileges (like an add-on/extension).
Edit: Here's a good example.

Run context.drawWindow method through a bookmarklet

I want to capture a webpage as an image. I am able to do this using a firefox extension using context.drawWindow method. Now I want to strech myself and see if I can do this using a bookmarklet :)
I remember reading somewhere that context.drawWindow() works only from the firefox toolbars. I dont know if that's still true or not.
Can anyone shed some light if I can execute context.drawWindow() from a bookmarklet or no?
Thanks
Kapil
You can't, since bookmarklets run with the permissions of the page, and drawWindow is chrome-only (can only be used by Firefox UI and extensions, not Web pages).

Resources