Test the Web Forward

How to Write a Javascript Test

JavaScript Test Overview

  • JavaScript tests programmatically verify functionality
  • JavaScript tests have some advantages over Reftests
    • Robust
    • Flexible
    • Performant
    • Powerful
  • Reftests have some advantages over JavaScript tests
    • Verify complete rendering
    • Easy to understand
    • Works for clients that don't support JavaScript
    • Avoid introducing additional technologies (JS)

JavaScript Test Overview (cont'd)

  • JavaScript can be used in conjunction with Reftests
    • Test can have both a reference file and a JavaScript section
    • Reftest portion supports clients without script engines
  • Self-describing Reftests are the preferred test format
  • JavaScript tests should be used in the following scenarios:
    • Testing a JS API or behavior (ex: CSSOM spec)
    • Adding automation to Reftests
  • W3C provides a framework (testharness.js) to simplify and standardize JS test creation


testharness.js and testharnessreport.js

    <script src="/resources/testharness.js"></script>

    <script src="/resources/testharnessreport.js"></script>
  • JavaScript API for making common test assertions
  • Should be used by all JavaScript tests
  • Path must be to /resources directory at root level
  • Element with id="log" should exist in test file
    • Test results table will be added to this element, if it exists

The test function

            test(test_function, name, properties)
  • Used for synchronous tests
    • async_test() is also provided by testharness for asychronous testing
  • Documented and implemented in testharness.js
  • Used to define an individual test case in a file
    • Common for a file to have multiple calls to test()
  • testharness will display PASS/FAIL for each call to test()

test() Argument 1: test_function

            test(test_function, name, properties)
  • test_function must be an object, not a function call
  • test_function will typically be one of the assert methods supplied by testharness
    • Can also be user defined if no assert method provides the needed functionality
  • Result from the assertion will determine PASS/FAIL
  • Usage example:
                test(function() {assert_true(true)}, name, properties)

test() Argument 2: Name

            test(test_function, name, properties)
  • name is a string that identifies the test
  • name should be short, unique, and must not change
  • name will be displayed in the test results table
  • Usage example:
            test(function() {assert_true(true)}, "test_name", properties)

test() Argument 3: Properties

            test(test_function, name, properties)
  • properties is an object that overrides defaults
  • This argument is optional
  • Recognized properties include timeout and metadata
  • Usage example:
     test(function() { assert_true(true) }, "test_name", 


    help: 'http://www.w3.org/TR/spec#section',

    author: ['Bill Gates <bgates@msn.com>', 'Steve Jobs http://apple.com/sjobs'],

    assert: 'This test something.', 'This also tests something else.'})

Assert methods

  • testharness.js provides multiple assert methods
    • Full list is provided in the comment section of testharness.js
    • Typically supplied as the test_function for test()
  • All assert methods contain an optional description argument that is only output if the assertion fails
    • Used to provide additional debug information
  • All asserts must be located in a call to test()
    • asserts outside won't be detected correctly by the harness and may cause a file to stop testing

Assert Example

        assert_equals(actual, expected, description)
  • actual: The actual value from the functionality being tested
  • expected: The expected value
  • description (optional): Output only if the assertion fails
  • Usage example:
     assert_equals(getActualData("myElement"), 100, "Expected value for myElement is 100")

Sample Test Case

API test for the transform property described in the CSS3 Transforms spec using the translate() function

Spec Links:



  <title>CSS Transforms API Test: transform translate</title>
  <link rel="author" title="Your Name" href="mailto:youremail@address.com">
  <link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-property">
  <link rel="help" 
  <meta name="flags" content="dom">
  <meta name="assert" content="The transform should be translate(100px,100px)">	
  • JavaScript tests have similar requirements as Reftests
  • dom token in flags metadata specifies that JavaScript is required
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>    
  • testharness.js and testharnessreport.js imported
  • Path to both scripts points at /resources directory at root level
    • This is the required path before submitting to CSSWG Test Repository


    <div id="myDiv"></div>
    <div id="log"></div>    

        // Set the transform 
        document.getElementById("myDiv").style.transform = "translate(100px,100px)";

        // Verify that the transform was set as expected
        test(function() {assert_equals(
            document.getElementById("myDiv").style.getPropertyCSSValue("transform").cssText, //Actual
            "translate(100px, 100px)",  //Expected
            "transform should be translate(100px,100px)")}, //Description
            "Transform_Translate_100px_100px"); //name
  • myDiv div used as test element - translate applied in JS
  • log div used as container for test results
  • test() uses assert_equals as test_function
  • assert_equals actual argument supplied by API call

Test Results


Test Results


Questions & Answers