A page is a tree.
Every page your experts open is a DOM: a tree of elements. Graphdom records it at every action, inside closed shadow roots and cross-origin frames too.
A session is a path.
A recording is a walk through those trees: what was typed, what was chosen, what was clicked, and which request answered. Session 07 has 418 events, and the duties on screen are traced back to the request that carried them.
Many paths make a graph.
Thirty-eight sessions by five experts don’t all go the same way. Where they part is where the inputs, branches and loops are: five attached a certificate of origin, three went back to fix the address.
The graph is the program.
Graphdom keeps the graph as a spider: a JSON program you can read, diff and review. It runs on Graphdom’s runtime, or compiles to a Playwright script.
{ "id": "address", "do": "choose", "effect": "read", "target": "address", "query": { "input": "address" }, "cadenceMs": 90, "option": "suggestions", "commit": "click", "match": { "rule": "address-eu" }}
// compiled from spider v6, step "address"const field = page.getByRole('combobox', { name: 'Consignee address' });await field.pressSequentially(input.address, { delay: 90 });const pick = matchAddressEu(input.address);await page.getByRole('option', { name: pick }).click();await expect(field).toHaveValue(pick);
One node of seven: “choose Address”. Hover or focus here to find it in the graph.