the solution without all the debug stuff

Closes #3492734

ui/tests/e2e/empty-canvas.cy.js

 describe('Empty canvas', () => {
-  before(() => {
-    cy.drupalXbInstall();
-  });
-
   beforeEach(() => {
+    // Unlike most tests, we are installing drupal before each it() as that has
+    // demonstrated to be the only reliable way to get tests after the first
+    // passing consistently. This occurs regardless of which test runs first.
+    cy.drupalXbInstall();
     cy.drupalLogin('xbUser', 'xbUser');
   });
 
-  after(() => {
+  afterEach(() => {
     cy.drupalUninstall();
   });
 
@@ -15,54 +15,104 @@ describe('Empty canvas', () => {
   //   matching the /xb/{entity_type}/{entity_id} pattern and relies only on
   //   what exists in `drupalSettings.xb` instead.
   //   Fix after https://www.drupal.org/project/experience_builder/issues/3489775
-  const testCases = ['xb/node/2', 'xb/xb_page/2'];
+  it(`xb/node/2 can add a component to an empty canvas`, () => {
+    cy.loadURLandWaitForXBLoaded({ url: 'xb/node/2' });
 
-  testCases.forEach((testCase) => {
-    it(`${testCase} can add a component to an empty canvas`, () => {
-      cy.loadURLandWaitForXBLoaded({ url: testCase });
+    // Wait for an element in the page data panel to be present.
+    cy.get('#edit-title-0-value').should('exist');
 
-      // Confirm there is nothing in the canvas.
-      cy.get('.xb--viewport-overlay [data-xb-component-id]').should(
-        'not.exist',
-      );
+    // Confirm there is nothing in the canvas.
+    cy.get('.xb--viewport-overlay [data-xb-component-id]').should('not.exist');
+
+    // For good measure, also confirm the content of the hero component is not
+    // in the canvas.
+    cy.waitForElementContentNotInIframe('div', 'There goes my hero');
+
+    cy.get('[data-xb-component-id="sdc.experience_builder.my-hero"]').should(
+      'not.exist',
+    );
+    cy.openLibraryPanel();
 
-      // For good measure, also confirm the content of the hero component is not
-      // in the canvas.
-      cy.waitForElementContentNotInIframe('div', 'There goes my hero');
+    // This is the component to be dragged in.
+    cy.get('[data-xb-component-id="sdc.experience_builder.my-hero"]').should(
+      'exist',
+    );
 
-      cy.get('[data-xb-component-id="sdc.experience_builder.my-hero"]').should(
-        'not.exist',
+    cy.waitForElementInIframe('.xb--sortable-slot-empty-placeholder');
+
+    cy.getIframeBody().then(($iframe) => {
+      cy.get($iframe.find('.xb--sortable-slot-empty-placeholder')).then(
+        ($destination) => {
+          cy.get(
+            '[data-xb-component-id="sdc.experience_builder.my-hero"]',
+          ).realDnd($destination);
+        },
       );
-      cy.openLibraryPanel();
+    });
+
+    cy.log('The hero component is now in the iframe');
 
-      // This is the component to be dragged in.
-      cy.get('[data-xb-component-id="sdc.experience_builder.my-hero"]').should(
-        'exist',
+    // The two overlays now have one component.
+    cy.get('.xb--viewport-overlay [data-xb-component-id]').should(
+      'have.length',
+      2,
+    );
+    cy.waitForElementContentInIframe('div', 'There goes my hero');
+    cy.getIframeBody().within(() => {
+      cy.get('[data-xb-component-id="experience_builder:my-hero"]').should(
+        'have.length',
+        1,
       );
+    });
+  });
+
+  it(`xb/xb_page/2 can add a component to an empty canvas`, () => {
+    cy.loadURLandWaitForXBLoaded({ url: 'xb/xb_page/2' });
+
+    // Wait for an element in the page data panel to be present.
+    cy.get('#edit-title-0-value').should('exist');
+
+    // Confirm there is nothing in the canvas.
+    cy.get('.xb--viewport-overlay [data-xb-component-id]').should('not.exist');
+
+    // For good measure, also confirm the content of the hero component is not
+    // in the canvas.
+    cy.waitForElementContentNotInIframe('div', 'There goes my hero');
+
+    cy.get('[data-xb-component-id="sdc.experience_builder.my-hero"]').should(
+      'not.exist',
+    );
+    cy.openLibraryPanel();
 
-      // Get the layout destination so the Hero component can be dragged to it.
-      cy.get('.xb--viewport-overlay > div')
-        .first()
-        .then(($destination) => {
+    // This is the component to be dragged in.
+    cy.get('[data-xb-component-id="sdc.experience_builder.my-hero"]').should(
+      'exist',
+    );
+
+    cy.waitForElementInIframe('.xb--sortable-slot-empty-placeholder');
+
+    cy.getIframeBody().then(($iframe) => {
+      cy.get($iframe.find('.xb--sortable-slot-empty-placeholder')).then(
+        ($destination) => {
           cy.get(
             '[data-xb-component-id="sdc.experience_builder.my-hero"]',
           ).realDnd($destination);
-        });
-      // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(10000);
-      cy.log('The hero component is now in the iframe');
-      cy.getIframeBody().within(() => {
-        cy.get('[data-xb-component-id="experience_builder:my-hero"]').should(
-          'have.length',
-          1,
-        );
-      });
-      cy.waitForElementContentInIframe('div', 'There goes my hero');
-
-      // The two overlays now have one component.
-      cy.get('.xb--viewport-overlay [data-xb-component-id]').should(
+        },
+      );
+    });
+
+    cy.log('The hero component is now in the iframe');
+
+    // The two overlays now have one component.
+    cy.get('.xb--viewport-overlay [data-xb-component-id]').should(
+      'have.length',
+      2,
+    );
+    cy.waitForElementContentInIframe('div', 'There goes my hero');
+    cy.getIframeBody().within(() => {
+      cy.get('[data-xb-component-id="experience_builder:my-hero"]').should(
         'have.length',
-        2,
+        1,
       );
     });
   });