Selenium + Firefox: transparent element screenshots - selenium

I'm taking screenshots of elements in Selenium using the Firefox driver's element.screenshot_as_png. The resulting images include other elements that are underneath, as well as a white background behind everything (even though the page has no background colour set).
I just want the element alone on a transparent background, nothing else. According to this answer there's a way to do it in Chrome. Any chance to get the same thing with Firefox?

You Can Take Screenshot Like That!
driver.get_screenshot_as_png()
You Can Also Use Pillow!
import pyscreenshot
im = pyscreenshot.grab()
im.save('ss.png')

Related

Chrome Headless Selenium documentHeight

I am using Selenium C# to drive a Headless instance of Chrome
((ChromeOptions)_Options).AddArgument("--headless");
((ChromeOptions)_Options).AddArgument("window-size=1920,1080");
I have run into the problem that my javascript is always detecting both
$(document).height()
and
$(window).height()
as being 1080 in height, which is not accurate. The document height should be much taller in some cases. Is there a reason this is not working correctly and/or a work around to solve the issue?
In my troubleshooting, I grabbed the value for this javascript, and discovered that it was also 1080.
Math.max(document.body.scrollHeight, document.body.offsetHeight,
document.documentElement.clientHeight,
document.documentElement.scrollHeight,
document.documentElement.offsetHeight)
This particular page is definitely taller than the screen, and I used the Selenium GetScreenshot() method to take a picture and verify the scrollbar exists and content exists below the visible area.
For clarification, this does work correctly when running the headed version of Chrome. And the javascript in question is being run from JQuery's method:
$(document).ready(function () {

Firefox - hide browser frame with Selenium

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.

TestCafe Screenshot: Browser Provider for Android. crop.js "Unable to locate the page area in the browser window screenshot"

I work on an extension of the testcafe-provider-android. I want it to support Firefox and screenshots.
Screenshots are taken with the Android Debugging Tools. It works fine with Chrome, but not with Firefox.
crop.js#calculateMarkPosition() can not find the mark.
I think I understood how the mark thing works.
In utils.js#generateScreenshotMark() a string of 32 zeros or ones is generated, this is the "id".
“1” becomes a white dot and “0” becomes a black dot.
The "markSeed" is the id transformed into a Byte Array.
"markData" Is the base64 encoded image, ready to be used in an URL.
On the client, screenshot-mark.js places this image in the bottom right corner of the page.
crop.js#calculateMarkPosition() scans the screenshot line by line in order to find the mark and to crop the image properly.
Here are IDs and Screenshots for Chrome and Firefox:
Note: I manipulated the code to always generate the same ID. The Screenshots are cropped and zoomed in.
ID:
00101111000011000011000011110100
Chrome:
Firefox:
In my eyes, they look the same. So why does this not work?
If you can crop screenshots using third-party tools, you need to disable built-in screenshot mark generation by setting the hasChromelessScreenshots property to false.
I'd recommend you open a new issue on the TestCafe repository and provide all screenshot sources.
I found the reason for this behaviour.
In Chrome the black dots have the rgba value rgba(0, 0, 0, 1), while in Firefox they are rgba (1, 1, 1, 1);
This is why the index can not be found - the values are not as expected.
Now I need to find out, if this is a bug in Firefox.
UPDATE:
This happens because Firefox makes color adjustments.
The problem is described in TestCafe Bug #2918 and was resolved with TestCafe Pull Request #3732
We now just need to wait for the next release.

Selenium - Element not visible when the browser set to mobile responsive mode

I am testing the browser for mobile responsiveness. I changed the browser window size to iPhone 5 which is 320 x 568 using this command
driver.Manage().Window.Size = new Size(320, 568);
When I run the test, the browser opens fine according to the mentioned size without any issue. But it fails to find a hyperlink text which is displayed on the page. I get Element not visible exception when I could actually see the link text on the screen. So, could anyone help me solve this issue or have any ideas that I could try?
Any help would be highly appreciated.
Thanks.
Perhaps it's due to the time delay, that means code executes even before the link appears, So write the following code in your language
Code from Ruby Selenium-binding
wait = Selenium::WebDriver::Wait.new(timeout: 10) # seconds
wait.until { driver.find_element(id: "foo").displayed? }
driver.find_element(id: "foo").click
Try to scroll to the element.
You could use java script to do that.
In Python this can be done via
WebDriver.execute_script("arguments[0].scrollIntoView();", elem)
Some elements of the DOM of the webpage change when you test for mobile responsiveness, so selenium is unable to locate the element that you are specifically trying to target.So, you should try to debug and find the methods where the code is failing to perform the action.Then you should find the locators for those elements in "mobile responsiveness view" and trigger only those methods when you are testing for mobile.

Workaround for Webkit SVG foreignObject background layering bug?

When embedding html inside of SVG using the foreignObject tag, webkit based browsers render the backgrounds of the embedded html elements behind the svg elements. See http://code.google.com/p/chromium/issues/detail?id=35545 .
Here's an example : http://www.mxgraph.com/demo/markup/webkitbg.html
The green div should be on top of the red.
Does anyone know of a workaround for this issue? Maybe some incantation of z-index and/or grouping of elements or something in svg to fool webkit into doing the right thing?
This is webkit bug 58417, fixed on 2011-11-10. The fix is in Chromium version 17, which is currently in beta as of 2012-01-09, and should be released in early February. Not sure when the fix will land in Safari, but luckily I don't need to support it.
So the workaround seems to be "wait a month"...
I've just been hit by the same issue. Even though the bug is fixed since a long time in Chrome, Safari seems to be ages behind with the codebase.
My solution is to add style="display:inline-block" to the first child of the foreignObject tag. This seems to fix the problem.