Selenium Webdriver take screenshot of viewport only - ruby

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.

Related

Selenium or Watir Webdriver, how to save resized screenshot?

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.

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.

Any way a native application can access the DOM inside a browser? (Mac/Win/Linux)

Think of a dictionary application that grabs words upon user's click from any other application (including browsers) and pops up it's meaning. Is it possible to twist this behavior based on the word's HTML attributes?
Edit: I noticed something cool. OSX's built-in dictionary app has a shortcut (cmd+control+d) that actually pops up a word's meaning (the word you're hovering your mouse above). It also highlights the word. The highlight area grows as you increase the font size. check out this fiddle and try various font sizes.
Yes/no
If your dictionary application embeds a browser instance (like a webkit browser) then it should be possible to access the DOM.
If you want your application to manipulate an already running browser instance it has no control over then it could probably done if
that browser has a browser plugin that interacts with your application
you intercept low level commands to mess directly with the kernel or the memory of the browser.
Neither of those are easy to do for all browsers.

How to get x11 window id of div element rendered in web browser

I need a way to find out the x11 window id of a particular div element inside a web browser( example firefox ) so that this id can be used to display some kind of video streams.
Any way to do this in either c++ or java?
On reading some posts and going through internet, there seemed to be one which used xwininfo.
Using this i could only get the window id of the browser but was not able to get id for internal elements.
Is it possible? If not.. can anyone suggest me any other idea?
Thanks
Where do you need to get the window ID, from an external program separate from the browser, or from JavaScript, or what?
The div isn't going to have its own X window; most likely the only X window is for the entire web page, or in some browsers maybe even for the entire browser window including toolbars.
Perhaps you can write a plugin. A plugin (at least for now, future specs are looking likely to change this) can have its own X window. Flash does for example.

SVG Viewer causing IE8 to hang when browser is zoomed

We have a website that currently serves drawings to users via the SVG Viewer plugin. We have one client that sees it through IE8. With IE8, when they do a Change Zoom Level on the browser to anything other then 100%, the viewer tries to occupy the new space and zooms correctly. However, when the user tries to manipulate the frames inside that bound the viewer (it's a frameset website with the viewer being in the center) the entire site hangs. IE8 also shows that it takes up CPU cycles on the client computer, so it's trying to do something but hitting a loop.
I don't think this is actually our code and might just be something with SVG and how IE8 handles plugins and it's zoom. Does anyone know if this is a real problem and if there's a good solution?
If you are referring to the Adobe SVG Viewer plug-in, then I recommend that you (ideally) get your clients to start using a web browser that supports SVG natively — i.e. Chrome, Safari, Firefox, Opera; even IE9 (to some extent) — or use a different shim like SVGWeb to provide SVG support for those users of older browsers who also have Flash installed.
I found out what the problem was. I thought it was the SVG viewer trying to do something with the frames, when it turned out that I was just setting the frameset's initial size to the clientHeight and clientWidth, and then subtracting something from the height. That subtraction was a toolbar based in the frameset and, when you change the zoom level in the browser, there's a lock up that can occur with you trying to pull a components size and the client's size. At least, this is what I was seeing.

Resources