Applitools for Selenium IDE Tutorial
The following video shows how to use the Applitools for Selenium IDE browser extension and goes over the following features: Installation, creating and running tests, adding Visual checkpoints, using Visual Grid, doing Root cause Analysis of a Visual bug, and doing Auto-maintenance -- all without writing a single line of code!🤓
Selenium IDE videos
If you are new to the Selenium IDE itself (which is a different browser extension) that "Applitools for Selenium IDE" extension depends on, the following four videos will get you started.
Install the latest version of the Applitools extension from the Chrome Store or from the Firefox store. At this point you will have a new icon in your navigation bar which contains the Applitools Eyes logo. https://addons.mozilla.org/en-US/firefox/addon/applitools-for-selenium-ide/
Clicking it will show a window prompting you to open the IDE if it's not already open.
- 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.
Specify a branch or a parent branch. For more details on branching see the Eyes branching documentation
Visual Grid feature
You can choose to run tests locally but render Visual checkpoints on the Visual Grid. Please check out the tutorial video above for more information.
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.
Eyes Check Window
eyes check window command 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.
Eyes Check Element
eyes check element command 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.
eyes 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.
Eyes Set Viewport Size
eyes set viewport size command 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.
Eyes Set Match Timeout
eyes set match timeout 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).
Eyes Set Match Level
eyes set match level 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 Root Cause Analysis
- Toggle if we want to automatically open the Test result in Applitools after the test runs (Recommended)
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.