Accordions

Expand a section, verify only one section is open at a time, and confirm the icon rotates.

Beginner

Scenario

FAQs, settings groups, ticket histories — accordions hide content inside until needed. Common bugs: multiple open at once, aria-expanded never flipping, content invisible to screen readers when collapsed.

Single-open accordion — opening one section closes the others.

Display name, email, password reset cadence. Single source for all session-bound personal data.

Live widget · interact freely

Manual test checklist

1Click section A — it opens, others close
2Click section A again — it closes
3Tab through the headers — focus is visible and ordered top-to-bottom
4Press Enter/Space on a focused header — toggles the section
5Confirm `aria-expanded` flips between true/false on each toggle

Expected result

Clicking 'Privacy' opens its panel and closes 'Account'. The chevron rotates 180°. `aria-expanded` toggles.

Automation challenge

Click `acc-privacy`, assert its panel is visible AND the previously-open `acc-account` panel is hidden. Then assert `aria-expanded='true'` on the active header and `'false'` on the others.

Stable selectors

Account header[data-testid="acc-account"]
Privacy header[data-testid="acc-privacy"]
Privacy panel[data-testid="acc-privacy-panel"]
Active panel[data-testid="acc-panel-active"]

Locator strategy

Three levels from simple IDs to scoped Playwright locators. IDs and names are easy to learn but are not always the best long-term choice when labels change or components repeat.

Use simple IDs and names to understand how locating elements works.

1
2
3

await page.goto('https://lab.hakdogan.com/practice/accordions');

await page.locator('#acc-privacy').click();

Avoid as primary strategies

XPath (unless there is no alternative), long CSS chains, Tailwind-style utility class selectors, generated or unstable IDs, and volatile framework internals break when layout, styling, or DOM structure shifts.

1
2

await page.locator('.w-full.rounded-xl.border.bg-blue-500').fill('demo@example.com');
await page.locator('//div[2]/form/div[1]/input').fill('demo@example.com');

Reference Playwright spec

accordions.spec.ts

import { test, expect } from '@playwright/test';

test('accordion enforces single-open', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/accordions');

  await page.getByTestId('acc-privacy').click();
  await expect(page.getByTestId('acc-privacy-panel')).toBeVisible();
  await expect(page.getByTestId('acc-privacy')).toHaveAttribute(
    'aria-expanded',
    'true',
  );
});

Headed Test Playback

Simulated headed-browser flow — no real browser is launched.

Automation-style playback (Playwright-shaped logs). No real browser; no commands run on your machine.

Idleaccordions.spec.ts

Failure demos

https://lab.hakdogan.com/practice/accordions

playwright · headed · chromium0.00s

# awaiting Run Test · terminal scrolls automatically

Steps

Interacting with accordions widget
Awaiting deterministic render
Asserting expected state
Cleaning up context
Pass