Integrate Screener into your existing Selenium WebDriver functional tests.
The following explains how to integrate Screener into your Selenium WebDriver tests, using the language/library of your choice. Any programming language that Selenium WebDriver supports can be used with Screener without needing you to install any additional libraries or SDKs.
It takes only a few minutes to integrate Screener into your existing Selenium WebDriver scripts:
- Update WebDriver URL.
- Update DesiredCapabilities object.
- Add Screener Snapshots in your code wherever you want a visual test.
Before you start, you will need to retrieve the Screener API Key and Test Group ID for the tests you want to run.
You need your project's API key, which is available from the Project Dashboard:
Create a Test Group configured to run on a WebDriver client, or select a Test Group that has been configured to run tests "On Client". Only Test Groups that have been configured to run tests "On Client" can be used with your own Selenium WebDriver client.
You will need your Test Group ID, which is available from the Test Group's Project Dashboard:
To use Screener, you will need to update your WebDriver URL and DesiredCapabilities object.
All configurations listed below would go into the
Description: The API Key associated with your Screener Account. You can get this from the Screener Dashboard.
Description: The name of your test. Used as both a display label and to uniquely identify your test. It is recommended to include browser/platform information so it can be easily differentiated from other tests.
Description: The Test Group id this test belongs to. You can get this by selecting the desired group in the Screener Dashboard.
Description: A width-by-height representation of your desired resolution.
Description: An optional string representing the environment or locale associated with this test.
Description: An object with a combination of id/name/environment key/values. Used to reference another test to diff against. Useful for Cross-Browser testing (comparing a browser to another reference browser), and Localization testing (comparing a locale to another reference locale).
Description: A comma-delimited list of css selectors to ignore when performing visual diffs.
Description: An object for enabling/disabling different types of UI validation. All validation types are enabled by default. The validation options are listed below:
|(Optional) Boolean true/false value, to enable or disable structural validation. Enabled by default.|
|(Optional) Boolean true/false value, to enable or disable layout validation. Enabled by default.|
|(Optional) Boolean true/false value, to enable or disable style validation. Enabled by default.|
|(Optional) Boolean true/false value, to enable or disable content validation (including text & images). Enabled by default.|
|(Optional) Boolean true/false value, to enable or disable text validation. Do not use with "content" option. Enabled by default.|
|(Optional) Boolean true/false value, to enable or disable validation of images and charts. Do not use with "content" option. Enabled by default.|
Example: Example to disable content validation for a locale-to-locale test:
To take a Screener Snapshot, we wanted a very simple, safe, and unobtrusive way to integrate it into your existing code without needing to install anything.
This allows us to extend the capabilities of Selenium without breaking anything, or requiring the user to install anything. The result is that if you wanted to run against the Screener Hub, then it would take snapshots. If you wanted to run against your own Selenium Grid, then it would do nothing.
This JS comment can be added into your code wherever you want a snapshot to be taken.
Description: (Required) The name of the state associated with the snapshot.
Description: (Optional) An object with a combination of
"id"option is a string which unique identifies this snapshot. Useful if you plan on changing the State Name, and want to retain associations to older tests.
"cropTo"option is a css selector to crop the snapshot to.
"ignore"option is a comma-delimited list of css selectors to ignore for this snapshot when performing visual diffs.
Run your functional tests as you normally would, locally or through your CI process.
To view the progress of your test run in Screener, select the associated Test Group in the Dashboard, and click the History tab:
Details and current status of your test runs will be displayed.
- Internet Explorer
Test script capability:
Current Chrome version: 87.0
Test script capability:
Current Firefox version: 83.0
Test script capability: