Half our product is a workflow builder: a canvas with about 190 block types, edges between them, and connection handles on each node. None of it is text or roles — the nodes carry data-nodeid and the handles are .react-flow__handle[data-handleid].
Nothing in the step library moves anything, so the most I can express is clicking. Has anyone got a shape for this that is not "one custom step per interaction"?
Accepted answer
There are no canvas, drag or graph steps, and there is an open issue proposing a set of them — drag onto, connect handle to handle, select node, assert node and edge counts. Not written.
What you get for free today is more than it looks like, because on most builders adding a block is a click rather than a drag:
When I click the element with test id "toolbar-block-http-request"If your palette has test ids, that covers create. What genuinely needs project steps is edges and handles, and that is where I would spend the effort:
@When('I connect {string} to {string}')
async connect(from: string, to: string) {
const source = this.page.locator(`[data-nodeid="${from}"] .react-flow__handle[data-handleid="source"]`);
const target = this.page.locator(`[data-nodeid="${to}"] .react-flow__handle[data-handleid="target"]`);
await source.dragTo(target);
}Two more things worth knowing. Ask for a test id on the node wrapper rather than relying on data-nodeid alone if the id is generated per run — otherwise your scenarios need the id threaded through from wherever the node was created. And keep assertions on the model where you can (node count, an edge exists between two named nodes) rather than on pixels; a canvas is the one surface where a visual baseline will punish you for a two-pixel layout change forever.
We landed on about nine project steps for the whole builder and it has been stable. The one I would add to Tomas's list is a settle assertion — after a connect, wait for the edge to exist in the DOM before the next step, or you get a lovely class of failures where the drag succeeded and the next click happened mid-animation.
Have a different question? Ask it.