How Can We Help?

< All Topics

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);

Alternate JavaScript approach – Without saving the screenshot on file system

This following test demonstrates a clean and efficient approach to visual testing by capturing a full-page screenshot directly in memory – without saving any files to disk. It integrates with Imagium by first generating a unique test run ID via API, then navigating to a target page, capturing a base64-encoded screenshot using Cypress.automation(), and finally sending the image to Imagium’s /Validate endpoint for visual comparison. This method ensures faster execution, avoids file system dependencies, and is ideal for modern CI/CD pipelines and parallel execution.

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';

describe('My First Test - No File Screenshot', () => {
  it('Visit Google and Validate Screenshot', () => {

    // Step 1: Get UID
    cy.request('POST', uidEndPointImagium, {
      "TestName": testNameImagium,
      "ProjectKey": projectKeyImagium
    }).then((uidResp) => {
      const testUID = uidResp.body;

      // Step 2: Visit page
      cy.visit('https://www.google.com/');
      cy.wait(3000); // Wait for full render (you can improve with cy.get)

      // Step 3: Take screenshot in memory (full page)
      Cypress.automation('take:screenshot', {
        testFailure: false,
        capture: 'fullPage'  // ← full page screenshot
      }).then(({ base64Screenshot }) => {
        const payload = {
          StepName: "Step1",
          TestRunID: testUID,
          ImageBase64: base64Screenshot
        };

        // Step 4: Send screenshot to Imagium for validation
        cy.request('POST', validateEndPointImagium, payload).then((validateResp) => {
          cy.log("Validation Response:");
          cy.log(JSON.stringify(validateResp.body));
        });
      });

    });

  });
});

Alternate TypeScript approach – Without saving the screenshot on file system

// cypress/e2e/imagium-visual-test.cy.ts

describe('Imagium Visual Test - No File Screenshot (TypeScript)', () => {
  const testNameImagium: string = "Cypress Integration";
  const projectKeyImagium: string = '98fea763-7fc1-46d4-a772-3d72f152fe5';
  const uidEndPointImagium: string = 'http://192.168.2.10:90/api/GetUID';
  const validateEndPointImagium: string = 'http://192.168.2.10:90/api/Validate';

  it('Visit Google and Validate Screenshot', () => {
    interface ScreenshotResponse {
      base64Screenshot: string;
    }

    interface ImagiumPayload {
      StepName: string;
      TestRunID: string;
      ImageBase64: string;
    }

    // Step 1: Request UID from Imagium
    cy.request<string>('POST', uidEndPointImagium, {
      TestName: testNameImagium,
      ProjectKey: projectKeyImagium
    }).then((uidResp) => {
      const testUID: string = uidResp.body;

      // Step 2: Navigate to target page
      cy.visit('https://www.google.com/');
      cy.wait(3000); // Replace with better selector-based wait in production

      // Step 3: Capture screenshot as base64 in memory (no file write)
      Cypress.automation('take:screenshot', {
        testFailure: false,
        capture: 'fullPage'
      }).then((screenshot: ScreenshotResponse) => {

        const payload: ImagiumPayload = {
          StepName: "Step1",
          TestRunID: testUID,
          ImageBase64: screenshot.base64Screenshot
        };

        // Step 4: Send base64 screenshot to Imagium
        cy.request('POST', validateEndPointImagium, payload).then((validateResp) => {
          cy.log("Imagium Validation Response:");
          cy.log(JSON.stringify(validateResp.body));
        });

      });
    });
  });
});