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

Last updated: Jul 08, 2020 09:22

Jest is an open-source testing framework built on JavaScript and designed mainly for React- and React Native-based web applications. It is one of the most popular test runners these days and the default choice for React projects.

Jest ships as an npm package. You can install it in any JavaScript project. 

This section guides you through integrating Jest and Selenium Webdriver with Perfecto and Perfecto Smart Reporting. 

A sample project is available in GitHub: https://github.com/PerfectoMobileSA/Jest-perfecto-sample

Watch this video to see a demo of the integration setup. Detailed steps follow.



On this page: 

Prerequisites

Integrating Perfecto and Perfecto Smart Reporting with Jest requires the following npm packages:

  • jest
  • perfecto-reporting
  • selenium-webdriver

1 | Initialize and set up a Jest project

In this step, we start a new Jest project from scratch. 

To initialize and set up a Jest project:

  1. Install Node.js.
  2. To establish the npm project, run the following npm commands:

    npm init
    npm install jest perfecto-reporting selenium-webdriver --save-dev
  3. Create a test folder.
  4. Create test suite scripts with the file extension .spec.js, for example tests.spec.js.
    This way, when you need to run the test later, you can just use the following simple command:
    • To run all test script files: 

      Jest
    • To run a single test script file:

      Jest tests.spec.js

2 | Set up and integrate Perfecto Smart Reporting via a callback helper

To launch a Perfecto device session, you must specify a RemoveWebDriver session and device selection capabilities in the helper file.

