api-interception Scenario 1 — Intercept XHR and Extract JSON Directly

Written by RTILA X Engineering Team

Beginner ~4 min

What You'll Learn

Intercept XHR requests and read responses

Real-World Use Case

Extracting data from internal APIs

LIVE DEMO

XHR Response

SPA that loads product cards by intercepting an XHR response.

Fetching data from /api/products...

EXPECTED OUTPUT

Products Retrieved from /api/products

name	price	category	inStock
Wireless Noise-Cancelling Headphones	249.99	Electronics	true
4K Ultra HD Monitor	399.99	Electronics	true
Mechanical Gaming Keyboard	129.99	Electronics	true
Portable SSD 1TB	99.99	Electronics	true
Classic Cotton T-Shirt	19.99	Clothing	true
Slim Fit Jeans	69.99	Clothing	true
Waterproof Rain Jacket	119.99	Clothing	true
JavaScript: The Good Parts	16.95	Books	true
Design Patterns Explained	28.99	Books	true
Robot Vacuum Cleaner	299.99	Home & Garden	true
Yoga Mat Premium	39.99	Sports	true
Building Blocks Set	49.99	Toys	true

RTILA X PROJECT JSON

RTILA X Automation Project

intercept-xhr-products.json

    {
  "name": "Intercept_XHR_Products",
  "settings": {
    "urls": [
      "https://learn.rtila.com/scenarios/api-interception/1"
    ],
    "headless": false,
    "navigation_timeout": 30000,
    "max_concurrent_workers": 1,
    "humanoidEnabled": true,
    "humanoidSensitivity": "medium"
  },
  "datasets": {
    "api_products": {
      "item_selector": "css=.api-product",
      "properties": [
        {
          "name": "name",
          "type": "text",
          "selector": "css=.api-product-name"
        },
        {
          "name": "price",
          "type": "text",
          "selector": "css=.api-product-price"
        }
      ]
    }
  },
  "commands": [
    {
      "command": "goto",
      "params": {
        "url": "https://learn.rtila.com/scenarios/api-interception/1"
      }
    },
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=#spa-app"
      }
    },
    {
      "command": "wait_for_api_response",
      "params": {
        "url_pattern": "/api/products"
      }
    },
    {
      "command": "run_script",
      "params": {
        "script": "export default async function(page, context, state, helpers) {\n  return JSON.parse(document.querySelector(\"#api-data\").textContent);\n}"
      }
    },
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=.api-product"
      }
    },
    {
      "command": "extract_data",
      "params": {
        "dataset": "api_products"
      }
    }
  ]
}

The wait_for_api_response command pauses execution until the XHR response for /api/products is captured. The JSON is also embedded in a hidden script tag, allowing direct extraction without DOM parsing.

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?