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 [email protected]: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!');
    });
});

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

CircleCI was pretty easy to setup and you can check out .circleci/config.yml if you are curious.

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 named "travisci" instead of merging them to master.

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.