Toilet Paper #97

Honey, I’ve automated the frontend tests!


You probably know that: You build a web frontend with many input fields and small functionality details. It is not only difficult to develop and to check whether a feature is implemented correctly, but also bugs can occur quickly. Eventually, you do not check every existing feature after every deployment.


The solution is automated testing – just as in the back-end. Depending on the technology, the provided tests usually work at the component level. In the test pyramid this would be the bottom layer. For business features, the top layer is an important addition: UI or End-2-End Tests can be easily implemented with a combination of Selenium and Cucumber.

Selenium accepts action commands and conveys them to a browser. The Selenium driver can be used to query various features, e.g. whether an element is visible or not. Selenium-based tests can be written in different languages and can also be linked to BrowserStack, where they can run with a selection of OS / browser combinations.

Cucumber has test scenarios formulated in "Gherkin", a "business-readable language" that does not require any programming skills.

E2E Tests can be integrated into Jenkins build when using a headless browser or setting up a virtual display with "Xvfb" on Jenkins. For our tests, we used selenium-cucumber-js, which combines Selenium and Cucumber. Carrying out the E2E tests, a test report with pie charts and screenshots is generated in HTML format.


We are testing on the jambit website – if you click the cookie-OK button, you will see the header image:

Feature File in Gherkin:
# Feature: Freetext
Feature: jambit landing page
  # Scenario: Freetext
  Scenario: Visiting
    # Test steps: will be matched with
    # regex terms in Step Definition
    Given I browse to ""
    When I click the cookie-OK button
    Then I should see the header image
Step Definition File in Javascript:
module.exports = function() {
  this.Given(/^I browse to "([^"]*)"$/, url => {
    return helpers.loadPage(url);
  this.When(/^I click the cookie-OK button$/, () => {
    return driver.findElements("cookie-ok-button")).then(button => {;
  this.Then(/^I should see the header image$/, () => {
    return driver
      .then(headerImage => headerImage.isDisplayed())
      .then(result => {
Frontend-Tests automatisieren

Cookie Settings

This website uses cookies to personalize content and ads, provide social media features, and analyze website traffic. In addition, information about your use of the website is shared with social media, advertising, and analytics partners. These partners may merge the information with other data that you have provided to them or that they have collected from you using the services.

For more information, please refer to our privacy policy. There you can also change your cookie settings later on.

contact icon

Contact us now