Adding Web Page Tests

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.

Web page tests are not compatible with ES6 syntax.

Webpage Test Design Template

The web page test form.

Description

The test description shown to the user.

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.

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:

$(document).ready(function() {
$('li').addClass('item');
})

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).

Example

An incomplete web page test

Here a web page test has failed with a difference of 87.66%. There are 3 sections in the web page test feedback:

  1. 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.

  2. Current - This is what is currently being displayed by the student’s website.

  3. Solution - This is what template that the web page test is comparing the student’s web page test to.

  4. % difference - The difference between “Current” and “Solution” displayed via “Result” section.