Taking screenshot of a selected WebElement

I have made a demo project on GitHub:

Problem to solve

This project proposes a solution to a discussion posted at Katalon Forum. The original question was:

I want to screen only the parts of a website, which I can see on my desktop. The Katalon screenshot command will screenshot a big part of the website. It would be great if I could decide which parts of a website the screenshot should take.

aShot, a WebDriver Screenshot utility, provides an immediate solution to this.

This project shows you how to use aShot in a Katalon Studio project, and provides a working example of taking a screenshot of a selected HTML element in a Web page.

How to run the project

  1. download the zip of this project at https://github.com/kazurayam/TakingScreenshotOfSelectedWebElement/releases
  2. unzip it. you get the project folder
  3. start Katalon Stuio, open the project
  4. open Test Cases/TC1 and run it with your favorites browser
  5. the test script will open Katalon Forum and take screenshot of the banner
  6. when the test script finished, you will find a PNG file <projectDir>/tmp/forum-banner.png

The screenshot would look like this: forum-banner

Codes

Please read the source codes and see what I did.

  1. Test Cases/TC1
  2. Keywords/com.kazurayam.ksbackyard.ScreenshotdriverMini
8 Likes

as usual +1

Very helpfull @kazurayam but a screenshot is not attaching to the pdf report. please help how to attach it to the pdf report.

Nothing I can do.

PDF report is created by the Basic Report plugin. This plugin is not customisable at all.