Skip to content

Commit 16b1c76

Browse files
glibasglibas
committed
Adding frame and scrollable element screenshot
1 parent aea342c commit 16b1c76

File tree

14 files changed

+758
-172
lines changed

14 files changed

+758
-172
lines changed

‎README.md

+120-26
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,6 @@
77

88
Selenium Shutterbug is a utility library written in Java for making screenshots using [Selenium WebDriver](http://www.seleniumhq.org/projects/webdriver/ "SeleniumHQ WebDriver page") and further customizing, comparing and processing them with the help of [Java AWT](https://en.wikipedia.org/wiki/Abstract_Window_Toolkit "AWT wiki").
99

10-
## Code Example
11-
12-
Screenshot of the page with scrolling (for Chrome to make screenshot of the whole page but not viewport only):
13-
```
14-
Shutterbug.shootPage(driver, ScrollStrategy.WHOLE_PAGE).save("C:\\testing\\screenshots\\");
15-
```
16-
Highlighting, adding titles, text, etc:
17-
```
18-
Shutterbug.shootPage(driver)
19-
.blur(searchBox)
20-
.highlight(searchBtn)
21-
.monochrome(googleLogo)
22-
.highlightWithText(googleLogo, Color.blue, 3, "Monochromed logo",Color.blue, new Font("SansSerif", Font.BOLD, 20))
23-
.highlightWithText(searchBox, "Blurred secret words")
24-
.withTitle("Google home page - " + new Date())
25-
.withName("home_page")
26-
.withThumbnail(0.7)
27-
.save("C:\\testing\\screenshots\\");
28-
```
29-
More examples [here](https://github.com/assertthat/selenium-shutterbug/wiki/Examples-of-usage)
30-
31-
## Motivation
32-
3310
The idea behind the project is to make testers life easier by enabling them to create descriptive screenshots which, in some cases, could be directly attached to the bug reports or serve as a source of information about system state at a specific moment of time.
3411

3512
## Installation
@@ -42,7 +19,7 @@ The project is available in [Maven Central](http://search.maven.org/#search%7Cga
4219
<dependency>
4320
<groupId>com.assertthat</groupId>
4421
<artifactId>selenium-shutterbug</artifactId>
45-
<version>x.x</version>
22+
<version>0.9.5</version>
4623
<exclusions>
4724
<exclusion>
4825
<groupId>org.seleniumhq.selenium</groupId>
@@ -54,16 +31,133 @@ The project is available in [Maven Central](http://search.maven.org/#search%7Cga
5431
##### Using Gradle
5532

5633
```
57-
compile ('com.assertthat:selenium-shutterbug:x.x') {
34+
compile ('com.assertthat:selenium-shutterbug:0.9.5') {
5835
exclude group: "org.seleniumhq.selenium", name: "selenium-java"
5936
}
6037
```
6138

6239
##### Using SBT
6340

6441
```
65-
"com.assertthat" % "selenium-shutterbug" % "x.x" exclude("org.seleniumhq.selenium", "selenium-java"),
42+
"com.assertthat" % "selenium-shutterbug" % "0.9.5" exclude("org.seleniumhq
43+
.selenium", "selenium-java"),
44+
```
45+
46+
## Code Example
47+
48+
Below are some basic examples of usage.
49+
50+
###Page screenshots
51+
- Take screenshot and save to default location (./screenshots/):
52+
```java
53+
Shutterbug.shootPage(driver).save();
54+
```
55+
- Take screenshot and specify location to save to:
56+
```java
57+
Shutterbug.shootPage(driver).save("C:\\testing\\screenshots\\");
58+
```
59+
- Wait for condition before taking screenshot:
60+
```java
61+
Shutterbug.wait(visibilityOfElementLocated(By.id("someId")), 5).shootPage(driver, Capture.FULL).save();
62+
```
63+
- Take screenshot and scroll in both directions (Will make full page screenshot in Chrome):
64+
```java
65+
Shutterbug.shootPage(driver, Capture.FULL_SCROLL).save();
66+
```
67+
- Take screenshot and scroll in both directions with half a second scrolling timeout (Will make full page screenshot in Chrome) and use devicePixelRatio - for retina displays:
68+
```java
69+
Shutterbug.shootPage(driver, Capture.FULL_SCROLL ,500,true).save();
70+
```
71+
- Take screenshot of the whole page using Chrome DevTools. This is applicable for Chrome only. Use this one instead of ScrollStrategy.WHOLE_PAGE if page has sticky header or any other sticky elements.
72+
```java
73+
Shutterbug.shootPage(driver, Capture.FULL,true).save();
74+
```
75+
###WebElement screenshots
76+
77+
- Take screenshot of specified WebElement only:
78+
```java
79+
Shutterbug.shootElement(driver, element).save();
80+
```
81+
82+
###Screenshots comparison
83+
84+
- Compare screenshot taken with the expected one with specified deviation rate:
85+
```java
86+
Shutterbug.shootPage(driver).equals(otherImage,0.1);
87+
```
88+
- Compare screenshot taken with the expected one with specified deviation rate and create new image with differences highlighted:
89+
```java
90+
Shutterbug.shootPage(driver).equalsWithDiff(otherImage,pathToNewImage,0.1);
91+
```
92+
- Compare screenshot taken with the expected one and create new image with differences highlighted:
93+
```java
94+
Shutterbug.shootPage(driver).equalsWithDiff(otherImage,pathToNewImage);
95+
```
96+
97+
### Screenshots Thumbnails
98+
- Take screenshot and save thumbnail as well (with specified resize ratio):
99+
```java
100+
Shutterbug.shootPage(driver).withThumbnail(0.4).save();
101+
```
102+
103+
### Frame screenshots
104+
- Take screenshot of scrollable frame locatable by supplied `frameID`:
105+
```java
106+
Shutterbug.shootFrame(driver, "frameID", Capture.FULL_SCROLL).save();
107+
```
108+
109+
- Take screenshot of scrollable frame web element:
110+
```java
111+
Shutterbug.shootFrame(driver, frameWebElement, Capture.FULL_SCROLL).save();
112+
```
113+
114+
### Scrollable WebElements screenshots
115+
116+
117+
- Take screenshot of scrollable web element. Horizontal capture only:
118+
```java
119+
Shutterbug.shootElement(driver, webElement, Capture.HORIZONTAL_SCROLL).save();
120+
```
121+
122+
### Operations chaining
123+
124+
To demonstrate how it all can be pieced together the example follows:
125+
```java
126+
System.setProperty("webdriver.chrome.driver", "your path to chromedriver.exe");
127+
WebDriver driver = new ChromeDriver();
128+
driver.get("https://www.google.com/imghp");
129+
WebElement googleLogo = driver.findElement(By.id("hplogo"));
130+
WebElement searchBtn = driver.findElement(By.id("sblsbb"));
131+
WebElement searchBox = driver.findElement(By.className("gsfi"));
132+
133+
searchBox.sendKeys("Testing");
134+
135+
Shutterbug.shootPage(driver)
136+
.blur(searchBox)
137+
.highlight(searchBtn)
138+
.monochrome(googleLogo)
139+
.highlightWithText(googleLogo, Color.blue, 3, "Monochromed logo",Color.blue, new Font("SansSerif", Font.BOLD, 20))
140+
.highlightWithText(searchBox, "Blurred secret words")
141+
.withTitle("Google home page - " + new Date())
142+
.withName("home_page")
143+
.withThumbnail(0.7)
144+
.save("C:\\testing\\screenshots\\");
145+
driver.quit();
66146
```
147+
### Available capture types
148+
149+
`VIEWPORT` - capture visible part of the viewport only
150+
151+
`FULL` - full page screenshot using devtools
152+
153+
`FULL_SCROLL` - full page/element/frame screenshot using scroll & stitch method
154+
155+
`VERTICAL_SCROLL` - vertical scroll page/element/frame screenshot using scroll
156+
& stitch method
157+
158+
`HORIZONTAL_SCROLL` - horizontal scroll page/element/frame screenshot using
159+
scroll & stitch method
160+
67161
## Contributing
68162

69163
For details please read [CONTRIBUTING](https://github.com/assertthat/selenium-shutterbug/blob/master/CONTRIBUTING.md "CONTRIBUTING")

‎pom.xml

+10
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,16 @@
6161
<artifactId>java-semver</artifactId>
6262
<version>0.9.0</version>
6363
</dependency>
64+
<dependency>
65+
<groupId>ru.yandex.qatools.ashot</groupId>
66+
<artifactId>ashot</artifactId>
67+
<version>1.5.4</version>
68+
</dependency>
69+
<dependency>
70+
<groupId>io.github.bonigarcia</groupId>
71+
<artifactId>webdrivermanager</artifactId>
72+
<version>4.0.0</version>
73+
</dependency>
6474
</dependencies>
6575

6676
<build>

‎src/main/java/com/assertthat/selenium_shutterbug/utils/web/ScrollStrategy.java renamed to ‎src/main/java/com/assertthat/selenium_shutterbug/core/Capture.java

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
* Distributed under the terms of the MIT License
44
*/
55

6-
package com.assertthat.selenium_shutterbug.utils.web;
6+
package com.assertthat.selenium_shutterbug.core;
77

88
/**
99
* Created by Glib_Briia on 17/06/2016.
1010
*/
11-
public enum ScrollStrategy {
12-
VIEWPORT_ONLY, WHOLE_PAGE, WHOLE_PAGE_SCROLL_AND_STITCH
11+
public enum Capture {
12+
VIEWPORT, FULL, FULL_SCROLL, VERTICAL_SCROLL, HORIZONTAL_SCROLL
1313
}

‎src/main/java/com/assertthat/selenium_shutterbug/core/PageSnapshot.java

+27-27
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ public PageSnapshot highlight(WebElement element) {
4444
* Highlights WebElement within the page with provided color
4545
* and line width.
4646
*
47-
* @param element WebElement to be highlighted
48-
* @param color color of the line
47+
* @param element WebElement to be highlighted
48+
* @param color color of the line
4949
* @param lineWidth width of the line
5050
* @return instance of type PageSnapshot
5151
*/
@@ -64,8 +64,8 @@ public PageSnapshot highlight(WebElement element, Color color, int lineWidth) {
6464
*
6565
* @param element WebElement to be highlighted with Color.red
6666
* and line width 3
67-
* @param text test to be places above highlighted element with
68-
* Color.red, font "Serif", BOLD, size 20
67+
* @param text test to be places above highlighted element with
68+
* Color.red, font "Serif", BOLD, size 20
6969
* @return instance of type PageSnapshot
7070
*/
7171
public PageSnapshot highlightWithText(WebElement element, String text) {
@@ -81,22 +81,22 @@ public PageSnapshot highlightWithText(WebElement element, String text) {
8181
* Highlight WebElement within the page, same as in {@link #highlight(WebElement)}
8282
* but providing ability to override default color, font values.
8383
*
84-
* @param element WebElement to be highlighted
84+
* @param element WebElement to be highlighted
8585
* @param elementColor element highlight color
86-
* @param lineWidth line width around the element
87-
* @param text text to be placed above the highlighted element
88-
* @param textColor color of the text
89-
* @param textFont text font
86+
* @param lineWidth line width around the element
87+
* @param text text to be placed above the highlighted element
88+
* @param textColor color of the text
89+
* @param textFont text font
9090
* @return instance of type PageSnapshot
9191
*/
9292
public PageSnapshot highlightWithText(WebElement element, Color elementColor, int lineWidth, String text, Color textColor, Font textFont) {
93-
try {
94-
highlight(element, elementColor, 0);
95-
Coordinates coords = new Coordinates(element, devicePixelRatio);
96-
image = ImageProcessor.addText(image, coords.getX(), coords.getY() - textFont.getSize() / 2, text, textColor, textFont);
97-
} catch (RasterFormatException rfe) {
98-
throw new ElementOutsideViewportException(ELEMENT_OUT_OF_VIEWPORT_EX_MESSAGE, rfe);
99-
}
93+
try {
94+
highlight(element, elementColor, 0);
95+
Coordinates coords = new Coordinates(element, devicePixelRatio);
96+
image = ImageProcessor.addText(image, coords.getX(), coords.getY() - textFont.getSize() / 2, text, textColor, textFont);
97+
} catch (RasterFormatException rfe) {
98+
throw new ElementOutsideViewportException(ELEMENT_OUT_OF_VIEWPORT_EX_MESSAGE, rfe);
99+
}
100100
return this;
101101
}
102102

@@ -119,7 +119,7 @@ public PageSnapshot blur() {
119119
public PageSnapshot blur(WebElement element) {
120120
try {
121121
image = ImageProcessor.blurArea(image, new Coordinates(element, devicePixelRatio));
122-
}catch(RasterFormatException rfe) {
122+
} catch (RasterFormatException rfe) {
123123
throw new ElementOutsideViewportException(ELEMENT_OUT_OF_VIEWPORT_EX_MESSAGE, rfe);
124124
}
125125
return this;
@@ -134,7 +134,7 @@ public PageSnapshot blur(WebElement element) {
134134
*/
135135
public PageSnapshot monochrome(WebElement element) {
136136
try {
137-
image = ImageProcessor.monochromeArea(image, new Coordinates(element,devicePixelRatio));
137+
image = ImageProcessor.monochromeArea(image, new Coordinates(element, devicePixelRatio));
138138
} catch (RasterFormatException rfe) {
139139
throw new ElementOutsideViewportException(ELEMENT_OUT_OF_VIEWPORT_EX_MESSAGE, rfe);
140140
}
@@ -148,10 +148,10 @@ public PageSnapshot monochrome(WebElement element) {
148148
* @return instance of type PageSnapshot
149149
*/
150150
public PageSnapshot blurExcept(WebElement element) {
151-
try{
152-
image = ImageProcessor.blurExceptArea(image, new Coordinates(element,devicePixelRatio));
153-
}catch(RasterFormatException rfe){
154-
throw new ElementOutsideViewportException(ELEMENT_OUT_OF_VIEWPORT_EX_MESSAGE,rfe);
151+
try {
152+
image = ImageProcessor.blurExceptArea(image, new Coordinates(element, devicePixelRatio));
153+
} catch (RasterFormatException rfe) {
154+
throw new ElementOutsideViewportException(ELEMENT_OUT_OF_VIEWPORT_EX_MESSAGE, rfe);
155155
}
156156
return this;
157157
}
@@ -160,15 +160,15 @@ public PageSnapshot blurExcept(WebElement element) {
160160
* Crop the image around specified element with offset.
161161
*
162162
* @param element WebElement to crop around
163-
* @param offsetX offsetX around element in px
163+
* @param offsetX offsetX around element in px
164164
* @param offsetY offsetY around element in px
165165
* @return instance of type PageSnapshot
166166
*/
167167
public PageSnapshot cropAround(WebElement element, int offsetX, int offsetY) {
168-
try{
169-
image = ImageProcessor.cropAround(image, new Coordinates(element,devicePixelRatio), offsetX, offsetY);
170-
}catch(RasterFormatException rfe){
171-
throw new ElementOutsideViewportException(ELEMENT_OUT_OF_VIEWPORT_EX_MESSAGE,rfe);
168+
try {
169+
image = ImageProcessor.cropAround(image, new Coordinates(element, devicePixelRatio), offsetX, offsetY);
170+
} catch (RasterFormatException rfe) {
171+
throw new ElementOutsideViewportException(ELEMENT_OUT_OF_VIEWPORT_EX_MESSAGE, rfe);
172172
}
173173
return this;
174174
}

0 commit comments

Comments
 (0)