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

Last updated: Jan 20, 2020 12:41

This section walks you through creating a project with WebdriverIO using the Jasmine framework and connecting it to the Perfecto cloud.

Prerequisites

Make sure you have Node.js (https://nodejs.org/) and NPM (https://www.npmjs.com/) installed on your machine.

1 | Install and set up WebdriverIO

  1. Install WebdriverIO from command line (the "-g" option installs it globally, remove it to install it locally per project):

    npm install -g webdriverio
  2. Create an environment variable named NODE_PATH which contains the path to your "node_modules" directory. For example:

    export NODE_PATH=/Users/<username>/node_modules/
  3. The test runner is called wdio and should be available after the install was successful:

    wdio --help
  4. Run the configuration with the following command to configure your setup:

    wdio config

On this page:

2 | Connect to Perfecto

The following code connects to Perfecto, opens a device, navigates to google.com in the browser, and prints out the title of the page.

To get an understanding of the capabilities available when connecting to Perfecto, see these articles or use search:

The complete sample can be found here in the Perfecto GitHub repository.

var webdriverio = require('webdriverio');
var options = {
        desiredCapabilities: {
             platformName: 'ANDROID',                       
             browserName: 'mobileOS',                                             
             deviceName: 'yourDeviceID',
             user: 'yourEmail@perfectomobile.com',
             password:'yourPassword',
    },
    host: 'yourHost.perfectomobile.com',
    path: '/nexperience/perfectomobile/wd/hub',
port:80 
};
webdriverio
    .remote(options)
    .init()
    .url('http://www.google.com')
    .title(function(err, res) {
        console.log('Title was: ' + res.value);
    })
    .end();

3 | Test an app

This step provides an example of how to test an app with WebdriverIO.

  1. Edit your wdio.conf.js file and specify the platform name, app package, and your Perfecto credentials. Here is an example of how to test the LinkedIn app.

        host: '<your_lab>.perfectomobile.com',
        port: 80,
        path: '/nexperience/perfectomobile/wd/hub',
        capabilities: [{
            browserName: 'mobileOS',
            user: 'username@perfectomobile.com',
            password: 'PerfectoPassword',
            deviceName: '<device_id>',
            platformName: 'Android',
            appPackage: 'com.linkedin.android'
        }]
  2.  Edit your specs.js file and add your test steps. In the below example, the test launches the LinkedIn app, retrieves the LinkedIn logo element using Accessibility ID (http://webdriver.io/guide/usage/selectors.html#Accessibility-ID) and prints it to the console.

    var assert = require('assert');
    describe('Sample LinkedIn App Test', function() {
        it('should have the LinkedIn logo', function () {
            browser.launch();
            var element = browser.element(`~LinkedIn logo`);
            console.log(element);
        });
    });
  3. Use the wdio command to run your test.

    wdio wdio.conf.js

4 | Add reporting to your tests

  1. Install the selenium-webdriver (version 2) package via npm.

    npm install selenium-webdriver@2
  2. Install the perfecto-reporting package via npm.

    npm install perfecto-reporting
  3. Add a global variable named "reportingClient" and a constant "tags" at the top of your wdio.conf.js file.

    var reportingClient;
    const tags = ['SampleTag1', 'SampleTag2', 'SampleTag3'];
  4. Add the following "before" function to your wdio.conf.js file.

        before: function (capabilities, specs) {
            const Reporting = require('perfecto-reporting');
            reportingClient = new Reporting.Perfecto.PerfectoReportingClient(new Reporting.Perfecto.PerfectoExecutionContext({
                webdriver: {
                    executeScript: (command, params) => {
                        browser.execute(command, params);
                    }
                },
                tags: tags
            }));
            browser.reportingClient = reportingClient;
  5. Add the "Reporting" constant, test start, test step start(s), test step end(s), and test stop to your specs.js file.

    var assert = require('assert');
    const Reporting = require('perfecto-reporting');
    
    describe('Sample LinkedIn App Test', function() {
    
        it('should have the LinkedIn logo', function () {
            try {
            browser.reportingClient.testStart('LinkedIn Sample Test');
            browser.reportingClient.testStep('Step 1: Start LinkedIn App');
            browser.launch();
            browser.reportingClient.stepEnd();
            browser.reportingClient.testStep('Step 2: Find LinkedIn Logo');
            var element = browser.element(`~LinkedIn logo`);
            console.log(element);
            browser.reportingClient.stepEnd();
            browser.reportingClient.testStop({
                status: Reporting.Constants.results.passed
                });
        } catch (err) {
            browser.reportingClient.testStop({
            status: Reporting.Constants.results.failed,
            message: JSON.stringify(err)
        });
      }
        });
    });

JavaScript sample for native automation

This code sample demonstrates the use of WebDriverIO, a JavaScript automation framework for executing native automation tests with Perfecto. The complete sample and documentation are available in the PerfectoCode GitHub Repository: https://github.com/PerfectoCode/Samples/tree/master/Appium/JavaScript

  • No labels