Objectives of this guide

Selenium is a suite of tools commonly used for testing purposes: it opens a page in the web browser and checks its contents for errors, and/or induces an interaction with the page checking the contents later.

Upon completing this guide you'll be able to:

  • Write Selenium tests in Node.js
  • Run test locally on the Selenium Server
  • Automate the test process using Buddy CI/CD

Set the first Selenium task

Let's create a task that will launch Buddy website in Chrome browser and capture a screenshot. Before you start, make sure to install Node.js

Install WebDriverIO

Create a directory for the source files and initialize npm. The command will create a package.json file with the dependencies (you can confirm all questions with enter):

$ mkdir my-first-test
$ cd my-first-test
$ npm init

When the package is ready, you can install WebDriverIO and save it as a dependency in the package.json:

$ npm install webdriverio --save

Create selenium.js file

Now you have to create a file with commands that will grab the screenshot of the website:

var webdriverio = require('webdriverio');

var options = {
    desiredCapabilities: {
        browserName: 'chrome'
    }
};

webdriverio
  .remote(options)
  .init()
  .url('http://buddy.works')
  .saveScreenshot('buddyworks.png') 
  .end();

Run the file locally

In order to run the Selenium scripts locally you first need to set up a standalone server:

  1. Download Selenium server
  2. Download and unpack ChromeDriver
  3. Launch the standalone Selenium server:

    $ java -jar -Dwebdriver.chrome.driver=’/path/to/chromedriver’
    selenium-server-standalone-3.0.1.jar
    

When the server is up and running, all that remains is running the tests:

$ node selenium.js

Once executed, the screenshot will be captured into the local directory.

This was just a glimpse of what you can do with Selenium. Below we'll show you a more advanced example utilizing Buddy CI/CD.

Automate Selenium tests with Buddy

Buddy lets you automate the process of testing and delivering your application to the server. This part of the guide will show how to automate screenshot grabbing with our service. If you haven't used Buddy before, sign up at https://buddy.works with your GitHub or Bitbucket profile or email address.

  1. Let's start with creating a project. A project is a Git repository with pipelines that describe the way your code is processed and delivered. Make sure to select Buddy as the provider:

    Choosing Git repository
    Choosing Git repository
  2. With the repository up and running, you can push selenium.js and package.json files to Buddy (you might want to initialize Git in the file directory):

  3. Now we can configure the execution. Add a new pipeline with the following settings:

    • Trigger mode: Recurrently
    • Interval: 1 hour
    • Branch assignment: Master
    • Trigger condition: Execute always
  4. Select Node.js and enter the commands that will run npm and your tests:

    npm install
    node selenium.js
    
  5. Switch to the Services tab and attach Selenium Chrome. Make sure to update your config file with the details of the testing server. You can edit it directly in the Code tab:

    host: 'selenium-ch',    
    port: 4444,
    
  6. The pipeline is ready. Click Run to launch it manually: if everything was properly configured, the test will pass and a screenshot will appear in the pipeline's filesystem:

Please mind that the first execution will take a bit longer as Buddy needs to download and install the dependencies.

From now on, Buddy will execute the pipeline and grab a fresh screenshot every 1 hour. However, every subsequent execution will overwrite the original screenshot. This can be tackled by adding a Buddy parameter to the saving path. Let's add {execution.id} environment variable to the script:

  1. In selenium.js change the value to

    .saveScreenshot('buddyworks-' + process.env.EID + '.png') 
    
  2. In the build action change the command to:

    EID=${execution.id} node selenium.js
    

This way every new screenshot will be generated with the ID of the execution in the name.


Selenium and WebDriverIO with Mocha, Jasmine, Cucumber

Capturing screenshots is one of many tests that can be run with Selenium. Usually, the tests are run in sequence with a test runner. WebDriverIO has its own test runner, compatible with frameworks such as Mocha, Jasmine or Cucumber. In this example we'll show you how to use Mocha in WebDriverIO.

Configuration file

Let's start with a brand new project:

$ mkdir my-second-test && cd my-second-test
$ npm init

When asked about the test command provide the following:

wdio wdio.conf.js

You can accept the default values for the rest of the questions with enter. Now we have to install WebDriverIO:

$ npm install webdriverio --save

The next step is defining the framework that we want to use. You can do it with the built-in config creator:

$ ./node_modules/.bin/wdio config

Just like with npm install you can confirm most options with enter—just make sure to enter mocha when asked about the framework.

This operation will generate the web driver config file wdio.conf.js. Let's edit the file and set the browser to Chrome:

Editing <code>wdio.config.js</code>
Editing wdio.config.js

When everything is ready, execute the tests by running

$ npm test

However, we haven't defined any tests yet, so the command will produce a message like this:

pattern ./test/specs/**/*.js did not match any file

Off we go to define some tests!

Test configuration file

The path with test files is described in the config. By default, the path is

./test/specs/*/.js

First, let's create a directory for the specs:

$ mkdir -p test/specs

Then, add the first test.js file in that directory:

var assert = require('assert');
describe('lorem imsum', function() {
   it('test page title', function () {
       browser.url('http://lipsum.com/');
       var title = browser.getTitle();
       assert.equal(title, 'Lorem Ipsum - All the facts - Lipsum generator');
   });
});

Launch the file locally

In order to execute the tests locally, you need to have the Selenium Standalone Server installed. With the server in place, just run npm commands:

$ npm test

Once executed, you'll notice the first test has crashed because the title of the website was different than expected.

Automate Selenium tests with Buddy

Just like with single Selenium tasks, Buddy CI/CD lets you automatically trigger test runners on specific conditions.

  1. Create a new project and select Buddy as the provider

    Choosing Git repository
    Choosing Git repository
  2. Push the newly created test/specs/test.js, package.json, and wdio.conf.js to the repository.

  3. Add a new pipeline with the following settings:

    • Trigger mode: On every push
    • Branch assignment: Master
  4. Select the Node.js action. The npm commands are already entered by default:

    npm install
    npm test
    
    Node.js action details
    Node.js action details
  5. Switch to the Services tab and attach Selenium Chrome. Make sure to update your config file with the details of the testing server. You can edit it directly in the Code tab, below the exports.config line:

    host: 'selenium-ch',    
    port: 4444,
    
  6. When you're ready, make a push to the repository and watch Buddy automatically lanch your tests:


Summary

You can further expand your pipeline with additional actions like:

Whatever action you need to automate your workflow, you'll find it in Buddy. And if you won't, let us know at support@buddy.works and we'll add it for you.

Happy coding!