Skip to content

This is a boilerplate project that uses version 5 of WebdriverIO and TypeScript.

Notifications You must be signed in to change notification settings

jpolley/WebdriverIO_v5_TypeScript

Repository files navigation

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:

intellisense

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 CircleCI Paid CircleCI was pretty easy to setup. Basic config is here .circleci/config.yml
Codeship Codeship Status for jpolley/WebdriverIO_v5_TypeScript Paid Codeship was also really easy to configure.
TravisCI Build Status 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: allure

Example of failed test with screenshot: 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.

About

This is a boilerplate project that uses version 5 of WebdriverIO and TypeScript.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published