Automated browser tests made easy: how to send keyboard input to document elements

One of the most basic and important tasks when writing automated tests for a website or web application is to interact with visual elements. We need to be able to perform input via keyboard and type characters like a real user would, to submit information to the application. 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 send keyboard characters to any visual element and verify that the results of that interaction match with what we expect, always through the following standard technologies:

• Selenium
• Jasmine
• NodeJS

Sending keyboard events to 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 "Count string capital letters online" turboframework site page, writes a text into the available text input, and verifies that the text "letters: 2" appears on the screen. This way we will know that our text was correctly sent to the browser. To do it, create a new javascript file inside our tests project: my_test_project\src\test\js\spec\my-first-input-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/en/app/stringutils/count-capital-letters"],
            ['sendKeysById', "textArea", "Two Capital letters"],
            ['assertBrowserState', {
                loadedHtmlContains: ['letters: 2']
            }],
            ['waitMilliseconds', 3000], 
        ]);
    });
});

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 specified page. After that, our cmd should display 'test ok'. Note that we are using an id to specify the text area we want to fill, but we may also use XPATH by using the "sendKeysByXpath" command. We are also using a waitMilliseconds command to wait 3 seconds so the results of the test can be easily seen. This is for the sake of the example and would not be necessary when working on your tests.

What's next

In this post, we have configured and launched a basic test to send keyboard input to a website. 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!