API

The API of CSS Critic. Throughout the 0.x releases this API is subject to change to allow us to move quickly. If you need stability in a certain area, shout out loud enough.

csscritic.add(testCase)

• Adds a test case to be executed, with testCase being an object of key/value pairs with
  • url link to the test case HTML document,
  • hover a selector matching a single element on the page that should receive a :hover effect,
  • active a selector matching a single element on the page that should receive a :active effect,
  • width the viewport width, default: 800 (since 0.4.0),
  • height the viewport height, default: 100 (since 0.4.0).
• Optionally the url can be passed in directly if no other options are needed.

csscritic.addReporter(reporter)

• Adds a reporter instance for reporting test results.

csscritic.execute()

• Executes all test cases. Returns a promise that is fulfilled once all tests are done and reporters have finished.

csscritic.NiceReporter()

• A reporter that reports test results in the browser (since 0.5.0)

csscritic.BasicHTMLReporter()

• The older of two reporters reporting test results in the browser

Reporter API

The following interface can be implemented for custom reporters:

reporter.reportComparisonStarting(configuredComparison)

• Called when a test case is starting to be evaluated with configuredComparison being an object of key/value pairs with
  • testCase the test case as passed to csscritic.add(),
  • referenceImage the reference image (if exists; in upcoming version),
  • viewport the width and height of the viewport the reference image was rendered with (if exists; in upcoming version).

reporter.reportDeselectedComparison(configuredComparison)

• (in upcoming version) Called when a test case has been configured but deselected from the run with configuredComparison being an object of key/value pairs with
  • testCase the test case as passed to csscritic.add(),
  • referenceImage the reference image (if exists),
  • viewport the width and height of the viewport the reference image was rendered with (if exists).

reporter.reportComparison(comparison)

• Called when a test case has been evaluated with comparison being an object of key/value pairs with
  • status the result of the test (one out of passed, failed, referenceMissing, error),
  • testCase the test case as passed to csscritic.add(),
  • pageImage the image of the rendered page (if exists),
  • referenceImage the reference image (if exists),
  • renderErrors a list of error messages from rendering (if any),
  • viewport the width and height of the viewport the page is rendered with,
  • resizePageImage(width, height) a method to resize the rendered page, returns a promise (if exists),
  • acceptPage() a method to accept the rendered page as new reference (is exists).

reporter.reportTestSuite(result)

• Called when the test suite has run with result containing key/value pairs with
  • success true if all test passed, false otherwise.

If any of the reporter's methods need to perform asynchronous work they should return a promise and fulfill once done.