basic-navigation Scenario 13 — Extract Text from Shadow DOM

Written by RTILA X Engineering Team

Advanced ~10 min

Prerequisites: basic-navigation/9 basic-navigation/10

What You'll Learn

Pierce open shadow roots and extract nested text

Real-World Use Case

Scraping web components from modern frameworks

LIVE DEMO

Shadow DOM Content

A Vue island attaches an open shadow root with hidden text after hydration.

EXPECTED OUTPUT

Shadow DOM Text

This text lives inside a Shadow DOM

RTILA X PROJECT JSON

RTILA X Automation Project

extract-shadow-dom-text.json

    {
  "name": "Extract_Text_From_Shadow_DOM",
  "settings": {
    "urls": [
      "https://learn.rtila.com/scenarios/basic-navigation/13"
    ]
  },
  "datasets": {
    "shadow_text": {
      "item_selector": "css=div#shadow-host",
      "properties": [
        {
          "name": "shadow_content",
          "type": "text",
          "selector": "css=.shadow-content"
        }
      ]
    }
  },
  "commands": [
    {
      "command": "goto",
      "params": {
        "url": "https://learn.rtila.com/scenarios/basic-navigation/13"
      }
    },
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=div#shadow-host"
      }
    },
    {
      "command": "extract_data",
      "params": {
        "dataset": "shadow_text"
      }
    }
  ]
}

RTILA X Concepts

RTILA X uses Patchright, which pierces open shadow DOM automatically. Selectors inside a shadow root can be used the same way as regular DOM selectors once the parent host is identified.

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 2 RTILA X commands and is referenced in 2 learning articles.

Continue Learning

Was this helpful?