Skip to main content

basic-navigation Scenario 10 — Get Computed Style of H1

Written by RTILA X Engineering Team

Intermediate ~6 min

What You'll Learn

Read computed CSS styles programmatically

Real-World Use Case

Verifying design system compliance

LIVE DEMO

Styled Heading

An h1 with an inline style that provides the expected computed color.

Automation For The Web

EXPECTED OUTPUT

Computed Heading Color

      {
  "color": "rgb(79, 70, 229)"
}
RTILA X PROJECT JSON

RTILA X Automation Project

get-computed-style.json 
    {
  "name": "Get_Computed_Style_Of_H1",
  "settings": {
    "urls": [
      "https://learn.rtila.com/scenarios/basic-navigation/10"
    ],
    "headless": false,
    "navigation_timeout": 30000,
    "max_concurrent_workers": 1,
    "humanoidEnabled": true,
    "humanoidSensitivity": "medium"
  },
  "datasets": {},
  "commands": [
    {
      "command": "goto",
      "params": {
        "url": "https://learn.rtila.com/scenarios/basic-navigation/10"
      }
    },
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=h1.styled-heading"
      }
    },
    {
      "command": "execute_script",
      "params": {
        "script": "return window.getComputedStyle(document.querySelector('h1.styled-heading')).color;",
        "output_variable": "heading_color"
      }
    }
  ]
}

RTILA X Concepts

getComputedStyle returns the final styles applied by the browser after CSS cascading. It can be read through execute_script when no direct selector-based command can retrieve the value.

Did you complete this scenario?

Ready to run this automation?

Copy the project JSON above, open RTILA X, create a new project, and paste it.

Download RTILA X Free → View setup guide →

This scenario covers 1 RTILA X command and is referenced in 1 learning article.

Continue Learning

Was this helpful?