To set up and integrate Perfecto Smart Reporting:

  1. Specify the Perfecto URL and capabilities as follows. You can also provide capabilities in the config.json.

    Capabilities
    {
        "android-web":
          {
            "model": "Galaxy.*",
            "platformName": "Android",
            "browserName":"Chrome",
            "takesScreenshot":true
          },
        "ios-web":
          {
            "model": "iPhone.*",
            "platformName": "iOS",
            "browserName":"Safari"
          }
        ,
        "ios-native":
          {
            "model": "iPhone.*",
            "platformName": "iOS",
            "bundleId":"com.apple.calculator",
            "browserName":"Safari"
          },
        "desktop-web":
          {
            "platformVersion": "10",
            "platformName": "Windows",
            "browserName":"Chrome",
            "browserVersion":"83",
            "resolution":"1024x768",
            "location":"US East"
          }
      }
    URL
    var REMOTE_URL = 'https://<cloud_name>.perfectomobile.com/nexperience/perfectomobile/wd/hub/fast';
  2. Use Selenium WebDriver to launch the Perfecto RWD session: 

    perfectoReportHelper.js
    browser =  await  new sel.Builder().withCapabilities(capabilities).usingServer(REMOTE_URL).build();
    await browser.manage().setTimeouts({implicit:20000});


  3. Use this browser object to perform any RWD-based activities. For example: 

    Jest sample
    test(' Test name, async function() { 
    	await drv.findElement(sel.By.css("<element css>")).click();
    	var result = await drv.findElement(sel.By.css("<element css>")).")).getText()
    	expect(await drv.findElement(sel.By.xpath(“”)).getText()).toEqual(value); 
    	});


  4. Use this browser object to perform any RWD-based activities. For example: 

    perfectoReportHelper.js
    browser =  await  new sel.Builder().withCapabilities(capabilities).usingServer(REMOTE_URL).build();
    await browser.manage().setTimeouts({implicit:20000});
  5. To integrate the automated Perfecto reporting feature on the fly, without changing the existing code structure of each test scenario, set up a customized describe function with driver launch callback and reporting and teardown hooks.
    In the following example, this function is called describeWithPerfecto

    describeWithPerfecto function
    var sel      = require('selenium-webdriver');
    var perfectoReporting = require('perfecto-reporting');
    var config = require('./config.json')
    
    // Helper function to launch and provide browser object and reporting client for our test cases. Usage
    //
    //  describeWithPerfecto(
    //   'capName'
    //   'name'
    //  )
    //
    module.exports = function describeWithPerfecto(capName, name, callback, body) {
      let browser;
      let reportingClient;
      describe(name, function() {
        jest.setTimeout(50000);
        // as we using beforeEach here, new browser will be received for every test case
        beforeEach(async function() {
                try{
                  // Setting the capabilities based on the 
                    const capabilities = {
                        'platformName' : config[capName].platformName,
                        'model' : config[capName].model,
                        'platformVersion':config[capName].platformVersion,
                        'bundleId' : config[capName].bundleId, //your app bundle id
                        'browserName' : config[capName].browserName,
                        'browserVersion' : config[capName].browserVersion,
                        'location': config[capName].location,
                        'resolution': config[capName].resolution,
                        'securityToken' : process.env.token, //Replace process.env.token your securityToken 'eyJhbGciOiJIUz....'
                        'takesScreenshot' : config[capName].takesScreenshot
                      }
                        //launch the remoteWebDriver
                        var REMOTE_URL = 'https://'+process.env.cloudName+'.perfectomobile.com/nexperience/perfectomobile/wd/hub/fast'; //Replace process.env.cloudName with your demo 'demo'
                        browser =  await  new sel.Builder().withCapabilities(capabilities).usingServer(REMOTE_URL).build();
                        await browser.manage().setTimeouts({implicit:20000});
                        var perfectoExecutionContext =  
                            await new perfectoReporting.Perfecto.PerfectoExecutionContext({
                                webdriver: browser,
                                //set the CI job name and CI job number, replace process.env.jobName with jobname 'MyJobName' and process.env.jobNumber with jobnumber '1'
                                job: {jobName: process.env.jobName,buildNumber:parseInt(process.env.jobNumber)},
                                //Set the tags
                                tags: ['Jest-Perfecto', 'JestSample']
                            }
                        );
                        reportingClient = 
                            await new perfectoReporting.Perfecto.PerfectoReportingClient(perfectoExecutionContext);
        
                 }catch(e)
                {
                    console.log(e);
                }
                r={};
                r.drv=browser;
                r.rpt=reportingClient;
          callback(r);
        });
    
        body();
    
        // we should shut down browser when we don't need it anymore, in order to avoid
        // dead sessions. Always ensure that you are ending your session in the test end!
        afterEach(function() {
          return browser.quit();
        });
      });
    };
  6. Use this customized describeWithPerfecto function as follows:

    describeWithPerfecto sample
    var sel      = require('selenium-webdriver');
    var perfectoReporting = require('perfecto-reporting');
    let describeWithPerfecto = require('../PerReportHelper.js'); // include Perfecto reporter helper
    var drv;
    describeWithPerfecto( "ios-native",  //Config name to select capabilities from config.json
        'iOS caculator tests',  // suite name
    b=>{drv=b.drv;rpt=b.rpt;},  //callback to launch webdriver and perfectoreporting client
    function(){
            test(' test and verify 1 + 2 = 3',  async function() {
             await rpt.testStart('test and verify 1 + 2 = 3')
              try {
               await drv.findElement(sel.By.xpath('//*[@label="1"]')).click();
               await drv.findElement(sel.By.xpath('//*[@label="add"]')).click();
               await drv.findElement(sel.By.xpath('//*[@label="2"]')).click();
               await drv.findElement(sel.By.xpath('//*[@label="equals"]')).click();
               var result = await drv.findElement(sel.By.xpath('//*[@label="Result"]')).getText();
               await rpt.reportiumAssert("Verify result", result == "3")
               await rpt.testStop({status: perfectoReporting.Constants.results.passed});    
                } 
          catch (error) 
    {
      await rpt.testStop({status: perfectoReporting.Constants.results.failed, message: error.message});
            throw error;
      }   
              });
    }
    
    );

3 | Smart Reporting integration example

To integrate Jest with Perfecto Smart Reporting, contact the Perfecto Professional Services team.

The following images show the sample Jest-Perfecto-Sample job in the CI Dashboard view and the Verify github home page report in the Report Library.