How to capture screenshot only the specific element? Selenium WebDriver

[Jaydenz]

Currently I trying to capture a screenshot using the Selenium WebDriver but most far as i can go is just the whole page screen shot. However, what I wanted is just to capture a part of the page or perhaps just on specific element based on id. Any way to capture a screenshot by selected item or element?

For example, i wish to capture the picture with image id = "Butterfly" only... Is it possible to do that? Thank in advance.

[Manoj Hans]

Hi Jaydenz,

It is possible to take screenshot of specific element....see this post it will help u out

https://groups.google.com/forum/?fromgroups=#!searchin/selenium-users/image/selenium-users/8atiPIh39OY/S2NVGiKQbuYJ

--Manoj Hans

[Jaydenz]

Hi Manoj, thank you for reply. Anyway i was able to screen capture but i get stuck because i could not crop the correct position of the image that i want.

Actually, the image i want to screen capture will keep changing for every run. So if i just download it directly, it will give me another image, while it is different with the one i want at the website page already.

So now, i am trying to crop the image. However, i could not get the right position for it. Could you help me out with this? 

IWebElement img = driver.FindElement(By.Id("IMG1"));
int width = img.Size.Width;
int height = img.Size.Height;
Point point = img.Location;
int x = point.Location.X;;
int y = point.Location.Y;
RectangleF part = new RectangleF(x, y, width, height);
Bitmap bmpobj = new Bitmap(filePath);
Bitmap bn = bmpobj.Clone(part, bmpobj.PixelFormat);

PS: The website i tried to screen capture contain an iframe content which load a long page with scroll bar. Is that possible the location of the image is far too down causing me unable to get the right coordinate after all?

[David]

Jaydenz, did you get any updates since your old post here? Did you solve the problem yourself?

Probably the best debugging for the problem you reported would have been to evaluate what the cropped image looked like and also if you got any exceptions or things ran fine except that the cropped image is incorrect.

[Sravan Kumar]

Hi ,

It is possible to take the screen shot of the specific element using Selenium

Procedure to follow:

Take the total page screen shot

 Get the Width and Height of the WebElement using

int width = element.getSize().getWidth();

int height = element.getSize().getHeight();

Create a rectangle using Width and Height

      Rectangle rect = new Rectangle(width, height);

Get the Location of WebElement in a Point.This will provide X & Y co-ordinates of the WebElement

Point p = element.getLocation();

Create image by for element using its location and size.Write back the image data for element in File object

Hear is the sample code snippet for that

http://qaautomationworld.blogspot.in/2014/04/SeleniumWebdriverHowtocapturethe-screenshotofonlyaspecificelementusing.html

On Wednesday, December 12, 2012 9:04:31 AM UTC+5:30, Jaydenz wrote:

[Anirudha Chavan]

Hey Sravan thanks for this solution. This solution is working fine with pages designed in JSF, for pages which are designed in angular this is not giving image of actual element. Image returned is different than actual element.
Can you please tell me what should I use to take screenshot for angular pages and then crop them as you mentioned above. Thanks in advance.

[David]

what image do you get back instead of the expected one? how far off in location is it to the expected image?

[Anirudha Chavan]

Hi David,

I get back images of header and difference in location is too far its like image I am getting is from top left corner and I want image of right left corner.

[Nikesh Jauhari]

      File screen = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);

      Point point = webElement.getLocation();

      int width = webElement.getSize().getWidth();

      int height = webElement.getSize().getHeight();

      Rectangle rect = new Rectangle(width, height);

      BufferedImage img = ImageIO.read(screen);;

      BufferedImage dest = img.getSubimage(point.getX(), point.getY(), rect.width, rect.height);

      ImageIO.write(dest, "png", screen);

      String filename = System.nanoTime() + ".png";

      FileUtils.copyFile(screen, new File(filename));

[Anirudha Chavan]

Hi Nikesh,

This is what I am doing for Angular JS pages, but screenshot is not appearing for the element which I wanted. Its perfectly working fine for JSF pages.

Please let me know if you can help on this.

[Nikesh Jauhari]

How do you wait for your Angular JS calls to finish loading the page ?

[Anirudha Chavan]

I am not waiting for Angular JS calls to finish, I am taking first full screenshot and then cropping it.
If taken full screenshot , it showing correct GUI/text on the page, problem is in cropping them by elements position/size. So here I don't think I have to wait for Angular JS calls.
Let me know if I am wrong.

[David]

Then are you sure you have the right element (for position and size) to crop against?

Another thing to keep in mind, different browsers also render element position & size slightly differently. Therefore one browser may crop the screenshot and give you a result, another browser executing same code may give you a slightly different cropped image. It would be good to check the cropped screenshot across browsers to also see if the problem is specific to certain browser(s).

[Anil Kumar Reddy Yarragonda]

@ Anirudha, 
 Did you fixed that issue? if you have any solution then please share with us.

[Soumyodeep Karmakar]

This code is working in my monitor but while I am checking on my own 15" laptop it is not taking the full image screenshot. Help please. I am not able to fix this issue. Tried using scroll bar, window dimension change, changing the browser size, etc etc. Nothing worked! Please help ASAP.

Please send me a message on soumy...@gmail.com

File f1 = ((TakesScreenshot) d1).getScreenshotAs(OutputType.FILE); int ImageWidth = element.getSize().getWidth(); int ImageHeight = element.getSize().getHeight(); Point point = element.getLocation(); int xcord = point.getX(); int ycord = point.getY(); BufferedImage img = ImageIO.read(f1); BufferedImage dest = img.getSubimage(xcord, ycord, ImageWidth, ImageHeight); ImageIO.write(dest, "png", f1); FileUtils.copyFile(f1, new File("C:\\Users\\skarmaka\\Downloads\\b.png"));

[Asim Sansi]

Anirudha Chavan, did you find any solution for this ? i know it's an really old post but please do let me know how you got around this issue

[Rishikesh Patel]

You can use tool like shutterbug or Ashot for element screenshot.

Thanks and regards,
Rishikesh Patel.
Mob - +91 90043 65654
Skype ID - Rishikesh9833
Email - rishik...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/1274960a-6967-4282-8280-1eb567b70362%40googlegroups.com.