Skip to main content

api-interception Scenario 4 — Capture GraphQL Product Data

Written by RTILA X Engineering Team

Intermediate ~6 min
Prerequisites: api-interception/1 api-interception/2

What You'll Learn

Execute scripts to read in-memory data

Real-World Use Case

Accessing data that is not in the DOM

LIVE DEMO

GraphQL Products

Run a GraphQL query and wait for the /graphql response.
EXPECTED OUTPUT

GraphQL Product Data

id name price
1 Wireless Mouse 24.99
2 Mechanical Keyboard 89.99
3 USB-C Hub 39.99
4 4K Monitor 329.99
RTILA X PROJECT JSON

RTILA X Automation Project

capture-graphql-products.json 
    {
  "name": "Capture_GraphQL_Products",
  "settings": {
    "urls": [
      "https://learn.rtila.com/scenarios/api-interception/4"
    ],
    "headless": false,
    "navigation_timeout": 30000,
    "max_concurrent_workers": 1,
    "humanoidEnabled": true,
    "humanoidSensitivity": "medium"
  },
  "datasets": {
    "graphql_products": {
      "item_selector": "css=.graphql-data tbody tr",
      "properties": [
        {
          "name": "id",
          "type": "text",
          "selector": "css=td:nth-child(1)"
        },
        {
          "name": "name",
          "type": "text",
          "selector": "css=td:nth-child(2)"
        },
        {
          "name": "price",
          "type": "text",
          "selector": "css=td:nth-child(3)"
        }
      ]
    }
  },
  "commands": [
    {
      "command": "goto",
      "params": {
        "url": "https://learn.rtila.com/scenarios/api-interception/4"
      }
    },
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=#graphql-query-btn"
      }
    },
    {
      "command": "click",
      "params": {
        "selector": "css=#graphql-query-btn"
      }
    },
    {
      "command": "wait_for_api_response",
      "params": {
        "url_pattern": "/graphql"
      }
    },
    {
      "command": "wait_for_selector",
      "params": {
        "selector": "css=.graphql-data"
      }
    },
    {
      "command": "extract_data",
      "params": {
        "dataset": "graphql_products"
      }
    }
  ]
}

GraphQL endpoints often return data in a single POST request. The wait_for_api_response command listens for the /graphql call, after which the table is parsed and extracted.

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?