Skip to content

Usage

Jump to bottom
Randy Hunt edited this page Dec 27, 2013 · 12 revisions

Check out the demo for a full working example (run specter demo from the command line).

API

open(url, callbackFunc)

Opens a page, waits for it to finish loading, and then executes a callback function.

  • url required. The URL of the page to test. This can be an absolute URL to a page on a web server, or it can be a relative URL, either to a local file or to a document on the server specified by the hostname parameter.
  • callbackFunc required. The callback function containing test code to run after the page has loaded.

click(selector)

Sends a click event to the element matched by the selector

  • selector required. A CSS-style selector specifying the element to click.

hide(selector)

Hides the element matched by the selector

  • selector required. A CSS-style selector specifying the element to hide.

show(selector)

Shows the element matched by the selector

  • selector required. A CSS-style selector specifying the element to show.

remove(selector)

Removes the element matched by the selector

  • selector required. A CSS-style selector specifying the element to remove.

test(sizes, testFunc)

Runs testfunc() on this page for each of the given sizes.

  • sizes required. An array of the page dimensions to use when capturing screenshots. Sizes can be specified with a width and height (eg, 1024x768), or just with a width (eg, 1024) if height doesn't matter. Any captures run inside this test will be performed for every size specified here. This is handy for testing responsive designs.
  • testFunc required. This is a wrapper function for all of the capture commands being run.

capture(selector, name)

Captures a screenshot of the first element matching selector and saves it to a file, or compares it to an already-saved file by that name. Must be run from inside the test function.

  • selector required. A CSS selector to match the element whose rendered content you want to test.
  • name required. A name to associate with the saved file. Names are a combination of the test filename, the name specified here, and the screen size specified on the test command.

perform(func)

Run some javascript in the page. This method is intended for setting up page certain conditions in the page before capturing screenshots.

  • func required. A function containing the code you want to run.

wait(timeout)

Pauses test execution for the specified amount of time.

  • timeout required. The amount of time to wait, in milliseconds.

waitFor(continueFunc)

Pauses test execution until the result of continue_func() is true.

  • continueFunc required. A function that checks for some criteria and returns true when it is okay to resume execution.

waitForLoad()

Pauses test execution while a new page loads.

finish()

Required in every test file. Tells Specter that you're done defining tests on this page. finish() should always be the last instruction in callback from open.

  • no arguments

Naming

Screenshot filenames are generated by combining the name of the test file, the name given to the capture command, and the screen dimensions specified on the test command.

For example, imagine the following test file is tests/mysite/homepage.js:

open("http://example.com", function() {
    test(["640x480"], function() {
        capture(".footer", "site_footer");
    })
});

In this case, the contents of the element with the class footer would be saved in a file named baseline/mysite/homepage-site_footer-640x480.png.

Note that if your test file's name begins with test-, that portion of the name will be ignored. So if the above example test file was renamed to tests/mysite/test-homepage.js, the image file would still have the same name.

Clone this wiki locally