Description
Screenshots containing real-time data can not be compared to screenshots taken in a previous test session. So, it is not possible for automated test runs to tell changes in layout from changes in data.
In order to validate screenshots in automated web tests it is necessary to be able to exclude real-time data from screenshots supposed to be validated.
See this example:
Original Screenshot: Masking Realtime Data: Resulting Masked Image:
The rightmost (masked) image in the above example will always be the same across test runs. Hence, an automated test may be able to compare a masked image taken at a previous test run to a screenshot taken at a current test run.
One may argue that such masks could be manually created, but this would contradict the purpose of automated testing. Moreover, it would result in extraordinary loads of redundant manpower for manually creating masks in cross-device tests. This is particularly true for volatile test pages created in agile development environments.
So, I'd like to suggest to add a WebDriver feature that's masking particular areas of a web page in screenshots.
For this purpose two things are required:
-
Some kind of tag that's telling WebDriver to mask a particular inline/block element in a document.
-
A capability to give the mask color (in order for test validation algorithms to automatically identify a mask in an image if that's a requirement)
Just to give a start of thought, I'd like to propose this kind of implementation:
A new WebDriver capability may be introduced, called "imageMask". It is supposed to be an Object with the following TypeScript definition:
interface imageMask
{ public selector: string
, public color: string
}-
The "
imageMask.selector" property shall be accepting any CSS3 selector, telling a WebDriver implementation which document elements to look out for when it's supposed to render masks in a screenshot. -
The "
imageMask.color" property shall be accepting any CSS3 color value, having the alpha channel usually being set to "1", but allowing for semi-transparent masks, too. The WebDriver implementation is supposed to overlay regions to be masked with this color.
Example
Given my above proposal, the suggested WebDriver capability may look like this:
{ "imageMask":
{ "selector": "div[wd-mask]"
, "color": "rgba(255,0,255,1)"
}
}... or, like this:
{ "imageMask":
{ "selector": "div[wd-mask]"
, "color": "FF00FF"
}
}... or, like this:
{ "imageMask":
{ "selector": "div[wd-mask]"
, "color": "hsl(300,100,50)"
}
}In this example, the above web page's HTML source may look like this:
<!doctype html>
<html>
<head>
<title>Fast Brokers</title>
</head>
<body>
<header>
<h1>Fast Brokers</h1>
<div>
<div>
<a href="#"><img alt="Login" src="..."/></a>
<a href="#"><img alt="Search" src="..."/></a>
</div>
<div wd-mask="wd-mask">02/05/2019 10:52 a.m.</div>
</div>
</header>
<main>
<h2>Twyx Corp</h2>
<table>
<tbody>
<tr><th>WKN:</th><td>A0M2QP</td></tr>
<tr><th>ISIN:</th><td>CNE1020634Y4</td></tr>
<tr><th>Sector:</th><td>Telecommunication</td></tr>
<tr><th>Country:</th><td>China</td></tr>
</tbody>
</table>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Charts</a></li>
<li><a href="#">News</a></li>
</ul>
<div wd-mask="wd-mask">$ 105.75</div>
<div wd-mask="wd-mask">+ $ 2.11 / 7.24 %</div>
<div wd-mask="wd-mask">02/05/2019 10:45 a.m., direct trade </div>
<ul>
<li><a href="#">Watch</a></li>
<li><a href="#">Buy</a></li>
<li><a href="#">Sell</a></li>
</ul>
</main>
<footer>
<a href="#">contact us</a> |
<a href="#">about</a> |
<a href="#">feedback</a> |
<a href="#">forums</a> |
</footer>
</body>
</html>The excerpt from the above HTML document, containing the important parts only:
<div wd-mask="wd-mask">02/05/2019 10:52 a.m.</div>…
<div wd-mask="wd-mask">$ 105.75</div>
<div wd-mask="wd-mask">+ $ 2.11 / 7.24 %</div>
<div wd-mask="wd-mask">02/05/2019 10:45 a.m., direct trade </div>