Get computed style – Virtuoso

The getComputedStyle extension returns the computed value of a specific CSS property from a matching page element. It can locate the target element using either an XPath selector or a CSS selector.

This is useful when a journey needs to validate rendered styling, such as checking a font size, font family, color, spacing, visibility-related CSS value, or another CSS property after the page has loaded and styles have been applied.

Parameters:

selector required, a string containing either an XPath selector or a CSS selector for the element whose computed style should be inspected;
property required, a string containing the CSS property name to read, for example font-size, font-family, color, or background-color.

Note: The extension first tries to evaluate the selector as XPath. If XPath evaluation throws an error, it then tries the same value as a CSS selector. Use a selector that uniquely identifies the intended element and a CSS property name in standard kebab-case format, such as font-size.

How to apply this to your journey

Use the extension in a journey by calling getComputedStyle with the execute command. Pass the element selector as selector and the CSS property name as property.

Note: The value returned by this extension is the browser-resolved computed style at the moment the step runs. Wait for the element and any dynamic styling, animations, or responsive layout changes to settle before asserting the returned value.

execute "getComputedStyle" using "//*[@id='gbw']/div/div[2]" as selector, "font-size" as property returning $fontSize
assert $fontSize equals "13px"

execute "getComputedStyle" using "#gbw > div > div:nth-child(2)" as selector, "font-family" as property returning $fontFamily
assert $fontFamily equals "arial, sans-serif"

You can also store the selector and CSS property in variables before calling the extension.

execute "getComputedStyle" using "$elementSelector" as selector, "$cssProperty" as property returning $styleValue

store value "#gbw > div > div:nth-child(2)" in $elementSelector
store value "font-family" in $cssProperty
execute "getComputedStyle" using "$elementSelector" as selector, "$cssProperty" as property returning $styleValue
assert $styleValue equals "arial, sans-serif"

Example output:

13px

This extension does not require any external resource.

The extension should be configured as:

Run asynchronously: No
Scope: Global

Limitation: This extension runs in the browser page context available to the Virtuoso journey and reads styles using document.evaluate, document.querySelector, and window.getComputedStyle. It can only inspect elements available in the current document context when the step runs; elements inside a different frame may require the journey to switch to that frame first, and cross-origin or sandboxed frames may be inaccessible because of browser security boundaries. The returned value is the browser-resolved CSS value, so it can change with loaded stylesheets, web fonts, viewport size, responsive layout, active pseudo states, animations, themes, localization, and browser-specific CSS resolution. In cross-browser or real-device executions, validate expected style values in each configured browser/device because Chromium, Firefox, Safari, Edge, iOS, Android, and remote grids can differ in CSS defaults, font availability, rendered metrics, and computed-value serialization. If the selector matches multiple elements, the XPath branch returns the first ordered node and the CSS branch returns the first matching element; if the property name is unsupported or not present, the extension may return an empty string rather than a failure.

Add the extension to your Virtuoso instance

Select the domain that matches your Virtuoso account.

Add extension to Virtuoso - https://app.virtuoso.qa/ →	Add extension to Virtuoso Free Trial - https://app2.virtuoso.qa/ →
Add extension to Virtuoso US - https://app-us.virtuoso.qa/ →	Add extension to Virtuoso UK - https://app-uk.virtuoso.qa/ →

View source

Last updated: 12/05/2020

Resources:

This extension does not require any external resource.

// Last updated: 12/05/2020, 07:46:10 UTC
function css( selector, property ) {
  if (!selector) throw new Error('Element selector not provided')
  if (!property) throw new Error('Property name not provided')

  let element = null

  try {
    // Try using XPATH
    element = document.evaluate(selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
  } catch { 
    try {
      // Try using CSS selector if XPATH method failed
      element = document.querySelector(selector)
    } catch { }
  }
  
  // Both XPATH and CSS selector methods failed
  if (!element) throw new Error('Could not find element using provided selector')

  // A CSSStyleDeclaration object containing CSS declaration block of the element
  const computedStyle = window.getComputedStyle( element, null )

  return computedStyle.getPropertyValue( property )
}

return css(selector, property)