Automated UI Testing with Selenium and JavaScript

Selenium is great, and it can be integrated with many different languages, and today I will show you how it can be done with JavaScript. This is an ongoing project, and I plan to update more examples or test cases in the future, so feel free to ask questions and create tickets on the project.

1. Installation

You need to install either Yarn or Node on your machine. In this project, I will use Yarn for installing packages and running scripts.

First, we need to start a project

yarn init
OR
npm init

Then install dependencies

yarn add chromedriver selenium-webdriver
yarn add mocha -D

2. Getting Started

After that, we can start writing our test cases

// test.js
// Import requirement packages
require('chromedriver');
const assert = require('assert');
const {Builder, Key, By, until} = require('selenium-webdriver');
describe('Checkout Google.com', function () {
    let driver;
    before(async function() {
        driver = await new Builder().forBrowser('chrome').build();
    });
    // Next, we will write steps for our test.
    // For the element ID, you can find it by open the browser inspect feature.
    it('Search on Google', async function() {
        // Load the page
        await driver.get('https://google.com');
        // Find the search box by id
        await driver.findElement(By.id('lst-ib')).click();
        // Enter keywords and click enter
        await driver.findElement(By.id('lst-ib')).sendKeys('dalenguyen', Key.RETURN);
        // Wait for the results box by id
        await driver.wait(until.elementLocated(By.id('rcnt')), 10000);
        // We will get the title value and test it
        let title = await driver.getTitle();
        assert.equal(title, 'dalenguyen - Google Search');
    });
    // close the browser after running tests
    after(() => driver && driver.quit());
})

3. Run The Test Case

It is a good practice to add scripts to package.json.
// package.json
"scripts": {
   "test": "mocha --recursive --timeout 10000 test.js"
},
Whenever you want to run the test, just use this command:
yarn run test

The below result shows that the test has been successfully completed.

dnguyen$ yarn run test
yarn run v1.9.4
$ mocha --recursive --timeout 10000 test.js

Checkout Google.com
    ✓ Search on Google (2058ms)
1 passing (3s)

✨  Done in 3.79s.


Read more here