Automated browser tests made easy: how to click any document element with few lines of code

One of the most basic and important tasks when writing automated tests for a website or web application is to interact with the visual elements. We need to be able to click like a user and navigate the different areas to perform the available actions. This is why having tools to automate user behavior is utterly important.

Turboframework (via the Turbotesting library) provides us with an easy way to write these kinds of tests. With a few lines of code, we can instruct the testing framework to click on any visual element and verify that the results of that interaction match with what we expect, always using standard technologies like:

Writing automated tests for a website or web app is extremely easy with turboframework. Let's see how

Set up your environment and create a tests project

Make sure you have installed the turbobuilder CMD tool: it will be used to run the tests. If you want to read a detailed guide on how to set it up and create a project to run your tests follow this link. The whole process is done in 10 minutes.

Write and execute your first user click interaction test

With turbobuilder CMD installed and a project created, let's write a test that opens a browser window, loads the turboframework website, clicks on the "blog" section link, and verifies that the text "recent posts" appears on the screen. This way we will know that our click was successful. To do it, create a new javascript file inside our tests project: my_test_project\src\test\js\spec\my-first-click-test.js and then copy the following code inside it:

'use strict';

const { AutomatedBrowserManager } = require('turbotesting-node');
const { FilesManager } = require('turbodepot-node');

const fm = new FilesManager();

describe('my-first-snapshot-test', function() {

    // This is executed before any test is executed
    beforeAll(async function() {
        this.automatedBrowserManager = new AutomatedBrowserManager();
        this.automatedBrowserManager.initializeChrome();
    });

    // This is executed after all tests are executed
    afterAll(async function() {
        await this.automatedBrowserManager.quit();
    });

    // Load turboframework.org, click on the "Blog" link and verify that the blog page is loaded by searching "Recent posts" text
    it('should load turboframework blog area after a user click', async function() {
        await this.automatedBrowserManager.queryCalls([
            ['loadUrl', "https://turboframework.org"],
            ['clickByXpath', "//a[contains(text(),'Blog')]"],
            ['assertBrowserState', {
                loadedHtmlContains: ['Recent posts']
            }],   
        ]);
    });
});

To run this test we will execute the following cmd commands at the root of our project folder:

npm install
tb -t

A web browser should open automatically, load the turboframework.org URL and then display the blog section. After that, our cmd should display 'test ok'. Note that we are using the most standard way (XPATH) to find the element we want to click, but we can also use the element id by using the "clickById" command and passing an ID instead of an XPATH expression.

What's next

In this post, we have configured and launched a basic test to click a website link. It's a starting point that gives us the tools we need to perform any of these kinds of tests easily and fast. Keep an eye on our blog for more interesting testing and software tutorials!