Selenium IDE Tutorial (Beta)
After installing the extension from the Chrome Store you will have a new icon in your navigation bar which contains the Applitools Eyes logo.
Clicking it will show a window prompting you to open the IDE if it's not already open.
3.Once the IDE is open, the Eyes extension window will prompt you for your Applitools API key. See this support article for details on how to get yours.
- After you've pasted in your API key click
Applyand the window will say
Successfully connected with Selenium IDE.
If you want to configure the extension's behavior or visit your Eyes test dashboard, click the links provided in the extension window.
See Configuring The Extension below for configuration details.
Once the extension is connected with your Applitools Eyes account, you can head over to Selenium IDE and start updating your tests with commands for visual testing.
When in record mode in Selenium IDE, the Eyes extension will list the available visual testing commands. You can add a command to your test by clicking on it from this list.
Here's a breakdown of each command.
This sets a visual checkpoint on the entire window. It will scroll throughout the page and build a full page screenshot of it.
It takes an optional argument of a name to display in the test results. This goes in the
target input field in the IDE. If a name is not provided the URL of the current page will be used as the name.
This sets a visual checkpoint on an element. Note that this command will not scroll the element into view. Also, the element has to fit inside of the viewport for this command to work.
You can interactively select an element in the IDE, or identify it with standard locators in the
target input field.
Check Window, this command takes an optional argument of a name. If one is not provided the URL of the current page will be used.
This sets a visual checkpoint on part of the page. This command will not scroll the region into view, and the region has to fit inside of the viewport.
It takes an optional name argument just like
Check Window and
Check Element, defaulting to the URL of the current page if not provided.
Set Viewport Size
This resizes the browser to match the viewport size (excluding window borders). Setting a viewport size is useful for ensuring consistent test results. It is also required for every visual test since it is used to determine the layout of your app and its elements.
It takes a required argument of
If this command is not used prior to performing a check command a warning message will appear in the test log output in the IDE encouraging its use for reliable results.
Set Match Timeout
This sets the match timeout for the subsequent visual check points. More retries will be attempted when differences are found as a means to wait for the page to fully stabilize visually.
A higher timeout means more retries will be made. The default timeout is 2 seconds.
This takes a required argument of the new wait time (in milliseconds).
Set Match Level
This sets the match level for the subsequent check points. The default is
This takes a required argument of the new match level to be used. The options are
Configuring the Extension
There is additional behavior you have access to within the Eyes extension's settings window. To access it click the extension icon in your browser navigation pane and click
There are three tabs available in the settings window -
Tests tab you can:
- Toggle visual checkpoints so they can be skipped without removing them from your tests
- Toggle automatically opening the test manager after a test runs
- Specify a branch or a parent branch (for more details on branching see the Eyes branching documentation)
Account tab you can change your API key and change the server URL (e.g., if you have an on-premise or dedicated cloud server instance of Applitools Eyes running).
And in the
Advanced tab you can specify an alternate IDE Extension ID.
This functionality is typically for on-premise users who are behind a firewall and unable to get the Selenium IDE extension from the public store. When receiving it from a different source it will have a different ID than the publicly available one. To use it, input the alternate ID here.