How Can We Help?
WebdriverIO is test automation framework/tool for web and mobile application. It is open source and the underlying protocols are the same as Webdriver. WebdriverIO is getting popular especially for automation of React and Angular applications. Integration with Imagium for visual testing is very straight forward and is based on the following steps.
- Get a unique runtime UID using GETUID API call – This would need a project key and a TestName (Choose any name)
- Take a snapshot and convert it into Base64 string
- Pass the Base64 (as generated above) to Validate API call to make the comparison
- Results can be viewed on Imagium portal
Library
To do the setup use the following code as a supporting library . it contains two methods getUID and validate for their respective usage. You would need to specify the endpoint of your Imagium Instance and a projectKey.
import { ChainablePromiseElement } from 'webdriverio';
const https = require('https');
const axios = require('axios');
import Page from './page';
/**
* sub page containing specific selectors and methods for a specific page
*/
class imagium {
//Declarice static container for runtime UID
public static uidCommon: string ='';
//Specify yor URI for Imagium instance
public static endpoint: string = 'http://192.168.10.1:91/';
//Specify yor project secret key
public static projectKey: string = '93f034e8-90f8-41ac-a0ef-17f9fgg43281';
/**
* getUID method returns UID for the specified TestName
*/
public async getUID (testName: string) {
var testUID;
console.log('start the api call');
const httpsAgent = new https.Agent({ rejectUnauthorized: false })
let res = await axios.post(imagium.endpoint+'api/GetUID', {TestName: testName, ProjectKey: imagium.projectKey}, {
httpsAgent: new https.Agent({
rejectUnauthorized: false
})
})
.then((res: { status: any; data: any; }) => {
imagium.uidCommon = res.data.toString();
console.log('Body of getUID: ', imagium.uidCommon);
return imagium.uidCommon;
}).catch((err: any) => {
console.log('stop the api call 1');
console.error(err);
console.log(err);
return imagium.uidCommon;
})
return imagium.uidCommon;
}
/**
* validate method is used to make comparison
*@stepName - The stepname should be uniques alphanumeric
*@base64 - The snapshot image in Base64 Format
*@testRunId - The runtime UID generated by getUID method
*/
public async validate(stepName: string, base64: string, testRunID: string) {
let res = await axios.post(imagium.endpoint+'api/Validate', {StepName: stepName, TestRunID: imagium.uidCommon, ImageBase64: base64}, {
httpsAgent: new https.Agent({
rejectUnauthorized: false
})
})
.then((res: { status: any; data: any; }) => {
console.log(`Status of validateScreenshot: ${res.status}`);
console.log('Response of validate: ', res.data);
}).catch((err: any) => {
console.error(err);
})
}
}
export default new imagium();
Usage
Run the following code on and browser page where a snapshot is to be taken and sent to imagium. GetUID method should be called only once in a test case and the same uid should be used for subsequent steps by changing the step names. Creating a new uid will create a new testcase.
//Generate the runtime UID - required for a new visual test
var uid = await imagium.getUID('TestName');
//Run the following code after you reach the desired page for snapshot
//This will generate image buffer in base64 format
var screenshot64 = (await browser.takeScreenshot());
//Call the validate method to make the comparison
await imagium.validate('Step Name', screenshot64, uid );Dependencies
To pull the axios dependencies you can use the following npm commands
npm i axios