Develop Reference

Selenium Remote WebDriver get canvas content using Chrome in headless mode

I'm trying to get Whatsapp QR with Selenium WebDriver on remote machine.
I using latest version on docker package
selenium/standalone-chrome:latest
The point is, if I try the following code without headless on, works smooth.
Maybe my configuration isnt correct.
Any ideas?
ChromeOptions dCap = new ChromeOptions();
dCap.setHeadless(true);
dCap.setCapability("platform", "LINUX");
dCap.setCapability("version", "latest");
dCap.addArguments("disable-infobars");
dCap.addArguments("--start-maximized");
dCap.addArguments("--disable-extensions");
dCap.addArguments("--disable-gpu");
dCap.addArguments("--window-size=1920x1080");
dCap.addArguments("--enable-javascript");
String driverPath = System.getProperty("user.dir") + "/exe/chromedriver";
System.setProperty("webdriver.chrome.driver", driverPath);
URL rutaProxy = new URL("http://localhost:4444/wd/hub");
WebDriver driver = new RemoteWebDriver(rutaProxy, dCap);
driver.get("https://web.whatsapp.com/");
WebDriverWait espera = new WebDriverWait(driver, 20);
espera.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector(".landing-main canvas")));
WebElement canvas = driver.findElement(By.cssSelector(".landing-main canvas"));
JavascriptExecutor js = (JavascriptExecutor)driver;
String imagenBase64 = (String) js.executeScript("return arguments[0].toDataURL('image/png').substring(21);", canvas);
//TEST
byte[] imageByte = Base64.getDecoder().decode(imagenBase64.substring(1));
ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
BufferedImage image = ImageIO.read(bis);
bis.close();
File outputfile = new File("image.png");
ImageIO.write(image, "png", outputfile);
driver.close();

I've been in this situation, add more time delay between a action and a window popup, because the refresh of some DOM elements takes time. Enabling headless requires more latency than not enabling it.

Unable to locate the Element on Canvas using Selenium WebDriver

I have an application developed by using Vaadin Framework, Now i need to click on the rectangular polygon which is on the Canvas.following is the html code
here i am providing the Html code
<canvas width="1920" height="524" class="ol-unselectable" style="width: 100%; height: 100%;"></canvas>
and i tried by using Actions which makes the mouse move over the Polygon and click .
int x = (int) 5638326.333511386;
int y = (int) 2580101.9711508946;
driver.get("http://localhost:8080/internship");
WebElement ele = driver.findElement(By.xpath("//canvas[#class='ol-unselectable']"));
// driver.findElement(By.tagName("canvas"));
//driver.findElemet(By.className("ol-unselectable"));
try {
Actions builder = new Actions(driver);
builder.moveToElement(ele, x, y);
builder.clickAndHold();
builder.release();
builder.perform();
} catch (Exception e) {
// do nothing
}
i am getting the foloowing error
org.openqa.selenium.NoSuchElementException: Unable to locate element:
//canvas[#class='ol-unselectable'].
can anyone suggest some samples how to find polygon on canvas with co-ordinates and make click on it.

Usually, the canvas element is embedded in an iframe.
So, first, you have to find the iframe element and then find the canvas inside the iframe. For instance:
WebDriver driver = new FirefoxDriver(firefoxOptions);
try {
driver.get("https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_empty");
WebElement iframe = driver.findElement(By.name("iframeResult"));
driver.switchTo().frame(iframe);
WebElement canvas = driver.findElement(By.id("myCanvas"));
System.out.println(canvas.getText());
} finally {
driver.quit();
}
I think this code might help you.
EDIT:
After chatting with #RamanaMuttana and his changes on the posted question, I could better understand his need.
We realized that just using the By.tagName selector was enough to find the canvas element as in the code bellow:
driver.findElements(By.tagName("canvas")).get(0);

Selenide and Firefox record faulty screenshot

