Proposal: Add ability to have screenshots masked

Nobody has claimed this yet.

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:

Original Screenshot Masking Realtime Datea 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&ensp;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&ensp;/&ensp;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&ensp;10:52 a.m.</div>

…

      <div wd-mask="wd-mask">$ 105.75</div>
      <div wd-mask="wd-mask">+ $ 2.11&ensp;/&ensp;7.24 %</div>
      <div wd-mask="wd-mask">02/05/2019 10:45 a.m., direct trade </div>

Start with the issue's imageMask capability proposal, CSS selector and color requirements, and the supplied HTML examples. Define the WebDriver specification behavior for selecting elements and producing masked screenshots, then verify that the capability examples and real-time-data use case are covered consistently.

Written by the indexing model from the issue text.

Description

See this example:

Original Screenshot: Masking Realtime Data: Resulting Masked Image:

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:

Just to give a start of thought, I'd like to propose this kind of implementation:

Example

Given my above proposal, the suggested WebDriver capability may look like this:

In this example, the above web page's HTML source may look like this:

The excerpt from the above HTML document, containing the important parts only:

Contributor guide

First steps

Research direction

Assessment

Proposal: Add ability to have screenshots masked

Description

See this example:

Original Screenshot: Masking Realtime Data: Resulting Masked Image:

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:

Just to give a start of thought, I'd like to propose this kind of implementation:

Example

Given my above proposal, the suggested WebDriver capability may look like this:

In this example, the above web page's HTML source may look like this:

The excerpt from the above HTML document, containing the important parts only:

Contributor guide

First steps

Research direction

Assessment

Get new issues in your inbox