Skip to main content

dynamic-content Scenario 1 — Wait for Angular App Render

Written by RTILA X Engineering Team

Beginner ~4 min

What You'll Learn

Wait for page load states before interacting

Real-World Use Case

Handling slow-loading sites
LIVE DEMO

Angular App Dashboard

Wait for the Angular-style app to finish rendering before the metrics table appears.

Loading Angular app...
EXPECTED OUTPUT

Angular Dashboard Metrics

metric value status
Page Load 0.8s Good
API Response 142ms Good
Memory Usage 54 MB Normal
Error Rate 0.02% Stable
WebSocket Connected Active
RTILA X PROJECT JSON

RTILA X Automation Project

wait-for-angular-render.json 
{
  "name": "Wait_For_Angular_Render",
  "settings": {
    "urls": [
      "https://learn.rtila.com/scenarios/dynamic-content/1"
    ]
  },
  "datasets": {
    "ng_data": {
      "item_selector": "css=table.ng-data-table tr",
      "properties": [
        {
          "name": "metric",
          "type": "text",
          "selector": "css=td:nth-child(1)"
        },
        {
          "name": "value",
          "type": "text",
          "selector": "css=td:nth-child(2)"
        },
        {
          "name": "status",
          "type": "text",
          "selector": "css=td:nth-child(3)"
        }
      ]
    }
  },
  "commands": [
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=#app-root .ng-content",
        "timeout": 30000
      }
    },
    {
      "command": "extract_data",
      "params": {
        "dataset": "ng_data"
      }
    }
  ]
}

SPAs like Angular often render content after a delay. The wait_for_selector command with a custom timeout pauses extraction until the app content is present in the DOM.

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?