Widget practice · Inline SVG

SVG locators practice

Three inline-SVG widgets — a shape gallery, an interactive bar chart, and a star rating control. Practise SVG-aware locators, ARIA role + accessible name, and data-testid on SVG nodes. SVG circle/rect/path all work with normal CSS selectors.

① Shape gallery

Click any shape to select it. Each node has an id, data-testid, and an aria-label.

id=circle-red · circle-blue · rect-amber · triangle-mint · star-violet data-testid=shape-{name} role=img + aria-label per shape

No shape selected yet.

② Bar chart

Click any bar to highlight it. Each rect is a button-shaped target with role="button" and an aria-label like "Q3 bar — 78".

data-testid=bar-q1 … bar-q5 data-quarter=Q1 … Q5 role=button · aria-label="Q<n> bar — <value>"

No bar selected yet.

③ Star rating

Click a star to set the rating. Each star is a clickable polygon with role="radio" and an aria-label.

Rating: 0 / 5

data-testid=star-1 … star-5 · stars-readout role=radio · aria-label="N stars" group=svg[role=radiogroup]

What students should practise

Click an SVG circle by id and assert it gets the .is-selected class.
Reach a bar by accessible name: getByRole('button', { name: /Q3 bar/ }).
Read data-quarter + data-value after clicking and assert in the output.
Use getByRole('radio', { name: '4 stars' }) to set a rating and confirm the readout.
Iterate every .bar, click each, and verify the output cycles through Q1–Q5.

Playwright solution SVG nodes work with the same selectors as HTML. Show solution

// 1) Shape — click by id, assert selected
await page.locator('#circle-blue').click();
await expect(page.locator('#circle-blue')).toHaveClass(/is-selected/);

// 2) Bar chart — by accessible name
await page.getByRole('button', { name: /Q3 bar/ }).click();
await expect(page.getByTestId('bars-output'))
  .toContainText('Q3');

// or by data-testid
await page.getByTestId('bar-q4').click();

// 3) Stars — getByRole works on SVG too
await page.getByRole('radio', { name: '4 stars' }).click();
await expect(page.getByTestId('stars-readout'))
  .toHaveText('Rating: 4 / 5');

// iterate every bar
for (const bar of await page.locator('.bar').all()) {
  const q = await bar.getAttribute('data-quarter');
  await bar.click();
  console.log(q);
}