Selenium 4 testing

2020-07-27

Selenium 4 (Alpha) Testing on TestingBot

TestingBot now supports Selenium 4 (Alpha) testing on its Selenium grid!

Even though Selenium 4 is still only available as an alpha version, we've already added support for this upcoming release.

This allows you to prepare your tests to be compatible with Selenium's upcoming new version. You'll get access to the latest upcoming features (see below).

What's new in Selenium 4?

Currently, Selenium 4 is in its 6th alpha release. The maintainers of the Selenium open source project are still working out the kinks in this new version, based on feedback by early adopters.

There's no specific release date announced yet, but there's already quite some new functionalities available.

TL;DR - if you want to get started with running Selenium 4 on TestingBot right now, jump to #gettingstarted.

New functionalities in Selenium 4 will include:

Selenium Webdriver will be completely W3C standardized
New find element options
Chrome Debugging Protocol (CDP) support
Window Handling improvements
Screenshot improvements
Docker support for Selenium grid deployments

Selenium WebDriver W3C

Selenium WebDriver has long been using the JSON Wire Protocol. There was no official W3C spec for this, so slight variations were possible in this protocol.

With Selenium 4, browser vendors will be able to implement the strict W3C (World Wide Web Consortium) WebDriver protocol, which results in a more uniform implementation.

The creation of this new W3C WebDriver protocol started over 5 years ago and has more recently been approved as a standard.

The most important changes are how you create a new session, and the Actions API.

Create a new session

With the W3C WebDriver protocol, tests will need to converted from using desiredCapabilities to capabilities.

Before, you could specify the desired capabilities of your test like this:

const desiredCapabilities = {
	browserName: 'chrome',
	version: '84',
	platform: 'Windows 10'
}

With the new capabilities method, you can specify the same capabilities like this:

const capabilities = {
	firstMatch: {
		browserName: 'chrome',
		browserVersion: '84',
		platformName: 'Windows 10'
	}
}

The new session capabilities use firstMatch (formerly known as desiredCapabilities) and alwaysMatch (formerly known as requiredCapabilities).

Please see WebDriver W3C's new Session documentation for more information about this.

With TestingBot, we've been providing custom capability options to customise your tests. For W3C capabilities, please see the Selenium 4 capabilities example.

You can use a tb:options map of custom options to customise your tests on the TestingBot platform.

Actions API

With the Actions API, you can perform multiple actions during your test simultaneously. For example: you can create a test that clicks on multiple elements while holding the control key.

Actions allow you to chain keyboard and mouse events together, and create more complex interactions with the object under test.

Below is an example of an action:

const actions = driver.actions();

 await actions
     .keyDown(CMD)
     .move({origin: el})
     .press()
     .release()
     .keyUp(CMD)
     .perform();

New find element options

Selenium 4 comes with a new locators to find elements on a page. These new locators are called the Relative Locators, previously called Friendly Locators (this idea is inspired by the Sahi automation tool).

This new locator allows you to find an element, relative to another element on the page.

There are 5 different locator parameters that you can use:

above(): finds an element/elements located above an element.
below(): finds an element/elements located below an element.
near(): finds an element/elements located near an element.
toLeftOf(): finds an element/elements located to the left of an element.
toRightOf(): finds an element/elements located to the right of an element.

These new locators allow for more flexibility in writing your tests, it improves readability and stability.
Please see this simple example on how to use these new locators:

WebElement emailField = driver.findElement(By.id("email"));
WebElement passwordField = driver.findElement(RelativeLocator.withTagName("input").below(emailField));

New exceptions have been added, to provide the user with better information on what is going wrong (ElementClickInterceptedError, NoSuchCookieError and others).

Chrome Debugging Protocol (CDP)

CDP is the protocol used by Chrome to power its Chrome Developer Tools debugger. This protocol is used by (headless) automation tools such as Puppeteer and Playwright. It is not the most user friendly API, but it is very powerful and performant. It allows for network stubbing, mocking geolocations, taking full page screenshots and more.

With this new support built in, you can write tests that integrate even more tightly into the Chromium browser (Chrome and Microsoft Edge).

To get started, please see this code example:

ChromeDriver driver = new ChromeDriver();
Map coordinates = Map.of(
        "latitude", 50.8505,
        "longitude", 4.3488,
        "accuracy", 1
);
driver.executeCdpCommand("Emulation.setGeolocationOverride", coordinates);

You can find more CDP commands you can use on this page.

Window Handling Improvements

During a test, you can now easily go to full-screen mode and back.
Handling windows is also improved, offering better control to open/close new windows and tabs.

Your tests can now control multiple windows during the same test, for example:

WebDriver newWindow = driver.switchTo().newWindow(WindowType.WINDOW);
newWindow.get("https://testingbot.com");

You can have a handle to the new window, while still being able to control the main window as well.

The WindowType.WINDOW parameter instructs the browser to create a new window. Similarly, you can instruct it to create a new tab instead: WindowType.TAB

Screenshot Improvements

It is now possible to take screenshots of individual UI elements. Before Selenium 4, the only option testers had was taking a screenshot of the viewport and then programmatically cropping the screenshot with specific coordinates. Now, you can take screenshots of specific WebElements; buttons, links and other DOM elements. This is great news for testers looking to do visual testing.

Please see the example below on how to do this:

WebElement singleElement = driver.findElement(By.cssSelector(".testingbot-example"));    
File screenshot = singleElement.getScreenshotAs(OutputType.FILE);

Docker support for Selenium grid deployments

The Selenium Grid code has been redesigned and can now easily be used in combination with Docker/Kubernetes. It is much more scaleable and architected as a distributed system.

Of course with TestingBot, you do not have to worry about setting up and maintaining such a Grid, as we do that for you.

Getting Started

Excited to try out Selenium 4? Please see the example below on how to configure your tests to use Selenium 4 Alpha with TestingBot:

MutableCapabilities tbOpts = new MutableCapabilities();
tbOpts.setCapability("selenium-version", "4.0.0-alpha-6");

DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("browserName", "chrome");
caps.setCapability("browserVersion", "latest-1");
caps.setCapability("platformName", "WIN10");
caps.setCapability("tb:options", tbOpts);

WebDriver driver = new RemoteWebDriver(new URL("https://" + KEY + ":" + SECRET + "@hub.testingbot.com/wd/hub"), caps);