Spec: testingexamples fixture contract
Summary
This suite uses Selenium and Mocha, in JavaScript, to check the fixture section of the home page of https://testingexamples.github.io, a deliberately stable page for practising browser automation. It is the worked example for Modules 10 and 11 of the training programme: it locates elements by id, name, class name, link text, CSS, and XPath, acts on every form input, waits explicitly for every element, and makes real assertions about each with node:assert/strict.
Scope
This spec covers tests/ui/fixtures.test.js and its page object tests/ui/pages/fixture-page.js only: the 11 tests they run, the exact selectors and strings they check, and the criteria for the suite to pass.
Out of scope: the rest of the site (header, navigation, footer, articles, and other locales), which can change freely without affecting the fixture contract.
Principles and rules
tests/ui/fixtures.test.jsis the implementation. This file is the specification. They must agree exactly. If they ever disagree, that is a defect in one of them: fix it before doing anything else.- Every selector comes from the fixture contract in
testingexamples.github.io/spec/index.md. If the contract changes, change the page object, then this spec. - Every test makes real assertions with
node:assert/strict. Selenium does not wait by itself, so the page object waits explicitly for every element withdriver.wait(until.elementLocated(...)), and clicks only once the element is in view and on top. No fixed sleeps. - The browser is quit in an
afterhook, whatever happens. - The site is a public fixture built for this purpose, so running this suite in CI is acceptable. Do not run it in a tight loop.
Detail
Every test starts by opening https://testingexamples.github.io/ and waiting for #form-1.
Id examples have the expected text
- Assert
#id-example-1,#id-example-2, and#id-example-3have text exactlyId Example 1,Id Example 2, andId Example 3.
- Assert
Name examples have the expected text
- Assert
[name="name-example-1"]to-3have text exactlyName Example 1toName Example 3.
- Assert
Class examples have the expected text
- Assert
.class-example-1to-3have text exactlyClass Example 1toClass Example 3.
- Assert
Link examples point to the expected hrefs
- Locate each link by link text
Link Example 1toLink Example 3. - Assert each
hrefattribute, as written in the HTML (getDomAttribute), is exactlyhttps://1.example.com,https://2.example.com, andhttps://3.example.com.
- Locate each link by link text
Ordered list has alfa, bravo, charlie in order
- Assert the
liitems of#ol-example-1have texts exactlyalfa,bravo,charlie, in that order.
- Assert the
Unordered list has alfa, bravo, charlie
- Assert
#ul-example-1has exactly 3liitems, with textsalfa,bravo,charlie.
- Assert
Text input starts with its default value and can be filled
- Given the input
#text-example-1-idhas valueText Example 1 Value - When it is cleared and
hellois typed - Then its value is
hello.
- Given the input
Checkbox starts unchecked and can be checked
- Given the checkbox
#checkbox-example-1-idis not selected - When it is clicked
- Then it is selected.
- Given the checkbox
Radio buttons are mutually exclusive
- When
#radio-example-1-option-1-idis clicked, then it is selected. - When
#radio-example-1-option-2-idis then clicked, then option 2 is selected and option 1 is not.
- When
Select has alfa first and can select charlie
- Using Selenium's
Selecthelper, assert the options of#select-example-1-idhave texts exactlyalfa,bravo,charlie. - Assert the first selected option's value is
a. - When the option with visible text
charlieis selected, then the selected option's value isc.
- Using Selenium's
Submit button is found by XPath
- Assert XPath
//input[@type="submit"]finds an element with valueSubmit.
- Assert XPath
Acceptance criteria
- All 11 tests pass against the live https://testingexamples.github.io site, in Chrome.
- The suite runs in the CI
uijob on every pull request. - Verified on 2026-10-07: 11 passed, headless, in about 4 seconds, three runs in a row.
Related topics
- ../../README.md
- ../index.md: the template this spec follows.
Sources
- https://testingexamples.github.io
- The fixture contract:
testingexamples.github.io/spec/index.md, in https://github.com/testingexamples/testingexamples.github.io - https://www.selenium.dev/documentation/webdriver/waits/
- https://mochajs.org/
View this document on GitHub practice-repo/spec/example/index.md