>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3540965. --> Reported by: [jessebaker](https://www.drupal.org/user/3546546) Related to !164 !1436 >>> <h3 id="overview">Overview</h3> <p>It's hard to write tests for drag and drop because the drop zones don't have stable classNames nor any kind of label to select them by.</p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>On dropzones add attributes describing the position of items dropped into them</p> <p>Components now have <code>data-testid="canvas-component-drop-zone-[position]-[component-name]"</code> where <code>[position]</code> is before or after and <code>[component-name]</code> is the components name in kebab case.</p> <p>Empty regions now have <code>data-testid="canvas-empty-region-drop-zone-[region-name]"</code>.</p> <p>Empty slots have <code>data-testid="canvas-empty-slot-drop-zone-[component-name]:[slot-name]"</code></p> <p>And the start/end of each region (if it's the focused region) will have <code>data-testid="canvas-region-drop-zone-[position]-[region-name]"</code>. Where <code>[position]</code> is either start or end.</p> <h3 id="ui-changes">User interface changes</h3>