WebSCT Tests

Test Structure

WebSCT Tests are written in JavaScript, and they run in the learner's browser, inside the context of their iframe window of the Web Browser component. For this reason, inside a WebSCT test, you have access to the full document object of a learner's page. This allows WebSCT to test all elements of the DOM, such as page structure and styling, as well as to access global variables in front-end JavaScript files.

WebSCT tests work on a default-pass assumption. If the entire test file runs without throwing an Error, the test will pass. If an error is thrown, the test will fail and that error's message property will be displayed to learners.

WebSCT tests can be written in vanilla JavaScript with manually thrown errors, but many WebSCT tests use Codecademy's jQuery Expect ($expect()) library. This library offers helper methods for many common DOM tests. jQuery Expect is loaded automatically in WebSCT tests and $expect() is available globally.

Example Tests

Basic jQuery Expect test

This test is helpful for simple, "Did the learner create the correct element?" tests:

$expect('h1').to.exist('Add an `<h1>` element to the page');

Defensive WebSCT Testing

This test mixes jQuery expect assertions with vanilla JavaScript and attempts to be very defensive and provide helpful, guiding feedback in anticipation of learner misunderstanding.

The prompt for this test asks learners to create an ordered list with at least three elements.

var orderedLists = document.querySelectorAll('ol');
var unorderedLists = document.querySelectorAll('ul');

// Warn learners who use <ul> instead of <ol>
if (orderedLists.length === 0 && unorderedLists.length > 0) {
  throw new Error('Make sure to include an _ordered_ list, not an unordered one.');
}

$expect('ol').to.exist('Create an ordered list element `<ol>`.');

// Keep track of the learner's largest ol in case they forget to include 3 list items
var largestList = 0;

var containsThreeListElements = [].some.call(orderedLists, function(el) {
  var count = 0;
  for (var i = 0; i < el.children.length; i++) {
    if (el.children[i].tagName === 'LI') {
      count++;
    }
  }
  if (count > largestList) { largestList = count; }
  return count >= 3;
})

if (!containsThreeListElements) {
  throw new Error('Make sure to include at least 3 list items in your list. Yours contained ' + largestList + '.');
}

Other Guidelines & Pitfalls

• Actual code (real variable names, language syntax, etc. ) in feedback messages should be code-ticked (`).
• WebSCT tests should follow Test standards.

Escaping HTML Tags

Always use backticks for code in test feedback messages, but especially with WebSCT/HTML tests, as unescaped HTML will not render properly in error messages.

Properly escaped HTML:

'Add a heading element (`<h1>`-`<h6>`) to the page.'

Improperly escaped HTML:

'Add a heading element (<h1>-<h6>) to the page.'

Testing CSS Properties

When testing CSS, window.getComputedStyle() can have different behavior between browsers. jQuery Expect uses window.getComputedStyle() under the hood, and it's also the best way to test CSS properties with vanilla JS, so use caution and test multiple browsers, particularly when looking for values such as auto, font weights, or relative units such as %, em, or rem.

Browser-side Testing

WebSCT tests execute in a learner's browser. In addition to the possibility of issues with differing implementations of Web APIs, learners may also run Codecademy in older browsers. Be nice and use ES5 whenever possible. You can always use the Babel REPL for quick transpilation.