Selenium IDE Tutorial (Beta)

Getting Started

  1. After installing the extension from the Chrome Store you will have a new icon in your navigation bar which contains the Applitools Eyes logo.

  2. Clicking it will show a window prompting you to open the IDE if it's not already open.

open-ide.png

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.

enter-api-key.png
  1. After you've pasted in your API key click Apply and the window will say Successfully connected with Selenium IDE.
successfully-connected.png

NOTE

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.

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.

record-mode.png

Here's a breakdown of each command.

Check Window

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.

Check Element

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.

Similar to 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.

Check Region

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 WidthxHeight (e.g. 1280x800).

NOTE:

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 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.

configure-tests.png

In the 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)
configure-account.png

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).

configure-advanced.png

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.

Last Updated: 10/23/2018, 12:49:37 PM