Warhol

Toolbar button

Once you have installed the extension and you are signed in, you can use both the devtools panel or the toolbar button to control how Warhol runs tests inside your browser. The devtools panel has more features, but the toolbar button is easier to access.

The toolbar button shows the number of design errors Warhol found on your web page (if any) and you can click the toolbar button to open the toolbar popup.

Selecting a pattern library #

When you first click on the toolbar button have not yet selected a pattern library, the popup contains a simple user interface for selecting a pattern library to test the current page against:

Once you select a pattern library from the list, Warhol immediately starts downloading the snapshots and runs the tests directly afterwards. The list options say on disk in parenthesis if the snapshots have already been downloaded before and say available in parenthesis otherwise. A pattern library remains active for the tab it was selected in until the tab closes or you select „None“ from the list of pattern libraries.

The „Reload list“ button only updates the list of pattern libraries, but does not update the snapshots themselves. To download snapshot updates you have to go to the devtools panel.

Controlling test runs #

When a pattern library is activated, the toolbar popup becomes a little more complex:

Apart from selecting another pattern library (or changing back to „None“), the popup enables you to:

• Control test options: change if Warhol should check just components, just the theme, both and control if the test run should stop on the first error. See the docs on the options panel tab for more details on test options.
• Change overlay options: control which parts of the content overlay to render, if any at all. See the docs on the options panel tab for more details on overlay options.
• Filter test results: tick the checkboxes to control the report levels that you want to be visible and optionally filter by error message or element selector.

The same options are also available in the devtools panel and are only duplicated in the toolbar button for easier access.

Good to know #

Test options, overlay options and filter settings are persisted on change.