Page tree
Skip to end of metadata
Go to start of metadata

Last updated: Jan 20, 2020 17:30

This section walks you through creating a project with WebdriverIO v5 using the Cucumber framework and connecting it to the Perfecto cloud. In addition, it includes:

  • Examples of the PageObject pattern
  • Different locator files to run the same script on Android and iOS devices
  • Practical examples for using WebdriverIO to build an automated test suite with the Cucumber version 5.x framework

A sample project is available on GitHub:

Get started

To clone and prepare the project, run the following commands from the command line:

git clone
cd webdriverio5-cucumber-perfecto-sample
npm install

On this page:

1 | Configure WebdriverIO

Through the WebdriverIO configuration file, you can set up and execute tests in specific ways. You can fully customize the configuration and invoke different functions before, during, and after each test or test suite. In this step, we configure this file.

  1. Open the file config/wdio.perfecto.conf.js.
  2. Configure the following:
    1. To integrate and run our tests in the Perfecto cloud, add your security token and Perfecto hostname, as shown in the following code snippet.

      const path = require('path');
      const Reporting = require('perfecto-reporting');
      const securityToken = '<replace with your security token>';
      const host = '<replace with the Perfecto host name>';
       Click to see how to generate a security token

      To generate a security token:

      1. In the Perfecto UI at <YourCloud> (where YourCloud is your actual cloud name, such as mobilecloud), click your user name and select My security token

      2. In the My security token form, click Generate Security Token.
      3. Click Copy to clipboard. Then paste it into any scripts that you want to run with Perfecto. 

      4. Click Close.

    2. To define the Perfecto devices that you want to use during the run, define the required capabilities, as shown in the following code snippet.

          capabilities: [
                  //browserName: 'chrome',
                  shardTestFiles: false,
                  manufacturer: 'Samsung',
                  platformName: 'android',
                  securityToken: securityToken
                  shardTestFiles: false,
                  platformName: 'iOS',
                  securityToken: securityToken

      The scenario in the code snippet runs on 2 devices in parallel: a Samsung (Android) device and an iOS (Apple) device.

      For information on the capability names you can use, see Define capabilities.

    3. Specify tags using tagExpression key, as shown in the following code snippet.

          // If you are using Cucumber you need to specify the location of your step definitions.
          cucumberOpts: {
              require: ['./src/features/step_definitions/calc.steps.js'],      // <string[]> (file/dir) require files before executing features
              backtrace: false,   // <boolean> show full backtrace for errors
              requireModule: ['@babel/register'],  // <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
              dryRun: false,      // <boolean> invoke formatters without executing steps
              failFast: false,    // <boolean> abort the run on first failure
              format: ['pretty'], // <string[]> (type[:path]) specify the output format, optionally supply PATH to redirect formatter output (repeatable)
              colors: true,       // <boolean> disable colors in formatter output
              snippets: true,     // <boolean> hide step definition snippets for pending steps
              source: true,       // <boolean> hide source uris
              profile: [],        // <string[]> (name) specify the profile to use
              strict: false,      // <boolean> fail if there are any undefined or pending steps
              tagExpression: '@calcSimpleTest or @calcSimpleTest',  // <string> (expression) only execute the features or scenarios with tags matching the expression
              timeout: 60000,     // <number> timeout for step definitions
              ignoreUndefinedDefinitions: false, // <boolean> Enable this config to treat undefined definitions as warnings.
              compiler: ['js:babel-core/register']

      This executes only scenarios with tags that match the expression in the tagExpression key in the cucumberOpts object.

      Note: In WebdriverIO version 5.16.15, this key is a string, but in future WebdriverIO versions, this could change to an array of strings (string[]).

2 | Develop automation tests

In this step, we explain how to develop automation tests using the Cucumber Javascript framework and page object and page locators.

Cucumber JavaScript framework

When you work with the Cucumber framework, you write tests using the Gherkin syntax and save them as *.feature files in the /src/features directory. A typical test looks similar to the following:

Page objects and page locators

The page object pattern helps us reduce the amount of duplicated code. If the UI changes, we only need to apply the fix in one place. Instead of including our selectors (such as classes, IDs, or XPath expressions) in our step definitions, we place them in a .js file so that we can manage all selectors, reusable functions, and logic in a single location. Test file should only call the test methods.

The page object serves as a layer of abstraction between tests and code. When a test fails, it fails on an individual step. That step may call a selector that is no longer valid, but that selector may be used by many other steps as well. By having a single source of truth of what the selector is supposed to be, fixing one selector on the page object could repair a number of failing tests that were affected by the same selector.

It is best practice to separate page objects into individual files that end with .page.js. They require the basic page.js prototype construct or abstract class and create new objects for each individual page. We store pages in *.page.js files in the /src/pageobjects directory and place the selectors for each platform (Android or iOS) in so-called page locators, which are files with the extension .page.loc.js. During run time, the page object points to the correct page locater object according to the platform that is running. Make sure the name of the page locator matches its page object and ends with .page.loc.js. For example, for the file, there are two locator files: /src/pageLocators/android/ and /src/pageLocators/ios/

3 | Run the automation script

To execute your script, run the following command from the command line:

npm run perfecto

4 | View test results in Perfecto reports

After you run the scripts, you can access the results in the Perfecto CI Dashboard view, as shown in the following image.

In the Single Test Report (STR), view the test flow with individual steps, as shown in the following image.

  • No labels