Jest
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
On this page:
Prerequisites
Integrating Perfecto and Perfecto Smart Reporting with Jest requires the following npm packages:
jest
perfecto-reporting
selenium-webdriver
Step-by-step instructions
Expand a step to view details.
In this step, we start a new Jest project from scratch.
To initialize and set up a Jest project:
- Install
Node.js
. -
To establish the npm project, run the following npm commands:
Copynpm init
npm install jest perfecto-reporting selenium-webdriver --save-dev - Create a test folder.
-
Create test suite scripts with the file extension
.spec.js
, for exampletests.spec.js
.This way, when you need to run the test later, you can use the following simple command:
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:
-
Specify the Perfecto URL and capabilities as follows. You can also provide capabilities in the
config.json
.CopyCapabilities
{
"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" }
}CopyURL
var REMOTE_URL = 'https://<cloud_name>.perfectomobile.com/nexperience/perfectomobile/wd/hub/fast';
-
Use Selenium WebDriver to launch the Perfecto RWD session:
CopyperfectoReportHelper.js
browser = await new sel.Builder().withCapabilities(capabilities).usingServer(REMOTE_URL).build();
await browser.manage().setTimeouts({implicit:20000}); -
Use this browser object to perform any RWD-based activities. For example:
CopyJest 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);
}); -
Use this browser object to perform any RWD-based activities. For example:
CopyperfectoReportHelper.js
browser = await new sel.Builder().withCapabilities(capabilities).usingServer(REMOTE_URL).build();
await browser.manage().setTimeouts({implicit:20000}); -
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
.CopydescribeWithPerfecto 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();
});
});
}; -
Use this customized
describeWithPerfecto
function as follows:CopydescribeWithPerfecto 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;
}
});
}
);
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.