Visual Testing Plugin
The plugin for visual testing.
Installation
implementation(group: 'org.vividus', name: 'vividus-plugin-visual', version: '0.3.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
Plugin has following actions: `ESTABLISH`, `COMPARE_AGAINST` and `CHECK_INEQUALITY_AGAINST`
ESTABLISH
Action creates 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 baseline. Make sure you have baseline.
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:$screenshotConfigurationWhen I $visualAction baseline with `$baselineName` ignoring:$ignoringElement using screenshot configuration:$screenshotConfigurationExamples 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=bombaysapphireExamples 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
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
Run visual test with specified configuration
Run visual test with ignoring option
Run visual test with ignoring option and specified configuration
Info
Step establishes baseline or compares against existing one with using ignoring option and specified configuration
Wording
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_PERCENTAGEorREQUIRED_DIFF_PERCANTAGE -
screenshotConfiguration- configuration to make screenshot
Usage
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 |