← All questions

How do you test a node-graph editor — blocks, edges and connection handles?

2 answers

• 19votes✓

  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:

  gherkinCopy

  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:

  tsCopy

  @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.

  TBanswered by Tomas Brekkemaintainer33,915 · 23 Jul 2026
• 9votes

  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.

  ISanswered by Ingrid Solberg241 · 27 Jul 2026