Testing web apps using Selenium IDE
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 the Ultrafast 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.
Getting Started
First install the latest version of the Selenium IDE from the Chrome Store or from the Firefox store .
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.
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
Apply
and the window will saySuccessfully connected with Selenium IDE
.
If you want to configure the extension's behavior or visit the Eyes Test Manager, 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
Ultrafast Grid feature
You can choose to run tests locally but render Visual checkpoints on the Ultrafast Grid. Please check out the tutorial video above for more information.
Available Commands
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
The 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
The 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.
Similar to 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
The 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 WidthxHeight
(e.g. 1280x800
).
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
The 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
The eyes set match level
sets the match level for the subsequent check points. The default is Strict
.
This takes a required argument of the new match level to be used. The options are Exact
, Strict
, Content
, and Layout
.
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 Open settings
.
There are three tabs available in the settings window - Tests
, Account
, an Advanced
.
Tests Tab
In the 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
In the 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).
Advanced Tab
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.
Don't suffer in silence! Let us help you. Please reach out to us to get your project working.
Taking the next steps with Applitools
Congratulations on completing this quickstart! There's still so much to learn about visual testing with Applitools, but you're off to a great start.
Resources for next steps:
- 🤖 Learning how visual testing works
- ↔️ Setting match levels for visual checkpoints
- 💥 Troubleshooting common issues
- 🐞 Reporting bugs
- 🗺 Detailed overview of visual testing with Applitools