Take a Drive with WebdriverIO and Mocha

Take a Drive with WebdriverIO and Mocha

Automate My Commute

  • The car to drive
  • How to drive the car
  • The directions to take
  • The speed limits to follow
  • How to take turns safely
  • Handling traffic delays

Photo Credit: https://flic.kr/p/GvVU5

Terminology

  • Selenium
  • Browsers & Drivers
  • WebdriverIO
  • Mocha
  • Assertions
  • before/beforeEach/afterEach/after
  • Promises

The Car to Drive

Browsers & Drivers

Car = Browser

We can choose any model we prefer: 
Chrome, IE, Safari, Firefox...

Photo Credit: https://flic.kr/p/dtWtC5

WebdriverIO Config

capabilities: [{
  // options: firefox, chrome, internet explorer, phantomjs ...
  browserName: 'chrome',
  version: '27.0',
  platform: 'XP',
  chromeOptions: {
    args: [
      'use-fake-device-for-media-stream',
      'use-fake-ui-for-media-stream'
    ]
  }
}]

WebdriverIO Config

capabilities: [{
    browserName: 'chrome'
  }, {
    browserName: 'firefox',
    specs: [
      'test/ffOnly/*'
    ]
  },{
    browserName: 'phantomjs',
    exclude: [
      'test/spec/alert.js'
    ]
}]

How to Drive the Car

Selenium

The Robot

Drives the car

WebDriver driver = new HtmlUnitDriver();

// And now use this to visit Google
driver.get("http://www.google.com");

// Find the text input element by its name
WebElement element = driver
    .findElement(By.name("q"));

// Enter something to search for
element.sendKeys("Cheese!");

// Now submit the form.
element.submit();

Reads the Dashboard

// Check the title of the page
System.out.println("Page title is: "
    + driver.getTitle());

Photo Credit: https://flic.kr/p/5LpzsN

Local

npm install -g selenium-standalone
selenium-standalone install
selenium-standalone start
webdriverio.remote({
  host: 'hub.browserstack.com',
  port: 80,
  user: 'username',
  key: 'hunter2'
}).init();

Remote

The Directions to Take

WebdriverIO

The Translator

Drives the car

client
    .url('http://cssdevconf.com')
    .click('#myButton')
    .setValue('.input', 'test123')

Reads the Dashboard

client
  .getCssProperty('#someElement', 'width')
  .then(function(width) {
      console.log(width);
      // outputs the following:
      // {
      //     property: 'width',
      //     value: '100px',
      //     parsed: {
      //         type: 'number',
      //         string: '100px',
      //         unit: 'px',
      //         value: 100
      //     }
      // }
  });

Other Robots - Chimpjs

Feature: Search the Web

  As a human
  I want to search the web
  So I can find information

  Scenario: Search for Xolv.io
    Given I have visited Google
    When I search for "Xolv.io"
    Then I see "Xolv.io"
this.When(/^I go to my projects$/, function(done) {
  this.browser.url(process.env.ROOT_URL + 'projects')
  .waitForVisible('.projects-list')
  .call(done);
});

Write the test case

Define the step

The Speed Limits

Assertions, Mocha & Chai

The Limits

Asserting the Speed

car
  .getSpeed()
  .then(function(speed){
    expect(speed).to.equal(20);
  })

Photo Credit: https://flic.kr/p/6r2Q4C

Other Styles

mySpeed.should.equal(20);
assert.equal(mySpeed, 20);

Asserting the Page

client
  .url('https://github.com/')
  .getElementSize('.header-logo-wordmark', function(err, result) {
    expect(result.height).to.equal(26);
    expect(result.width).to.equal(89);
  })
  .getTitle(function(err, title) {
    expect(title).to.equal('GitHub · Where software is built');
  })
  .getCssProperty('a[href="/plans"]', 'color', function(err, result){
    expect(result.value).to.equal('rgba(64,120,192,1)');
  })

Turning Safely

Mocha before/after hooks

Drive to Work

describe('car driving to work', function() { 
  it('should turn left at 32nd', function() {
    slowDown();
    turnWheel(360deg);
    expect(direction).to.equal('north');
    speedUp();
  });
  it('should turn right at 41st', function() {
    slowDown();
    turnWheel(-360deg);
    expect(direction).to.equal('east');
    speedUp();
  });
  it('should turn left at 53rd', function() {
    slowDown();
    turnWheel(360deg);
    expect(direction).to.equal('north');
    speedUp();
  });
});

Before & After Each

describe('car driving to work', function() {  
  beforeEach(function() {
    slowDown();
  });

  it('should turn left at 32nd', function() {
    turnWheel(360deg);
    expect(direction).to.equal('north');
  });
  it('should turn right at 41st', function() {
    turnWheel(-360deg);
    expect(direction).to.equal('east');
  });
  it('should turn left at 53rd', function() {
    turnWheel(360deg);
    expect(direction).to.equal('north');
  });

  afterEach(function() {
    speedUp();
  });
})

Before & After

describe('car driving to work', function() {  
  before(function() {
    startCar();
  });

  beforeEach(function() {
    slowDown();
  });

  it('should turn left at 32nd', function() {
    turnWheel(360deg);
    expect(direction).to.equal('north');
  });

  afterEach(function() {
    speedUp();
  });

  after(function() {
    turnCarOff();
  });
})

Handling Traffic

JavaScript Promises

Waiting for the Unknown

it('should turn left at 32nd', function () {
  car.turnWheel(360deg);

  expect(car.direction).to.equal('north');

  return car;
});

Photo Credit: https://flic.kr/p/2br6Ww

expect(car.direction).to.equal('north');

car.turnWheel(360deg);

Executes as:

Using .then

it('should turn left at 32nd', function () {  
  car
    .turnWheel(360deg)
    .then(function(){ 
      expect(car.direction).to.equal('north');
    });   

  return car;
});
it('should turn left at 32nd', function () {  
  car
    .turnWheel(360deg)
    .getDirection().should.eventually.equal('north');

  return car;
});

Alternate (chai-as-promised)

Finishing Up

  • Browsers are the car to drive. They’re driven using installed Selenium browser drivers.
  • Selenium is the robot that knows how to drive the car.
  • WebdriverIO provides the directions to take to Selenium, in a language that’s easy for us to write in.
  • Assertions help validate the speed limits are followed. Chai is a common assertion library used.
  • Hooks such as before/after help reduce code duplication, making it easier to take turns safely
  • Promises help with handling delays due to congestion along the way
Made with Slides.com