Interactive SVG Map

Click region paths on an inline SVG map located by their title accessible name, not visible text

What you will learn

Resolve SVG sub-elements by their <title> accessible name rather than text content
Recognize that <use href="#sym"> renders no queryable markup of its own
Click the path element directly instead of relying on transformed pixel coordinates

Interactive SVG Map

Click a region path to select it — each region's accessible name comes from a child <title>, and a <g transform> offsets the geometry so pixel clicks land in the wrong place

The map is a single inline <svg> with four <path> regions wrapped in a translated <g transform>. Each path carries a child <title> (its accessible name) and a data-region attribute.

The compass marker in the centre is drawn via <use href="#icon-sym">, so the visible icon has no markup of its own to query.

Select a Region

Click any province on the map

Selected region: None

Testing Tips

Automation hints

✓ The accessible name lives in each region's <title> — resolve a path with page.getByTitle("Northern Province") or by ARIA name, not by visible text (there is none)
✓ The centre compass is a <use href="#icon-sym"> instance — it has no shapes of its own to query; only the <symbol id="icon-sym"> in <defs> holds the geometry
✓ A parent <g transform> offsets the geometry, so a coordinate-based click can miss — click the <path> element itself, e.g. [data-region='north']
✓ Assert selection via #selected-region(its text is the capitalized name) and the active path's aria-pressed="true"

Related Challenges

Interactive SVG Map

Click region paths on an inline SVG map located by their title accessible name, not visible text

What you will learn

Resolve SVG sub-elements by their <title> accessible name rather than text content
Recognize that <use href="#sym"> renders no queryable markup of its own
Click the path element directly instead of relying on transformed pixel coordinates

Interactive SVG Map

Click a region path to select it — each region's accessible name comes from a child <title>, and a <g transform> offsets the geometry so pixel clicks land in the wrong place

The map is a single inline <svg> with four <path> regions wrapped in a translated <g transform>. Each path carries a child <title> (its accessible name) and a data-region attribute.

The compass marker in the centre is drawn via <use href="#icon-sym">, so the visible icon has no markup of its own to query.

Select a Region

Click any province on the map

Selected region: None

Testing Tips

Automation hints

✓ The accessible name lives in each region's <title> — resolve a path with page.getByTitle("Northern Province") or by ARIA name, not by visible text (there is none)
✓ The centre compass is a <use href="#icon-sym"> instance — it has no shapes of its own to query; only the <symbol id="icon-sym"> in <defs> holds the geometry
✓ A parent <g transform> offsets the geometry, so a coordinate-based click can miss — click the <path> element itself, e.g. [data-region='north']
✓ Assert selection via #selected-region(its text is the capitalized name) and the active path's aria-pressed="true"

Related Challenges

iFrames

Hard

Shadow DOM

Hard

Drag & Drop

Hard

Interactive SVG Map

What you will learn

Interactive SVG Map

Select a Region

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop

Interactive SVG Map

What you will learn

Interactive SVG Map

Select a Region

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop