API and web, combined
Chapter lab: API in practice
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:
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.zipInvoke-WebRequest https://manykarim.github.io/robotframework-essentials-web/labs/ch12-api-in-practice.zip -OutFile ch12-api-in-practice.zip; Expand-Archive ch12-api-in-practice.zip -DestinationPath .; Remove-Item ch12-api-in-practice.zipOpen 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:
uv syncpython3 -m venv .venvsource .venv/bin/activatepip install -r requirements.txtpython -m venv .venv.venv\Scripts\Activate.ps1pip install -r requirements.txtKeep the environment active in every terminal where you run lesson commands.
poetry install --no-rootPython 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:
uv run python demo_app/serve.pypython demo_app/serve.pypoetry run python demo_app/serve.pyOpen 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”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 RequestsLibraryResource ../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} completeDone 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 RequestsLibraryResource ../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} completeTask 2 — Run it green
Section titled “Task 2 — Run it green”Run:
uv run robot checksrobot checkspoetry run robot checksDone 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.
Preparing state through the API before checking the UI…
API setup is fast and deterministic; reserve the slow UI path for verifying what the user actually sees.
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.
The shop's web and API share…
Both run in one process over one store, so an order created via the API appears on the web order page.
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).