How to determine color of the element

Article Overview:

This article will cover how you can achieve the following:

How to identify the color of an element on a webpage and use it for validation in test journeys. By extracting the color value (in RGB format), you can validate UI properties or perform other checks based on the element's appearance.

Problem Statement:

In some scenarios, you may need to validate the colour of an element as part of your testing process. However, identifying the colour directly requires extracting the RGB value of the element, which can be challenging without proper tools or methods.

Solution:

To extract and validate the colour of an element, you can create a custom Virtuoso extension. This extension will:

1. Identify the element using a selector (e.g., CSS or XPath).
2. Retrieve the computed style of the element, including its colour in RGB format.
3. Allow you to use this colour value for validation within your test.

Steps to Implement the Solution

1. Create a Custom Extension
   Open Virtuoso, navigate to the Extensions section, and paste the following sample code:

    

   function getElement(selectors) {
   let element = null;
   for (const selectorDetails of selectors) {
   switch (selectorDetails.type) {
   case 'CSS_SELECTOR':
   element = document.querySelector(selectorDetails.value);
   break;
   case 'XPATH':
   element = document.evaluate(selectorDetails.value, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
   break;
   case 'ID':
   element = document.getElementById(selectorDetails.value);
   break;
   default:
   continue;
   }
   if (element) return element; // Exit loop if element is found
   }
   throw new Error('Element not found with the provided selectors.');
   }
   
   function getElementColor(virtuosoElement) {
   const { selectors } = JSON.parse(virtuosoElement);
   const element = getElement(selectors);
   if (!element) throw new Error('Element not found.');
   const color = window.getComputedStyle(element).color; // Get the RGB color
   return color;
   }
   
   // Usage Example
   const color = getElementColor(element);
   console.log('Element color:', color);

    

2. Customize the Selector

   • Replace the element variable with the actual element's selector path (e.g., CSS, XPath, or ID).
   • Ensure the selector uniquely identifies the target element on the page.
     
     

3. Extract the Color
   Use the getElementColor function to extract the element's color in RGB format. The output can be logged or validated against the expected value.
   
   

4. Validate the Color
   Compare the retrieved RGB value to the expected color in your test logic.

Example:

Suppose you want to validate the color of a button with the text "Submit." The custom extension identifies the button element using its selector and retrieves its color, allowing you to validate whether it matches the expected RGB value (e.g., rgb(0, 123, 255)).