api-interception Scenario 3 — Intercept Fetch Requests and Filter JSON
Written by RTILA X Engineering Team
Intermediate ~6 min
Prerequisites: api-interception/1 api-interception/2
What You'll Learn
Combine API interception with page scraping
Real-World Use Case
Building hybrid data pipelines
LIVE DEMO
Fetch Interception
Click a button that fetches /api/status and renders a table.
EXPECTED OUTPUT
Status Checks
| name | status | latency |
|---|---|---|
| Home page | ok | 84 |
| Products API | ok | 122 |
| Database | degraded | 560 |
RTILA X PROJECT JSON
RTILA X Automation Project
intercept-fetch-status.json
{
"name": "Intercept_Fetch_Status",
"settings": {
"urls": [
"https://learn.rtila.com/scenarios/api-interception/3"
]
},
"datasets": {
"status_checks": {
"item_selector": "css=.fetch-data-table tbody tr",
"properties": [
{
"name": "service",
"type": "text",
"selector": "css=td:nth-child(1)"
},
{
"name": "status",
"type": "text",
"selector": "css=td:nth-child(2)"
},
{
"name": "last_checked",
"type": "text",
"selector": "css=td:nth-child(3)"
}
]
}
},
"commands": [
{
"command": "wait_for_selector",
"params": {
"selector": "css=#fetch-btn"
}
},
{
"command": "click",
"params": {
"selector": "css=#fetch-btn"
}
},
{
"command": "wait_for_api_response",
"params": {
"url_pattern": "/api/status"
}
},
{
"command": "wait_for_selector",
"params": {
"selector": "css=.fetch-data-table"
}
},
{
"command": "extract_data",
"params": {
"dataset": "status_checks"
}
}
]
}
Fetch requests can be intercepted just like XHR. After clicking the load button, the automation waits for the /api/status response and then extracts the rendered table.
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.
This scenario covers 2 RTILA X commands and is referenced in 2 learning articles.
Continue Learning
Was this helpful?
Thank you for your feedback!