Skip to content
Robot Framework Essentials

Locators and interactions

Chapter lab: Browser foundationsch08-web-foundations.zip · 27 KB

This lesson continues in the same lab as the lesson before it. If you don’t have it yet, download it here.

Download ch08-web-foundations.zip

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

Terminal window
curl -fsSLO https://manykarim.github.io/robotframework-essentials-web/labs/ch08-web-foundations.zip && unzip -q ch08-web-foundations.zip && rm ch08-web-foundations.zip

Open the folder in VS Code with code rfe-ch08-web-foundations (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

Install Node.js (an LTS release), then run once — it downloads a browser engine (large):

Terminal window
uv run rfbrowser init chromium
Terminal window
rfbrowser init chromium
Terminal window
poetry run rfbrowser init chromium

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
What's inside
  • Directoryrfe-ch08-web-foundations/
    • Directory.vscode/
      • extensions.json
    • Directorychecks/
      • smoke.robot
    • Directorydemo_app/
      • api.py
      • serve.py
      • store.py
      • web.py
    • Directoryresources/
      • shop.resource
    • .gitignore
    • .python-version
    • LAB.md
    • pyproject.toml
    • README.md
    • requirements.txt
    • uv.lock

To drive a page you need to find elements and act on them. The Browser library finds elements with selectors; the most reliable is a test id — data-testid=login-submit. Test ids are added for automation and survive restyles, where CSS classes and layout do not.

Acting is two keywords for now: Fill Text types into a field, and Click presses a button or link.

headless=True on New Browser runs the engine without opening a visible window — the norm for automation and CI. Drop it to watch the run in a real browser while you debug.

Task 1 — Sign in using data-testid locators

Section titled “Task 1 — Sign in using data-testid locators”
Edit

Goal: create checks/login.robot that signs primary_user into the shop using test-id locators, and confirms the catalog appears.

Here is the same sign-in as a different user. Adapt it to primary_user.

Worked example — adapt it, don’t copy it

*** Settings ***
Library     Browser
Resource    ../resources/shop.resource


*** Test Cases ***
Reviewer Signs In
    New Browser    chromium    headless=True
    New Context
    New Page    ${BASE_URL}/login
    Fill Text    data-testid=login-username    reviewer_user
    Fill Text    data-testid=login-password    learning-password
    Click    data-testid=login-submit
    Get Text    data-testid=catalog-title    contains    Catalog
    Close Browser

Done when

the suite uses Fill Text and Click on test-id locators.

Hint 1

Fill both fields by their test ids: Fill Text data-testid=login-username primary_user and Fill Text data-testid=login-password learning-password.

Hint 2

Click data-testid=login-submit to submit, then confirm you landed with Get Text data-testid=catalog-title contains Catalog.

Solution
*** Settings ***
Library     Browser
Resource    ../resources/shop.resource


*** Test Cases ***
Primary User Signs In
    New Browser    chromium    headless=True
    New Context
    New Page    ${BASE_URL}/login
    Fill Text    data-testid=login-username    primary_user
    Fill Text    data-testid=login-password    learning-password
    Click    data-testid=login-submit
    Get Text    data-testid=catalog-title    contains    Catalog
    Close Browser

Task 2 — Run it green against the shop

Section titled “Task 2 — Run it green against the shop”
Run

With the shop running, run:

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

Done when

the test Primary User Signs In passes.

Check your understanding

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

  1. Why prefer data-testid= locators over CSS classes?

    Show the answer

    Answer: They are stable across restyles — classes and layout change, test ids do not — Test ids are added for testing and survive redesigns; styling selectors break when the UI is restyled.

  2. Which keyword types into a field?

    Show the answer

    Answer: Fill Text — Fill Text <locator> <value> fills an input; Click presses buttons and links.

Key terms

data-testid locatorconcept
Stable Browser-library selector: data-testid=login-submit.
Fill Text / Clickkeyword
Type into a field / press a button or link.

All terms in the glossary →