node package manager

webdriverio-addons

webdriverio-addons

Introduction

Webdriver.io is a powerfull javascript framework for NodeJS platform, based on Selenium architecture.

Webdriver.io is open and allow a lot of differente usage

In this project, we try to encapsulate and extend Webdriver.io base functions

The following choice have been done :

Enhancement

Configration bootstrap

Webdriverio-addons come with a default working configuration that you can extends for your project config

var defaultConfig = require('webdriverio-addons').defaultConfig;
 
module.exports = require('deepmerge')( 
  defaultConfig, 
  {
  
    maxInstances: 1,
       
    // Level of logging verbosity: silent | verbose | command | data | result | error 
    logLevel: 'silent',
 
    baseUrl: 'http://www.google.com',
 
    host: 'localhost',
    port: 4444,
    specs: [
     './src/specs/mySpec.js'
    ],
 
    capabilities: [
      {
        maxInstances: 1,
        browserName: 'chrome'
      }
    ],
    // start selenium standalone automaticly 
    services: [ 'selenium-standalone' ]
    
  }
);

Suite & Testcase Meta

var WAT = require('webdriverio-addons').common;
// testsuite 
WAT.testsuite( ['home',lang.code], function() {
  
  this.timeout(60000);
  
  /**
  * Testcase
  */
  WAT.testcase(
    {
      name: ['home_check_title',lang.code],
      description : 'checking home page title for '+lang.code,
      feature : 'website internationnal',
      story : [ 'traduction des titres' ],
      severity : 'trivial',
      issue: ['AQA-0001'],
      argument : { lang: lang.code }
    },
    function (context) {
       // .... test impl 
    }
  );
});

Browser addons commands

  • openFullscreen
  • openScreen
  • startStep
  • testInfo
  • info
  • error
  • warning
  • attachFile
  • attachPng
  • showMessage
  • documentScreenshot

Step API

Allow developer to write its test with hierarchical logging context

function (context) {
  // go to open homepage fullscreen 
  browser
  .startStep('open home page ')
  .fullscreen()
  .url(url, 'open home page')
  .ok();
  
  
  // assert title value 
  browser.startStep('verify title')
  .assertEqual( browser.getTitle(), i18n('home', 'title', lang.code), 'check window title')
  .ok();
 
}

Details

  • startStep
  • testInfo
  • info
  • error
  • warning
  • attachPng
  • attachFile
  • openFullscreen
  • openScreen
  • showMessage
  • ok, passed
  • ko, failed
  • broken
  • cancel
  • error
  • assertEqual
  • assertVisible
  • assertVisual
  • url
  • submitForm
  • setValue
  • click
  • scroll
  • selectByValue
  • fullscreen
  • takeFullScreenshot
  • wait

Screenshot tools & Visual integration test

var tools = require('webdriverio-addons').tools;

Allow tester to get a fullscreen screenshot even if the underlying WebDriver only returns a viewport screenshot ( like Chrome )

  • takeFullScreenshot

Like webdriver-css plugin, but working with webdriver.io v4

  • takeElementScreenshot
  • assertVisual

Splash screen

  • before test meta data
  • after test with results

Create project

The Webdriverio-addons npm module will get all dependencies you need to make test running on you computer

Requirements

$ apt-get install git
...
$ git --version
git version 1.9.1
$ apt-get install nodejs-legacy npm
...
$ nodejs --version
v0.10.25
$ npm --version
1.3.10
$ apt-get install default-jre
...
$ java -version
OpenJDK Runtime Environment (IcedTea 2.6.7) (7u111-2.6.7-0ubuntu0.14.04.3)
OpenJDK 64-Bit Server VM (build 24.111-b01, mixed mode)
$ apt-get install graphicsmagick
...
$ gm
GraphicsMagick 1.3.18 2013-03-10 Q8 http://www.GraphicsMagick.org/
Copyright (C) 2002-2013 GraphicsMagick Group.
Additional copyrights and licenses apply to this software.
See http://www.GraphicsMagick.org/www/Copyright.html for details.

Dependencies

  • webdriverio
  • mocha
  • selenium-standalone
  • allure-cli
  • graphicsmagics
  • wdio-allure-reporter
  • wdio-allure-addons-reporter
  • wdio-dot-reporter
  • wdio-json-reporter
  • wdio-junit-reporter
  • wdio-mocha-framework
  • wdio-selenium-standalone-service
  • wdio-spec-reporter

Start new NPM project

# create new NodeJS project
$ mkdir myProject
$ cd myProject
$ npm init
$ npm install --save

Create your wdio configuration

Create your first spec

Cleanup

# cleanup working folders
rm -f -R ./allure-results
rm -f -R ./screenshots
rm -f -R ./outputDir
rm -f -R ./errorShots
rm -f -R ./allure-report

Run tests

./node_modules/.bin/wdio myConf.wdio.js

Generate Allure report

# generates allure report ( angularjs webapp )
./node_modules/.bin/allure generate ./allure-results -o ./allure-report
 
# start a webServer and open browser to see report
./node_modules/.bin/allure report open -o ./allure-report