Skip to content

API and web, combined

Chapter lab: API in practicech12-api-in-practice.zip · 17 KB

This chapter works in a prepared project. Download it before the first task; it unpacks into its own folder.

Download ch12-api-in-practice.zip

Or fetch and unpack it from a terminal in VS Code:

Terminal window
curl -fsSLO https://manykarim.github.io/robotframework-essentials-web/labs/ch12-api-in-practice.zip && unzip -q ch12-api-in-practice.zip && rm ch12-api-in-practice.zip

Open the folder in VS Code with code rfe-ch12-api-in-practice (or File → Open Folder…) and accept the recommended RobotCode and Python extensions. Then set it up:

Terminal window
uv sync
Terminal window
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

Keep the environment active in every terminal where you run lesson commands.

Terminal window
poetry install --no-root

Python 3.13 or newer is required; uv installs it when it is missing.

Also needed for this lab

Start the RF Demo Shop in its own terminal and keep it running while you work:

Terminal window
uv run python demo_app/serve.py
Terminal window
python demo_app/serve.py
Terminal window
poetry run python demo_app/serve.py

Open in browserNo setup? Try the lab right here: its files, an editor and a terminal, running in your browser.

What's inside
  • Directoryrfe-ch12-api-in-practice/
    • Directory.vscode/
      • extensions.json
    • Directorychecks/
      • smoke.robot
    • Directorydemo_app/
      • api.py
      • serve.py
      • store.py
      • web.py
    • Directoryresources/
      • api.resource
    • .gitignore
    • .python-version
    • LAB.md
    • pyproject.toml
    • README.md
    • requirements.txt
    • uv.lock

The fastest way to set up state is often the API; the truest way to verify what a customer sees is the web page. Combine them: create through the API, then verify on the web. The shop’s web and API share one store, so an order placed through the API appears on its web order page.

Task 1 — Create an order via the API and verify it on the web

Section titled “Task 1 — Create an order via the API and verify it on the web”
Edit

Goal: create checks/combined.robot that POSTs an order, takes the returned order id, GETs that order’s web page, and asserts it shows as complete.

Here is the same create-then-verify flow over a different order. Adapt it.

Worked example — adapt it, don’t copy it

*** Settings ***
Library RequestsLibrary
Resource ../resources/api.resource
*** Test Cases ***
Backpack Order Appears Online
${body}= Create Dictionary product=trail-backpack quantity=2
${resp}= POST ${API_URL}/api/orders json=${body}
Status Should Be 201 ${resp}
${id}= Set Variable ${resp.json()}[id]
${page}= GET ${WEB_URL}/order/${id}
Should Contain ${page.text} complete

Done when

the order created via the API is visible on its web page.

Hint 1

POST the order first, then capture its id from the response with ${id}= Set Variable ${resp.json()}[id].

Hint 2

Use that id to build the web URL: GET ${WEB_URL}/order/${id}, then Should Contain ${page.text} complete.

Solution
*** Settings ***
Library RequestsLibrary
Resource ../resources/api.resource
*** Test Cases ***
Order Created By Api Shows On The Web
${body}= Create Dictionary product=travel-mug quantity=1
${resp}= POST ${API_URL}/api/orders json=${body}
Status Should Be 201 ${resp}
${id}= Set Variable ${resp.json()}[id]
${page}= GET ${WEB_URL}/order/${id}
Should Contain ${page.text} complete
Run

Run:

Terminal window
uv run robot checks
Terminal window
robot checks
Terminal window
poetry run robot checks

Done when

the combined test passes end to end.

Check your understanding

Quick recall. Your first answer stays in this browser; the quiz never blocks your progress.

  1. Preparing state through the API before checking the UI…

    Show the answer

    Answer: is faster and more reliable than clicking through setup — API setup is fast and deterministic; reserve the slow UI path for verifying what the user actually sees.

  2. The shop's web and API share…

    Show the answer

    Answer: the same in-memory store — Both run in one process over one store, so an order created via the API appears on the web order page.

Key terms

API-driven setupconcept
Prepare state via the API (fast), verify via the UI/web (what the user sees).

All terms in the glossary →