Objectives of this guide

Selenium is a set of tools frequently used for testing applications: it fires up a page in the web browser and examines its contents paying special attention to errors. It can also bring on an interaction with the page checking the contents later.

After reading this guide you’ll be able to:

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

Writting the first Selenium task

Let’s set a task that will fire up Buddy website in Chrome browser and take a screenshot. At the beginning, though, you should install Node.js

Installing WebDriverIO

Add a directory for the source files and initialize npm. The command will set a package.json file with all dependencies needed (confirm all questions by hitting enter):

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

Once the package is set, make sure to install WebDriverIO and save it as a dependency in the package.json:

$ npm install webdriverio --save

Creating selenium.js file

The next step is to create a file with commands that will take 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();

Running the file locally

If you want to execute the Selenium scripts locally, you should set up a standalone server first:

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 ready, all you need to do is to run the tests:

$ node selenium.js

Once run, the screenshot will be taken into the local directory.

This was just a snippet of things that can be done with Selenium. In the next part, we’ll show you a more advanced example using Buddy CI/CD.

Automating Selenium tests with Buddy

Buddy allows for automating the process of testing and delivering your application to the server. In this part of this article, you’ll learn how to automate screenshot grabbing with Buddy. If you haven’t used our service before, sign up at https://buddy.works with your GitHub or Bitbucket profile or email address.

1.First, let’s create a project. To clarify: a project is nothing else than a Git repository with pipelines that describe the way your code is processed and delivered. Choose Buddy as the provider:

2.When your repository is ready, you can push selenium.js and package.json files to Buddy (you might want to initialize Git in the file directory):

3.Now we’re ready to configure the execution. Create a new pipeline with the settings listed below:

• Trigger mode: Recurrently
• Interval: 1 hour
• Branch assignment: Master
• Trigger condition: Execute always

4.Choose Node.js and type the commands that will run npm and your tests:

npm install
node selenium.js

5.Switch the tabs to Services and add Selenium Chrome. Remember to update your config file with the data of the testing server. You can also edit it directly in the Code tab:

host: 'selenium-ch',    
port: 4444,

6.Your pipeline is now ready. Click Run to launch it manually: if you configured it in the proper way, the test will pass and a screenshot will show up in the pipeline’s filesystem:

From now, Buddy will run the pipeline and grab a new screenshot every 1 hour. Bear in mind that every subsequent execution will overwrite the first screenshot. This can be solved by adding a Buddy parameter to the saving path. Let’s attach {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 replace the command with:

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

You can write a wide variety of tests with Selenium. Taking screenshots is just a snippet of possibilities Selenium gives you. Normally, the tests are run in sequence with a test runner. WebDriverIO has its own test runner, well-matched with frameworks, eg. Mocha, Jasmine or Cucumber. This example will explain how to use Mocha in WebDriverIO.

Configuration file

Let’s begin with a new project:

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

You’ll be asked about the test command Type the following, then:

wdio wdio.conf.js

You can confirm the the rest of values set on default by hitting enter. The next thing we have to do is to install WebDriverIO:

$ npm install webdriverio --save

In the following step, we need to define the framework that we want to use. You can do it with the built-in config creator:

$ ./node_modules/.bin/wdio config

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

This action will create the web driver config file wdio.conf.js. Make sure to edit the file and change the browser from Firefox to Chrome.

When all’s set, run the tests by providing:

$ npm test

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

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

Let’s define some tests!

Test configuration file

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

./test/specs/*/.js

Let’s create a directory for the specs first:

$ mkdir -p test/specs

Next, make sure to add the first test.js file in the folder:

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

If you want to run the tests locally, you should have the Selenium Standalone Server installed. With the server in place, run npm commands:

$ npm test

Once done, you’ll find out that the first test has crashed because the title of the website was different than expected.

Automate Selenium tests with Buddy

Similarly to a single Selenium tasks, Buddy CI/CD allows for triggering test runners automatically on specific conditions. Here, we’ll use Firefox as the browser.

1.Add a new project and choose Buddy as your provider

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

3.Create a new pipeline with these settings:

• Trigger mode: On every push
• Branch assignment: Master

4.Choose the Node.js action. The npm commands are already put by default:

npm install
npm test

5.Switch the tabs to Services and add Selenium Chrome. Remember to update your config file with the data of the testing server. If you want, you can also 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:

• automatic deployments to the server when the tests are successful
• conditional notifications that will keep you updated in case one of the tests have failed
• running scripts on the server (eg. restarting the server or application)

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!