Skip to main content

dynamic-content Scenario 2 — Wait for React Network Idle and Extract List

Written by RTILA X Engineering Team

Beginner ~4 min

What You'll Learn

Wait for an element to appear or disappear

Real-World Use Case

Dealing with disappearing spinners
LIVE DEMO

React Article List

Wait for network idle while the React-style app renders its article list.

Rendering...
EXPECTED OUTPUT

React Article Items

title desc
The Future of Edge Computing in 2025 Edge computing is moving from niche to mainstream as latency-sensitive applications demand local processing power.
How Remote Teams Boost Productivity Distributed teams consistently outperform their office-based peers when supported by the right tools and culture.
CRISPR Gene Editing Breakthroughs New delivery mechanisms are making CRISPR therapies safer and more effective for previously untreatable genetic conditions.
10 Habits for Better Sleep Small daily routines can dramatically improve sleep quality and long-term health outcomes.
Hidden Gems of Southeast Asia Beyond the famous temples and beaches, Southeast Asia offers tranquil villages, dramatic landscapes, and rich local culture.
WebAssembly Adoption Trends WebAssembly is quietly becoming the preferred runtime for performance-critical code in the browser and beyond.
The Rise of Headless E-Commerce Separating storefront from backend gives retailers the flexibility to create unique customer experiences.
Quantum Computing Progress Report Quantum computing continues incremental but meaningful progress, with new qubit architectures and error-correction milestones.
RTILA X PROJECT JSON

RTILA X Automation Project

wait-for-react-network-idle.json 
{
  "name": "Wait_For_React_Network_Idle",
  "settings": {
    "urls": [
      "https://learn.rtila.com/scenarios/dynamic-content/2"
    ]
  },
  "datasets": {
    "react_items": {
      "item_selector": "css=.react-item",
      "properties": [
        {
          "name": "title",
          "type": "text",
          "selector": "css=.react-item-title"
        },
        {
          "name": "desc",
          "type": "text",
          "selector": "css=.react-item-desc"
        }
      ]
    }
  },
  "commands": [
    {
      "command": "wait_for_load_state",
      "params": {
        "state": "networkidle",
        "timeout": 30000
      }
    },
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=.react-item"
      }
    },
    {
      "command": "extract_data",
      "params": {
        "dataset": "react_items"
      }
    }
  ]
}

wait_for_load_state with networkidle waits for network requests to settle before continuing. This is useful for React apps that fetch data after mounting.

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?