Imagium can be integrated with Cypress.io using its out of box API’s. Now visual testing with Cypress can be done with just snap of a finger and with utmost precision.
For more details on Imagium API’s check here
Documentation on cypress can be seen here
There are various ways in which Cypress can be integrated with Imagium . See below a sample code, change the parameters and file path according to your needs.
TestScript.js
var testNameImagium = "Cypress Integration";
var projectKeyImagium = '98fea763-7fc1-46d4-a772-3d72f152fe5';
var uidEndPointImagium = 'http://192.168.2.10:90/api/GetUID';
var validateEndPointImagium = 'http://192.168.2.10:90/api/Validate';
var testUID;
var baseImage;
var step;
var pload = {"StepName": step, "TestRunID": testUID, "ImageBase64": baseImage};
describe('My First Test', () => {
it('Visit Google', () => {
//Generate 'Test Run ID'
//Use the same 'Test Run ID' for multiple steps in the same test case
cy.request('POST',uidEndPointImagium,{"TestName": testNameImagium, "ProjectKey": projectKeyImagium }).then((resp) => {
cy.log(resp.body);
//Update the validate payload with test ID
pload.TestRunID = resp.body;
})
//Navigate to a URL
cy.visit('https://www.google.com/');
//Wait and allow all the elements to be loaded properly
//You can use strategies like wait for an element instead of hardcoded waits
cy.wait(3000);
//Take screenshot and store at a particular location - Overwriting is important else you will have to fetch the runtime image path
//You can also take a full page screenshot
cy.screenshot('Imagium/Image',{ overwrite: true });
//Read the screenshot taken above and convert it into base64 image - use your Screenshot path
cy.readFile('./cypress/screenshots/examples/sample_spec.js/Imagium/Image.png', 'base64').then((b64) => {
//Update validate paylod with base 64 image
pload.ImageBase64 = b64;
cy.log(baseImage);
})
//Update the validate paylod with Step Name
pload.StepName = "Step1";
//send request to validate the image
cy.request('POST',validateEndPointImagium, pload).then((resp) => {
cy.log(testUID);
cy.log(resp.body);
})
})
})
Handling full page screenshots with sticky elements
As per the official documentation from Cypress, there can be a scenario where a sticky elements can appear multiple times in the final screenshot. To handle this all we need to is before taking the screenshot find the sticky element and change its position to absolute. See the sample below:
cy.get('.sticky-header').invoke('css', 'position', 'absolute');
cy.screenshot('Imagium/Image',{ overwrite: true });
cy.get('.sticky-header').invoke('css', 'position', null);