Automated browser tests: Setup and run in less than 10 minutes

Are you tired of spending hours setting up tedious projects and configuration files to simply automate the website or web application you just created? If your answer is yes, then keep reading this post. It will give you the tools to start testing your web project in few steps, easy and fast.

Software testing should be an easy and straightforward task, so let's go directly to the point. While most of the things we are going to do in this tutorial are performed in a few steps, it is important to know that basically, under the hood we will be using the following standard and well known technologies:

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

Set up your environment

  1. You need nodejs: Navigate to the nodejs website, download it and install
    • IMPORTANT!!!! - Make sure to check the option "Automatically install the necessary tools" on the installer. It may take some time to finish the installation but these are required to run turbobuilder cmd
  2. You need the chrome browser installed on your system
  3. You need chromedriver: Go to chromedriver.chromium.org and download the latest stable version.
    • chromedriver.exe must be globally registered and executable from anywhere when using command line. To achieve this, the easiest and fastest way is to copy chromedriver.exe directly into your windows folder. If you don't want to place it there, another common place where chromedriver may be saved is C:\Program Files\chromedriver\chromedriver.exe, but this requires you to manually update the system PATH environment variable and add the chromedriver.exe parent folder.

Create an automated tests project

  1. Create the project folder: You can create it anywhere on your computer and name it 'my_test_project'
  2. Open a command prompt and globally install the turbobuilder cmd tool: 
    npm install -g turbobuilder
  3. Now point the cmd to the root of your project folder, create the project files by executing tb with the -g (generate) option, and download npm dependencies: 
    cd my_test_project
tb -g test_project
npm install
  4. Your project folder (my_test_project) should contain now multiple files and folders. Everything you need to start automating is up and ready at this point! So let's start by writting and executing some browser tests.

Write and execute some automated browser tests

Our first basic test will load a website (for the sake of example, we will use google.com) and expect some text to be displayed. To achieve this, we will create a new javascript file inside our project: my_test_project\src\test\js\spec\my-first-test.js and then copy the following code inside it:

'use strict';

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

describe('my-first-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();
    });

    // This is our test. We can write as many of these as we want.
    it('should show google text when loading google.com', async function() {
        await this.automatedBrowserManager.queryCalls([
            ['assertUrlsLoadOk', [{ url: "https://google.com" }]],
            ['assertBrowserState', {loadedHtmlContains: 'google'}]
        ]);
    });
});

Note that the tests are performed just by two lines of code: 'assertUrlsLoadOk' and 'assertBrowserState', which instruct the browser to load the google url and verify the text is found. To run it we will execute the following cmd command at the root of our project folder:

tb -t

A web browser should open automatically, load the google.com url and verify that google text is found. After that, our cmd should display 'test ok'

What's next

In this post we have configured and launched a very basic browser automation project. But it's a starting point that gives us a ready to use platform which we can use to add as many tests as we want. Upcoming posts will focus on the different commands that can be launched via the automatedBrowserManager class, which allows us to perform an amazing amount of operations with the browser like creating and validating snapshots, clicking on elements, typing text into inputs, wait for expected elements to be found, and much more, all in a very easy way thanks to the power of the queryCalls() method