test: fix flaky breadcrumbs visual tests (#12088) (CP: 25.2) (#12089)

This PR cherry-picks changes from the original PR #12088 to branch 25.2.

---

#### Original PR description
> Breadcrumbs visual tests involving the overflow overlay have been
flaky and sometimes needed a retry in CI. The issue seems to be that the
asynchronous `sendKeys` can result in the overlay opening before the
command resolves in the test, causing the tests to time out. Changed it
so that the event listener is registered before running the async
command.

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

Author: vaadin-bot

packages/breadcrumbs/test/visual/aura/breadcrumbs.test.js

@@ -77,17 +77,19 @@ describe('breadcrumbs', () => {
     it('overflow-opened', async () => {
       div.style.height = '150px';
       breadcrumbs.$.overflow.focus();
+      const opened = oneEvent(overlay, 'vaadin-overlay-open');
       await sendKeys({ press: 'Enter' });
-      await oneEvent(overlay, 'vaadin-overlay-open');
+      await opened;
       await visualDiff(div, 'overflow-opened');
     });
 
     it('accent', async () => {
       div.style.height = '150px';
       breadcrumbs.setAttribute('theme', 'accent');
       breadcrumbs.$.overflow.focus();
+      const opened = oneEvent(overlay, 'vaadin-overlay-open');
       await sendKeys({ press: 'Enter' });
-      await oneEvent(overlay, 'vaadin-overlay-open');
+      await opened;
       await visualDiff(div, 'theme-accent');
     });
   });

packages/breadcrumbs/test/visual/base/breadcrumbs.test.js

@@ -114,8 +114,9 @@ describe('breadcrumbs', () => {
       const overlay = breadcrumbs.shadowRoot.querySelector('vaadin-breadcrumbs-overlay');
       const button = breadcrumbs.shadowRoot.querySelector('[part="overflow-button"]');
       button.focus();
+      const opened = oneEvent(overlay, 'vaadin-overlay-open');
       await sendKeys({ press: 'Enter' });
-      await oneEvent(overlay, 'vaadin-overlay-open');
+      await opened;
       await visualDiff(div, 'overflow-opened');
     });
   });

packages/breadcrumbs/test/visual/lumo/breadcrumbs.test.js

@@ -77,17 +77,19 @@ describe('breadcrumbs', () => {
     it('overflow-opened', async () => {
       div.style.height = '150px';
       breadcrumbs.$.overflow.focus();
+      const opened = oneEvent(overlay, 'vaadin-overlay-open');
       await sendKeys({ press: 'Enter' });
-      await oneEvent(overlay, 'vaadin-overlay-open');
+      await opened;
       await visualDiff(div, 'overflow-opened');
     });
 
     it('primary', async () => {
       div.style.height = '150px';
       breadcrumbs.setAttribute('theme', 'primary');
       breadcrumbs.$.overflow.focus();
+      const opened = oneEvent(overlay, 'vaadin-overlay-open');
       await sendKeys({ press: 'Enter' });
-      await oneEvent(overlay, 'vaadin-overlay-open');
+      await opened;
       await visualDiff(div, 'theme-primary');
     });
   });