Visual Testing Plugin
The plugin for visual testing.
Installation
implementation(group: 'org.vividus', name: 'vividus-plugin-visual', version: '0.4.8')
Properties
Property Name | Acceptable values | Default | Description |
---|---|---|---|
|
|
The comma-separated list of locators of elements to ignore element areas |
|
|
|
The comma-separated list of locators of elements to ignore page areas |
|
|
|
|
The path to folder for saving baselines (root folder is |
|
scenario |
|
Used to append scenario based index to a baseline name |
|
|
|
Used for overriding existing ones or creating not existing baselines during compare action |
|
percentage numbers |
|
Add ability to configure sensitivity for visual checks |
|
percentage numbers |
|
Defines required difference baseline vs checkpoint to consider them inequal |
|
|
|
The path to folder for saving debug screenshots. For example, |
How to use
The plugin has the following actions: `ESTABLISH`, `COMPARE_AGAINST` and `CHECK_INEQUALITY_AGAINST`
ESTABLISH
Creates a baseline image.
Steps to establish baseline:
-
Run step
When I ESTABLISH baseline with `name`
-
Open report

-
Save image using
contextual mouse click
→ Save as into folder for baselines


COMPARE_AGAINST
Compares actual appearance of the page or element against the baseline. Make sure that the baseline you compare against actually exists.
Steps to compare baseline:
-
Run step
When I COMPARE_AGAINST baseline with `name`
-
Open report

-
Review comparison results

-
If you need to accept the new baseline:
a) Switch to checkpoint view

b) Contextual click on the checkpoint image → save as to baseline folder
CHECK_INEQUALITY_AGAINST
Work the same way as COMPARE_AGAINST
except it checks if actual appearance differs from the baseline.
Visual testing with custom shooting strategies
In order to support screenshot taking configuration per-project/per-step basis framework provides following approach.
Web Applications
Property based configuration could be specified using web.screenshot.strategy.<YOUR_STRATEGY_NAME>.<PROPERTY_NAME>= pattern
,
where:
YOUR_STRATEGY_NAME
- name of the custom strategy;
PROPERTY_NAME
- name of the property you want specify.
Properties based configuration:
Property Name | Acceptable values | Description |
---|---|---|
|
size in pixels |
Web header to cut (could be useful if your site has sticky header) |
|
size in pixels |
Web footer to cut (could be useful if your site has sticky footer) |
|
size in pixels |
Native header to cut |
|
size in pixels |
Native footer to cut |
|
|
Adds margins to coordinates, default one |
|
time in millis |
Timeout for scrolling during performing visual check |
|
locator |
Locator of element for performing scroll action during visual check |
|
|
Screenshot shooting strategy name ( |
|
string |
After configuration necessary properties use this one to enable your custom strategy |
Step based configuration
To use custom configuration per step, two new steps were implemented.
When I $visualAction baseline with `$baselineName` using screenshot configuration:$screenshotConfiguration
When I $visualAction baseline with `$baselineName` ignoring:$ignoringElement using screenshot configuration:$screenshotConfiguration
Examples of usage property based configuration:
web.screenshot.strategy.bombaysapphire.web-header-to-cut=80
web.screenshot.strategy.bombaysapphire.web-footer-to-cut=0
web.screenshot.strategy.bombaysapphire.scrollable-element=By.cssSelector(.page__inner)
web.screenshot.strategy.bombaysapphire.scroll-timeout=PT1S
web.screenshot.strategy.bombaysapphire.shooting-strategy=SIMPLE
web.screenshot.strategy=bombaysapphire
Examples of usage step based configuration:
When I <action> baseline with `scrollable-element-context` using screenshot configuration:
|scrollableElement |webHeaderToCut|webFooterToCut|scrollTimeout|shootingStrategy|
|By.xpath(//div[@class="page__inner"])|80 |0 |PT1S |SIMPLE |
Please see the image to get a clue about difference between native/web footer/header to cut.

Mobile Native Applications
Properties
Property Name | Acceptable values | Default | Description |
---|---|---|---|
|
|
|
Downscale checkpoint image according to a device DPR value |
Please see the image to get a clue about difference between original and downscaled images.

Property based configuration could be specified using mobile.screenshot.strategy.<YOUR_STRATEGY_NAME>.<PROPERTY_NAME>= pattern
,
where:
YOUR_STRATEGY_NAME
- name of the custom strategy;
PROPERTY_NAME
- name of the property you want specify.
Properties based configuration:
Property Name | Acceptable values | Description |
---|---|---|
|
size in pixels |
Native footer to cut |
|
|
Screenshot shooting strategy name ( |
|
string |
After configuration necessary properties use this one to enable your custom strategy |
Steps
Run simple visual test
Establishes baseline or compares against existing one.
When I $actionType baseline with `$name`
-
actionType
- `ESTABLISH`, `COMPARE_AGAINST` and `CHECK_INEQUALITY_AGAINST` -
name
- name of baseline
When I COMPARE_AGAINST baseline with `test`
Run visual test with specified configuration
Establishes baseline or compares against existing one using the specified configuration.
When I $actionType baseline with `$name` using screenshot configuration:$screenshotConfiguration
-
actionType
- `ESTABLISH`, `COMPARE_AGAINST` and `CHECK_INEQUALITY_AGAINST` -
name
- name of baseline -
screenshotConfiguration
- configuration to make screenshot
When I ESTABLISH baseline with `test` using screenshot configuration:
|scrollableElement |webFooterToCut|webHeaderToCut|coordsProvider|
|By.xpath(.//header)|100 |100 |CEILING |
Run visual test with ignoring option
Establishes baseline or compares against existing one using the ignoring option.
When I $actionType baseline with `$name` ignoring:$ignoredElements
-
actionType
- `ESTABLISH`, `COMPARE_AGAINST` and `CHECK_INEQUALITY_AGAINST` -
name
- name of baseline -
checkSettings
- examples table ofELEMENT
,AREA
,ACCEPTABLE_DIFF_PERCENTAGE
orREQUIRED_DIFF_PERCENTAGE
When I COMPARE_AGAINST baseline with `test` ignoring:
|ELEMENT |AREA |ACCEPTABLE_DIFF_PERCENTAGE|
|By.xpath(.//header)|By.cssSelector(footer)|5 |
Run visual test with ignoring option and specified configuration
Establishes baseline or compares against existing one using the ignoring option and the specified configuration.
When I $actionType baseline with `$name` ignoring:$ignoredElements using screenshot configuration:$screenshotConfiguration
-
actionType
- `ESTABLISH`, `COMPARE_AGAINST` and `CHECK_INEQUALITY_AGAINST` -
name
- name of baseline -
checkSettings
- examples table ofELEMENT
,AREA
,ACCEPTABLE_DIFF_PERCENTAGE
orREQUIRED_DIFF_PERCENTAGE
-
screenshotConfiguration
- configuration to make screenshot
When I ESTABLISH baseline with `test` ignoring:
|ELEMENT |AREA |ACCEPTABLE_DIFF_PERCENTAGE|
|By.xpath(.//header)|By.cssSelector(footer)|5 |
using screenshot configuration:
|scrollableElement |webFooterToCut|webHeaderToCut|coordsProvider|
|By.xpath(.//header)|100 |100 |CEILING |