WebdriverIO_v5_TypeScript

This is a boilerplate project that uses WebdriverIO v5 and TypeScript v3. This project is useful not only as an example of WebdriverIO v5 and TypeScript playing nicely together, but it includes examples of the PageObject pattern and some practical examples for using WebdriverIO to build an automated test suite with Mocha & Chai.

Getting Started

git clone git@github.com:jpolley/WebdriverIO_v5_TypeScript.git
cd WebdriverIO_v5_TypeScript
npm install
npm test

Why TypeScript

TypeScript offers the benefit of types, but you won't find them in this project. I have found TypeScript to be great because of the IDE intellisense and support for the latest JavaScript features:

You no longer need to explicitly compile your TypeScript to JavaScript using the command tsc. This project uses ts-node/register and tsconfig-paths as detailed on the WebdriverIO TypeScript setup page.

Page Objects

Page Objects are a really nifty abstraction for the UI elements that you interact with in your tests. You can create simple getter functions for each element that you need to access. And optionally you can create convenience methods like loginWithCredentials() that allow you to write more concise tests.

src/pages/LoginPage.ts

import BasePage from 'src/pages/BasePage';

class LoginPage extends BasePage {

    get username() {
        return $('#username');
    }

    get password() {
        return $('#password');
    }

    get submit() {
        return $('#login > button');
    }

    loginWithCredentials(username, password) {
        this.username.setValue(username);
        this.password.setValue(password);
        this.submit.click();
    }
}

export default new LoginPage();

test/login.spec.ts

import {expect} from 'chai';
import LoginPage from 'src/pages/LogInPage';

describe('Login page', () => {
    it('should allow access with correct credentials', () => {
        LoginPage.open;
        LoginPage.loginWithCredentials('tomsmith', 'SuperSecretPassword!');
        
        expect(LoginPage.flash).to.include('You logged into a secure area!');
    });
});

Test examples

The tests in this project use http://the-internet.herokuapp.com to demonstrate how to interact with some of the most common UI elements you will encounter. Including: dropdowns, basic auth, dynamic loading (waitUntil), file uploads, and javascript alerts. The official documentation already covers most of these but it never hurts to see a practical example wired up and working.

CI examples

Service	Cost	Notes
CircleCI	Paid	CircleCI was pretty easy to setup. Basic config is here .circleci/config.yml
Codeship	Paid	Codeship was also really easy to configure.
TravisCI	Paid	Travis CI took a little more effort and I was only able to get it running in headless mode so I left those changes in another branch instead of merging them to master.
Jenkins	Free	Using Jenkins Blue Ocean is a great option. While it is more work initially to setup, I've found it to be relatively painless. The Jenkinsfile uses one of the pre-built circleci browser images with most everything you need already installed.

Reporters

This projects uses both the spec-reporter and allure-reporter. The spec reporter offers great feedback when running from terminal and the allure reporter provides you with a nice report and screenshots that are automatically attached to failed tests. After running your the tests, run npm run report to generate the allure report. It's nifty.

Allure Overview:

Example of failed test with screenshot:

Acknowledgements

Christian Bromann for his work on WebdriverIO.

Dave Haeffner for his work on the-internet which is used in the examples.

Kevin Lamping for creating a neat course on WebdriverIO that helped me learn it more quickly.

Will Luce for creating an example project of WebdriverIO v4 & TypeScript that was helpful to me.

Wildbit for being a super rad place to work and giving me two weeks to work on whatever I wanted, which ultimately led to this project.