Skip to main content

Setting Up Visual E2E Testing with WebDriver

Follow the steps below to integrate Visual E2E Testing into your Selenium WebDriver tests, using the language/library of your choice. Any programming language that Selenium WebDriver supports can be used without needing to install any additional libraries or SDKs.

It takes only a few minutes to integrate Screener into your existing Selenium WebDriver scripts:

1. Verify Requirements#

  • Your WebDriver test(s) use W3C capabilities and Sauce Labs Browsers that are in our supported list.
  • Your Sauce Labs credentials are set in the sauce:options capability:
    'sauce:options': {  username: 'user',  accesskey: 'xxxxx'    }

2. Update WebDriver Capabilities#

Add "sauce:visual" capability to your WebDriver test configuration:

WebDriverIO Example:

var capabilities = {  ...  'sauce:visual': {    apiKey: process.env.SCREENER_API_KEY,    projectName: 'my-project',    viewportSize: '1280x1024'  }    }
You can get your Screener API Key (apiKey) from here.
Tip: Store API Key as an environment variable

Secure your API Key by storing it as an environment variable.

For example, store it in an environment variable called SCREENER_API_KEY, and then reference it in NodeJS file with: process.env.SCREENER_API_KEY.

For additional configuration options, see the Visual E2E sauce:visualCapability Options.

3. Connect To Remote Hub#

Configure your WebDriver tests to connect to our remote hub at the following url:

https://hub.screener.io

WebDriverIO Example:

exports.config = {  hostname: 'hub.screener.io',  port: 443,  protocol: 'https',  path: '/wd/hub'}

4. Add Visual Commands#

To integrate Visual Commands, we wanted a very simple, safe, and unobtrusive way to integrate it into your existing code without needing to install anything; it is simply a JavaScript comment placed in a WebDriver execute command.

  • Add a @visual.init command to set the name for each test. Add this before capturing snapshots.
  • Add @visual.snapshot command when you want to capture a visual snapshot; use this whenever you want a snapshot to be taken.

WebDriverIO Example:

it('should take snapshot', () => {  browser.url('https://screener.io');  browser.execute('/*@visual.init*/', 'My Visual Test');  browser.execute('/*@visual.snapshot*/', 'Home');});

For more details on commands, refer to the Visual Commands documentation.

For full examples, view Code Examples.

5. Run#

Great, you're all set!

Now run your first test and view your initial results in the Screener Dashboard.

note

Your initial visual test will fail, and results will be labelled as "New"; Review and Accept them as the baseline.

Next Steps#