A web page test compares a provided image (solution) with a screenshot taken of the website at the time the test is run based on their percentage difference.
Each web page test has a tolerance percentage which dictates the leniency when passing for failing a test. For example, a web page test returns a difference of 8% with a tolerance of 10%, the test will pass. A web page test that returns a difference of 11% with a check tolerance of 10% will fail and highlight the differences in red.
Web page tests are the go to test for HTML & CSS because of their flexibility and ease of use. The feedback provided provided by web page tests is unrivaled in its usefulness to students.
The options for this test are described below.
The test description shown to the user.
The URL of the web page to load and take screenshot of.
Clicking the Screenshot button will navigate to the entered URL and take a screenshot, which will be saved as the solution screenshot.
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.,
Specifying an element can significantly increase the accuracy of the test.
Advanced settings can be accessed by clicking the Show Advanced Settings link at the bottom of the test.
The height of the canvas area used to generate the image. Make as small as possible for higher test accuracy.
The width of the canvas area used to generate the image. Make as small as possible for higher test accuracy.
The percent difference between the compared images for the test to be passed.
If enabled, allows partial grading instead of 0% or 100%.
This setting is particularly useful when evaluating code like the following:
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
Here a web page test has failed with a difference of 87.66%. There are 3 sections in the web page test feedback:
Result - this section highlights the difference between “Current” and “Solution”. In this particular case, the red area is highlighting the background of the body’s header because it is the incorrect color / shade of purple. The font of the navigation buttons is also incorrect.
Current - This is what is currently being displayed by the student’s website.
Solution - This is what template that the web page test is comparing the student’s web page test to.
% difference - The difference between “Current” and “Solution” displayed via “Result” section.