Web Page Tests
A web page test compares a provided image (solution image) with a screenshot taken of the website at the time the test is run and calculates their difference percentage.
Each web page test has a tolerance percentage which dictates the leniency when passing for failing a test. The percentage difference between the solution image and the screenshot of the current website must not exceed the tolerance percentage to pass. Any differences will be highlighted in red.
Web page tests are the go to test for HTML & CSS because of their flexibility and ease of use. The visual feedback provided provided by web page tests is unrivaled in its usefulness to users.
Web page tests are not compatible with ES6 syntax.
Adding a Web Page Test
To add a webpage test, navigate to Checks in the left sidebar and use the New Check + button. Next, select the Webpage Test option in the drop-down and see the settings below:
Settings
Description
The test description. Shown to users if the task is live and checks are shared (which is the default).
URL
The URL of the web page to load and take screenshot of.
Screenshot
Clicking the Screenshot button will navigate to the entered URL and take a screenshot, which will be saved as the solution screenshot.
Element
Optionally select a specific element to take a screenshot of on the webpage. The element can be entered in multiple ways, including the HTML tag (ex.,
<footer>), the class of the element (ex., .my-class) the id of the element (ex., #the-id), etc.Specifying an element can significantly increase the accuracy of the test by reducing the potential for false negatives.
Advanced Settings
Advanced settings can be accessed by clicking the Show Advanced Settings link at the bottom of the test.
Height
The height of the canvas area used to generate the image. Make as small as possible for higher test accuracy.
Width
The width of the canvas area used to generate the image. Make as small as possible for higher test accuracy.
Tolerance %
The percent difference between the compared images for the test to be passed.
Partial
If enabled, allows partial grading instead of 0% or 100%.
Precondition
This powerful field can be used to specify a condition that must be true for the screenshot to be taken. It should be a valid JavaScript statement that returns a truthy value if satisfied. Vanilla JavaScript should be used unless other libraries (e.g. jQuery) have been loaded into the page.
This setting is particularly useful when evaluating code like the following:
1
$(document).ready(function() {
2
$('li').addClass('item');
3
})
Copied!
Typically, this jQuery code would not execute in time for the screenshot to be taken. Therefore the
li elements would never receive the item CSS class. By specifying a precondition such as $('.item').length, you could ensure that the screenshot would not be taken until there were HTML elements with the class item in the page (note that length is an appropriate truthy value, because 0 is falsey in JavaScript).Last modified 1yr ago