Every element the library renders carries a data-layout-path attribute describing its position in the layout tree — a stable selector for end-to-end tests (FlexLayout's own Playwright suite is built on it; see tests-playwright/helpers.ts for ready-made helper functions):
| Path | Element |
|---|---|
/r<n> / /ts<n> |
Row / tabset (n is the index within the parent), nested as in the model, e.g. /r1/ts0 |
/border/<location> |
Border strip (top, bottom, left, right) |
.../tb<n> |
Tab button n, in the same tree location as its panel (e.g. panel /ts0/t0 ↔ button /ts0/tb0, and inside a group /ts0/g0/t0 ↔ /ts0/g0/tb0); n is the tab's index within its parent |
.../g<n> |
Group pill n (e.g. /ts0/g0, /border/right/g0) |
.../g<n>/end |
Group end marker (right cap of a split pill, e.g. /ts0/g0/end) |
.../t<n> |
Tab panel n within a tabset or border path |
.../tabstrip |
A tabset's tab strip |
.../s<n> |
Splitter after child n of a row (e.g. /s0), or a border's splitter |
.../button/<name> |
Toolbar buttons: max, overflow, close, popout, float, pin |
.../textbox |
The inline rename textbox |
/popup-menu |
The overflow/popup menu |
// playwright example: select the second tab of the first tabset, check a border panel opened
await page.locator('[data-layout-path="/ts0/tb1"]').click();
await expect(page.locator('[data-layout-path="/border/left/t0"]')).toBeVisible();Note the paths describe the current structure, so indices shift when tabs and tabsets move — target stable states, or use node ids via the model for highly dynamic layouts.