Webdriver and object oriented testing in TestBench 4

Vaadin TestBench is a browser automation tool, suited for creating UI level tests for Vaadin applications. It is based on Selenium 2, which means that all features of Selenium 2/WebDriver are also available in TestBench. But what exactly does Selenium 2 / WebDriver do? And how does Vaadin TestBench work?

Like many of you might know, Selenium has been around for quite some time. Started in 2004, the first version was solely JavaScript based. It was a small JavaScript application running in the browser, commanding the application to be tested.

WebDriver takes a different approach to solve the same problem. Rather than being a JavaScript application running within the browser, it uses whichever mechanism is most appropriate to control the browser and to bypass the restrictions placed on the browser by the JavaScript security model. This allows Vaadin TestBench to use a cleaner, object-based API, rather than follow the original dictionary-based API. This is also what Vaadin TestBench uses:

// Create an instance of Firefox
setDriver(new FirefoxDriver());

// Now go to the Vaadin home page
getDriver().get("https://vaadin.com/home");

// Find the search input and run a search
WebElement siteSearch = driver.findElement(By.id("query"));
siteSearch.sendKeys("vaadin charts");
siteSearch.submit();

In TestBench 4 Selenium’s object-oriented API has been taken even further. The Vaadin element query API helps Vaadin developers find Vaadin components and access their properties in the browser. These component properties include caption, description, child components, cells in tables – as well as Vaadin specific actions like closing notifications. The Element APIs in the com.vaadin.testbench.element package extend the org.openqa.selenium.WebElement which makes them fully compatible with Selenium.

With Vaadin TestBench the components are queried like this:

List<ButtonElement>
           
            buttons = $(ButtonElement.class).all();

Here the ButtonElement class is a specialized WebElement, which contains API for interacting with Vaadin Button components. There are Element class counterparts for all the core Vaadin components in Vaadin TestBench and add-ons can introduce their own when needed.

You can use several different ways to locate and interact with the UI component elements.

The most robust way is to use component identifiers. To use these, you first need to set unique identifiers for your components in the application code. A save button in a form could, e.g. use btnSave.setId(“form-save”). In the test code you can then click the actual element by calling:

$(ButtonElement.class).id("form-save").click();

When IDs are not available, you can use the caption to find a Vaadin component in your application. Often enough the caption is a unique enough identifier for your component, as you rarely have too many components of the same type with the same caption.

$(ButtonElement.class).caption("Save").first().click();

ElementQueries also allow you to define a search hierarchy, which means that you can easily search components within components.

$(PanelElement.class).caption("Form").$(ButtonElement.class)
                .caption("Save").first().click();

Of course you can do most of the same things with XPath using Selenium’s rather complex but powerful syntax. Vaadin TestBench 4 is fully compatible with your existing test cases and will stay that way.

This was a glimpse into the upcoming Vaadin TestBench 4. Check out the examples in GitHub, but if you want to use Vaadin Testbench now, Vaadin TestBench 3 is fully forward compatible (also license-wise) and a safe way to start automating your browser testing today.

Get Vaadin TestBench now

Jonatan Kronqvist is a Senior Vaadin Expert leading a team of awesome developers building the next versions of Vaadin, TestBench and other tools that streamline the development process and help our customers build the best UIs in the world.