Skip to main content

dynamic-content Scenario 3 — Client-Side Route Navigation

Written by RTILA X Engineering Team

Intermediate ~6 min
Prerequisites: dynamic-content/1 dynamic-content/2

What You'll Learn

Handle content that loads after user interaction

Real-World Use Case

Clicking tabs that load content via AJAX

LIVE DEMO

Page 1 Content

This is the first page in the client-side route demo.
EXPECTED OUTPUT

RTILA X PROJECT JSON 

    {
  "name": "Client_Side_Route_Navigation",
  "settings": {
    "urls": [
      "https://learn.rtila.com/scenarios/dynamic-content/3"
    ]
  },
  "datasets": {
    "page_heading": {
      "item_selector": "css=.page-content h1",
      "properties": [
        {
          "name": "text",
          "type": "text",
          "selector": "css=self"
        }
      ]
    }
  },
  "commands": [
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=.nav-page2"
      }
    },
    {
      "command": "click",
      "params": {
        "selector": "css=a.nav-page2"
      }
    },
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=.page-content h1"
      }
    },
    {
      "command": "extract_data",
      "params": {
        "dataset": "page_heading"
      }
    }
  ]
}

Client-side routing changes the DOM without navigating to a new HTML page. The automation clicks the Page 2 link, waits for the new heading to appear, and extracts it.

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 1 learning article.

Continue Learning

Was this helpful?