I'm using Selenide and Phantomjs to test a Webapplication.
Im taking the Screenshot as follows:
byte[] bytes = ((TakesScreenshot)webDriver).getScreenshotAs(OutputType.BYTES);
ByteArrayInputStream bis = new ByteArrayInputStream(bytes);
returnImage = ImageIO.read(bis);
For input Elements, however, the screenshot looks like this:faulty screenshot
It actually looks like this (when using chrome/firefox)
how it's supposed to look
The interesting thing is, that when I set Selenide to use phantomjs (Configuration.Browser = "phantomjs") it takes the screenshots correctly.
It only occurs on that kind of element, too. Buttons etc are being recorded fine. Any ideas?
PS: The screenshots attached to this post are cropped, the code here takes screenshots of the entire page. In my code, I crop the screenshot only to the desired element but even on the screenshot displaying the entire screen the element is not recorded correctly.

You can take screenshot a element using below code:-
WebElement ele = driver.findElement(By.id("hplogo"));
// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage fullImg = ImageIO.read(screenshot);
// Get the location of element on the page
Point point = ele.getLocation();
// Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();
// Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(),
eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);
// Copy the element screenshot to disk
File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");
FileUtils.copyFile(screenshot, screenshotLocation);
Now in above code you are getting the getWidth() and getHeight(). You can try to adjust it by adding or subtracting the value.

Java-Selenium : TakesScreenshot size issue

I have created 'takescreenshot' reusable method to capture screenshot and have been calling wherever I need it.
however I am facing one strange issue here. Every time this function is called the captured image size keeps increasing
e.g 252K -> 278K -> 310K -> 400K ...
These captured images I am using in ExtentReport. Also apart from selenium session image, I do see a black background image being captured not sure where it is coming from.
method code is as below:
public static void takescreenshot(ExtentTest Test,String Status){
Date d=new Date();
String CurrentTimeStamp=d.toString().replace(":", "_").replace(" ", "_");
File scrFile =((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File(CurrentTimeStamp+".png"));
if(Status.equals("pass")){
Test.log(LogStatus.PASS, "snapshot below:-"+CurrentTimeStamp+".png"));
}else if(Status.equals("fail")){
Test.log(LogStatus.FAIL, "snapshot below:-"+CurrentTimeStamp+".png"));
}
}
if I hardcode some existing image in extentreport code then everything works fine.
Has anyone come across this issue ever.

I had written a code to capture screenshot of elements which works fine. May be this will help you. I don't know what Extendreport is, so can't help you there.
public static void takeElementScreenshot(WebDriver driver, WebElement element){
try{
// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage fullImg = ImageIO.read(screenshot);
// Get the location of element on the page
Point point = element.getLocation();
// Get width and height of the element
int eleWidth = element.getSize().getWidth();
int eleHeight = element.getSize().getHeight();
// Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(),
eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);
// Copy the element screenshot to disk
File screenshotLocation = new File("D:\\Screenshot.png");
FileUtils.copyFile(screenshot, screenshotLocation);
}
catch(Exception e){
}
}

Screenshot specific element with Selenium

NOTE: I am aware this question has been asked before a few times however I am having a problem that others seem to not be having.
Even though I appear to be getting the point of the element along with its width and height correctly, the final crop is incorrect. It is like the screenshot I am taking has different dimensions to the webpage. I am using the Chrome Driver.
This is my code for attempting to get a screenshot of the google logo image:
WebDriver driver = new ChromeDriver();
driver.get("http://www.google.com");
WebElement ele = driver.findElement(By.id("hplogo"));
//Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage fullImg = null;
try {
fullImg = ImageIO.read(screenshot);
} catch (IOException e) {
}
//Get the location of element on the page
Point point = ele.getLocation();
//Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();
//Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot = fullImg.getSubimage(point.getX(), point.getY(), eleWidth,
eleHeight);
try {
ImageIO.write(eleScreenshot, "png", screenshot);
} catch (IOException e) {
}
//Copy the element screenshot to disk
File screenshotLocation = new File("/Users/M/Desktop/stuff/logo.png");
try{
FileUtils.copyFile(screenshot, screenshotLocation);
}catch(IOException e){
}
Here is my final logo image:
Here is what it should be getting (just as a png not as gif):
Does anyone have any idea what might be going on?

Check if you have custom scaling on your operating system. I had the same problem using 125% scaling on windows.

Refer to the below screenshot for more details.
Go to your system settings > Search for the display > change the value of "Make Everything Bigger" dropdown to 100%. Then run the code again this will work fine for you.