Loading challenge...
Split Text & Pseudo-Content
Extract a price whose currency symbol is CSS ::before content and digits are split across per-character spans
What you will learn
- Distinguish DOM text, rendered text, and accessible name when CSS pseudo-elements inject visible content
- Reassemble a value fragmented across per-character spans and separate decimal nodes
- Read ::before content via getComputedStyle or fall back to a stable data attribute / accessible name
Split Text & Pseudo-Content
The visible price and the status label are assembled from CSS pseudo-elements and per-character spans — what you see is not what the DOM says
The price reads $1,299.00 on screen, but the $ is a CSS ::before pseudo-element (not a text node), the integer part is a chain of per-character <span>s, and the decimals are a separate node.
The status pill looks like it says ACTIVE, yet its textContent is empty — the label is entirely ::before content.
The Rendered Value
Extract the numeric price even though the DOM text is fragmented
1,299.00
Normalized numeric value the test should extract:
1299.00
Testing Tips
Automation hints
- ✓ The DOM string ≠ the rendered string ≠ the accessible name. Querying
getByText("$1,299.00")fails because the$is::beforecontent, never a text node. - ✓ Read the fragmented digits from the spans inside
#price-integer— e.g.textContentof#priceyields1,299.00(without the$); then strip the comma to normalize. - ✓ The decimals live in a separate node
#price-decimals; combine them with the integer spans rather than assuming one continuous string. - ✓
#status-pillshowsACTIVEvisually, but itstextContentis empty — assert on the accessible name (aria-label) or readgetComputedStyle(el, "::before").content, notinnerText. - ✓ The clean, machine-readable value is exposed on
#price-readout[data-value]— prefer a stable data attribute over scraping pseudo-content when one is provided.
