It's All Writing.

Writing makes you happy.

Basis of WebdriverIO

Basis of WebdriverIO

WebdriverIO is a End-to-End Testng tool for a Web Application.
It implements all Webdriver protocol commands and provides that you can manipulate that by Node.js. Previous entry, I explained the way to take JSON out from a xlsx file. So, in this entry, I’ll explain basis of WebdriverIO for End-to-End Testing, and you’ll be ready for ” How to make a End-to-End Testing by WebdriverIO and Microsoft Excel.” – It’s theme of a next entry -.

example

I’ll show you a simple example below.

var expect = require('chai').expect;
describe('a title of search result on Google', function() {
    it('should contain Google and Search Keyword', function () {
        let search_keyword = 'webdriver';

        /* top page */
        browser.url('https://www.google.com/')
        .$('#lst-ib').setValue(search_keyword)
        .submitForm('.tsf');

        /* search result page */
        let search_input = $('#lst-ib');
        search_input.waitForVisible();

        // assert title
        let title = browser.getTitle();
        expect(title).to.be.contain('Google');
        expect(title).to.be.contain(search_keyword);
    });
});

This sample cord accesses Google and searches by key word “webdirver”, and it confirms that “Google” and “webdriver” are contained in title of a search result page. You can also use various selector CSS selector, Link text, Element with certain text, xPath, etc. Please check the reference for details.

How to execute example

It’s simple.

  • 1st step. Install WebdriverIO and librarires.
$ cd /path/to/your_project/
$ npm install webdriverio --save
$ npm install expect.js chai mocha --save 
  • 2nd step. run wdio config
$ node_modules/.bin/wdio config
# Interactive Wizards is begun. answer it.
# My answer is indicated below as a example.

=========================
WDIO Configuration Helper
=========================

? Where do you want to execute your tests? On my local machine
? Which framework do you want to use? mocha
? Shall I install the framework adapter for you? Yes
? Where are your test specs located? ./test/specs/**/*.js
? Which reporter do you want to use? 
? Do you want to add a service to your test setup? 
? Level of logging verbosity silent
? In which directory should screenshots gets saved if a command fails? ./errorShots/
? What is the base url? http://localhost

Installing wdio packages:

Packages installed successfully, creating configuration file...

Configuration file was created successfully!
To run your tests, execute:

$ wdio wdio.conf.js
  • 3rd step. put example code on test/specs/ directory.
$ mkdir -p test/specs
$ cat > test/specs/example.js
var expect = require('chai').expect;
describe('a title of search result on Google', function() {
    it('should contain Google and Search Keyword', function () {
        let search_keyword = 'webdriver';

        /* top page */
        browser.url('https://www.google.com/')
        .$('#lst-ib').setValue(search_keyword)
        .submitForm('.tsf');

        /* search result page */
        let search_input = $('#lst-ib');
        search_input.waitForVisible();

        // assert title
        let title = browser.getTitle();
        expect(title).to.be.contain('Google');
        expect(title).to.be.contain(search_keyword);
    });
});
  • 4th step. install and run selenium-standalone
$ npm install selenium-standalone --save
$ node_modules/selenium-standalone/bin/selenium-standalone install
# open other terminal window and type below
$ node_modules/selenium-standalone/bin/selenium-standalone start
# Selenium started
  • 5th step. execute test code.
# back to the first terminal window and type below
$ node_modules/.bin/wdio wdio.conf.js

You can see a test result like below.

1 passing (10.10s)

If you want to watch a report which has more detail information, you can also install various reporters.

For example, I’ll show “spec” report’s result below.

------------------------------------------------------------------
[firefox #0-0] Session ID: cc77a12a-d8ec-4b4e-8f2a-db13520c066e
[firefox #0-0] Spec: /path/to/your_project/test/specs/example.js
[firefox #0-0] Running: firefox
[firefox #0-0]
[firefox #0-0] a title of search result on Google
[firefox #0-0]   ✓ should contain Google and Search Keyword
[firefox #0-0]
[firefox #0-0]
[firefox #0-0] 1 passing (5s)
[firefox #0-0]

Please check the reference for details.