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 ::before content, never a text node.
✓ Read the fragmented digits from the spans inside #price-integer — e.g. textContent of #price yields 1,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-pill shows ACTIVE visually, but its textContent is empty — assert on the accessible name (aria-label) or read getComputedStyle(el, "::before").content, not innerText.
✓ 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.

Related Challenges

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 status pill looks like it says ACTIVE, yet its textContent is empty — the label is entirely ::before content.

Testing Tips

Automation hints

✓ The DOM string ≠ the rendered string ≠ the accessible name. Querying getByText("$1,299.00") fails because the $ is ::before content, never a text node.
✓ Read the fragmented digits from the spans inside #price-integer — e.g. textContent of #price yields 1,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-pill shows ACTIVE visually, but its textContent is empty — assert on the accessible name (aria-label) or read getComputedStyle(el, "::before").content, not innerText.
✓ 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.

Split Text & Pseudo-Content

What you will learn

Split Text & Pseudo-Content

The Rendered Value

Testing Tips

Timer

Need Help?

Related Challenges

Hovers

Sortable Tables

Tabs

Split Text & Pseudo-Content

What you will learn

Split Text & Pseudo-Content

The Rendered Value

Testing Tips

Timer

Need Help?

Related Challenges

Hovers

Sortable Tables

Tabs