diff --git a/test/e2e/alert.e2e.ts b/test/e2e/alert.e2e.ts
index 8938c9af5..d23bbf9f0 100644
--- a/test/e2e/alert.e2e.ts
+++ b/test/e2e/alert.e2e.ts
@@ -25,11 +25,11 @@ describe('alert', () => {
     expect(await alertBase.isVisible()).toBe(false);
 
     await alert.callMethod('show');
-    await page.waitFor(500); // wait for transition to end
+    await alertBase.waitForEvent('transitionend');
     expect(await alertBase.isVisible()).toBe(true);
 
     await alert.callMethod('hide');
-    await page.waitFor(500); // wait for transition to end
+    await alertBase.waitForEvent('transitionend');
     expect(await alertBase.isVisible()).toBe(false);
   });
 
@@ -44,12 +44,12 @@ describe('alert', () => {
 
     alert.setAttribute('open', '');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await alertBase.waitForEvent('transitionend');
     expect(await alertBase.isVisible()).toBe(true);
 
     alert.removeAttribute('open');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await alertBase.waitForEvent('transitionend');
     expect(await alertBase.isVisible()).toBe(false);
   });
 
@@ -58,13 +58,14 @@ describe('alert', () => {
     await page.setContent(testContentStartClosed);
 
     const alert = await page.find('sl-alert');
+    const alertBase = await page.find('sl-alert >>> .alert');
     const slShow = await alert.spyOnEvent('slShow');
     const slAfterShow = await alert.spyOnEvent('slAfterShow');
 
     await alert.callMethod('show');
     expect(slShow).toHaveReceivedEventTimes(1);
 
-    await page.waitFor(500); // wait for transition to end
+    await alertBase.waitForEvent('transitionend');
     expect(slAfterShow).toHaveReceivedEventTimes(1);
   });
 
@@ -73,13 +74,14 @@ describe('alert', () => {
     await page.setContent(testContentStartOpen);
 
     const alert = await page.find('sl-alert');
+    const alertBase = await page.find('sl-alert >>> .alert');
     const slHide = await alert.spyOnEvent('slHide');
     const slAfterHide = await alert.spyOnEvent('slAfterHide');
 
     await alert.callMethod('hide');
     expect(slHide).toHaveReceivedEventTimes(1);
 
-    await page.waitFor(500); // wait for transition to end
+    await alertBase.waitForEvent('transitionend');
     expect(slAfterHide).toHaveReceivedEventTimes(1);
   });
 });
diff --git a/test/e2e/details.e2e.ts b/test/e2e/details.e2e.ts
index 5242da9ce..dbb42accd 100644
--- a/test/e2e/details.e2e.ts
+++ b/test/e2e/details.e2e.ts
@@ -26,13 +26,13 @@ describe('details', () => {
     expect(style.height).toBe('0px');
 
     await detailsHeader.click();
-    await page.waitFor(500); // wait for transition to end
+    await detailsBase.waitForEvent('transitionend');
 
     style = await detailsBase.getComputedStyle();
     expect(style.height).not.toBe('0px');
 
     await detailsHeader.click();
-    await page.waitFor(500); // wait for transition to end
+    await detailsBase.waitForEvent('transitionend');
 
     style = await detailsBase.getComputedStyle();
     expect(style.height).toBe('0px');
@@ -49,13 +49,13 @@ describe('details', () => {
     expect(style.height).toBe('0px');
 
     await details.callMethod('show');
-    await page.waitFor(500); // wait for transition to end
+    await detailsBase.waitForEvent('transitionend');
 
     style = await detailsBase.getComputedStyle();
     expect(style.height).not.toBe('0px');
 
     await details.callMethod('hide');
-    await page.waitFor(500); // wait for transition to end
+    await detailsBase.waitForEvent('transitionend');
 
     style = await detailsBase.getComputedStyle();
     expect(style.height).toBe('0px');
@@ -73,14 +73,14 @@ describe('details', () => {
 
     details.setAttribute('open', '');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await detailsBase.waitForEvent('transitionend');
 
     style = await detailsBase.getComputedStyle();
     expect(style.height).not.toBe('0px');
 
     details.removeAttribute('open');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await detailsBase.waitForEvent('transitionend');
 
     style = await detailsBase.getComputedStyle();
     expect(style.height).toBe('0px');
@@ -91,13 +91,14 @@ describe('details', () => {
     await page.setContent(testContentStartClosed);
 
     const details = await page.find('sl-details');
+    const detailsBase = await page.find('sl-details >>> .details__body');
     const slShow = await details.spyOnEvent('slShow');
     const slAfterShow = await details.spyOnEvent('slAfterShow');
 
     await details.callMethod('show');
     expect(slShow).toHaveReceivedEventTimes(1);
 
-    await page.waitFor(500); // wait for transition to end
+    await detailsBase.waitForEvent('transitionend');
     expect(slAfterShow).toHaveReceivedEventTimes(1);
   });
 
@@ -106,13 +107,14 @@ describe('details', () => {
     await page.setContent(testContentStartOpen);
 
     const details = await page.find('sl-details');
+    const detailsBase = await page.find('sl-details >>> .details__body');
     const slHide = await details.spyOnEvent('slHide');
     const slAfterHide = await details.spyOnEvent('slAfterHide');
 
     await details.callMethod('hide');
     expect(slHide).toHaveReceivedEventTimes(1);
 
-    await page.waitFor(500); // wait for transition to end
+    await detailsBase.waitForEvent('transitionend');
     expect(slAfterHide).toHaveReceivedEventTimes(1);
   });
 });
diff --git a/test/e2e/dialog.e2e.ts b/test/e2e/dialog.e2e.ts
index f2ab3ac90..df74ba545 100644
--- a/test/e2e/dialog.e2e.ts
+++ b/test/e2e/dialog.e2e.ts
@@ -21,15 +21,16 @@ describe('dialog', () => {
 
     const dialog = await page.find('sl-dialog');
     const dialogBase = await page.find('sl-dialog >>> .dialog');
+    const dialogPanel = await page.find('sl-dialog >>> .dialog__panel');
 
     expect(await dialogBase.isVisible()).toBe(false);
 
     await dialog.callMethod('show');
-    await page.waitFor(500); // wait for transition to end
+    await dialogPanel.waitForEvent('transitionend');
     expect(await dialogBase.isVisible()).toBe(true);
 
     await dialog.callMethod('hide');
-    await page.waitFor(500); // wait for transition to end
+    await dialogPanel.waitForEvent('transitionend');
     expect(await dialogBase.isVisible()).toBe(false);
   });
 
@@ -39,17 +40,18 @@ describe('dialog', () => {
 
     const dialog = await page.find('sl-dialog');
     const dialogBase = await page.find('sl-dialog >>> .dialog');
+    const dialogPanel = await page.find('sl-dialog >>> .dialog__panel');
 
     expect(await dialogBase.isVisible()).toBe(false);
 
     dialog.setAttribute('open', '');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await dialogPanel.waitForEvent('transitionend');
     expect(await dialogBase.isVisible()).toBe(true);
 
     dialog.removeAttribute('open');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await dialogPanel.waitForEvent('transitionend');
     expect(await dialogBase.isVisible()).toBe(false);
   });
 
@@ -58,13 +60,14 @@ describe('dialog', () => {
     await page.setContent(testContentStartClosed);
 
     const dialog = await page.find('sl-dialog');
+    const dialogPanel = await page.find('sl-dialog >>> .dialog__panel');
     const slShow = await dialog.spyOnEvent('slShow');
     const slAfterShow = await dialog.spyOnEvent('slAfterShow');
 
     await dialog.callMethod('show');
     expect(slShow).toHaveReceivedEventTimes(1);
 
-    await page.waitFor(500); // wait for transition to end
+    await dialogPanel.waitForEvent('transitionend');
     expect(slAfterShow).toHaveReceivedEventTimes(1);
   });
 
@@ -73,13 +76,14 @@ describe('dialog', () => {
     await page.setContent(testContentStartOpen);
 
     const dialog = await page.find('sl-dialog');
+    const dialogPanel = await page.find('sl-dialog >>> .dialog__panel');
     const slHide = await dialog.spyOnEvent('slHide');
     const slAfterHide = await dialog.spyOnEvent('slAfterHide');
 
     await dialog.callMethod('hide');
     expect(slHide).toHaveReceivedEventTimes(1);
 
-    await page.waitFor(500); // wait for transition to end
+    await dialogPanel.waitForEvent('transitionend');
     expect(slAfterHide).toHaveReceivedEventTimes(1);
   });
 
diff --git a/test/e2e/drawer.e2e.ts b/test/e2e/drawer.e2e.ts
index dbc788204..5be43ed15 100644
--- a/test/e2e/drawer.e2e.ts
+++ b/test/e2e/drawer.e2e.ts
@@ -21,15 +21,16 @@ describe('drawer', () => {
 
     const drawer = await page.find('sl-drawer');
     const drawerBase = await page.find('sl-drawer >>> .drawer');
+    const drawerPanel = await page.find('sl-drawer >>> .drawer__panel');
 
     expect(await drawerBase.isVisible()).toBe(false);
 
     await drawer.callMethod('show');
-    await page.waitFor(500); // wait for transition to end
+    await drawerPanel.waitForEvent('transitionend');
     expect(await drawerBase.isVisible()).toBe(true);
 
     await drawer.callMethod('hide');
-    await page.waitFor(500); // wait for transition to end
+    await drawerPanel.waitForEvent('transitionend');
     expect(await drawerBase.isVisible()).toBe(false);
   });
 
@@ -39,17 +40,18 @@ describe('drawer', () => {
 
     const drawer = await page.find('sl-drawer');
     const drawerBase = await page.find('sl-drawer >>> .drawer');
+    const drawerPanel = await page.find('sl-drawer >>> .drawer__panel');
 
     expect(await drawerBase.isVisible()).toBe(false);
 
     drawer.setAttribute('open', '');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await drawerPanel.waitForEvent('transitionend');
     expect(await drawerBase.isVisible()).toBe(true);
 
     drawer.removeAttribute('open');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await drawerPanel.waitForEvent('transitionend');
     expect(await drawerBase.isVisible()).toBe(false);
   });
 
@@ -58,13 +60,14 @@ describe('drawer', () => {
     await page.setContent(testContentStartClosed);
 
     const drawer = await page.find('sl-drawer');
+    const drawerPanel = await page.find('sl-drawer >>> .drawer__panel');
     const slShow = await drawer.spyOnEvent('slShow');
     const slAfterShow = await drawer.spyOnEvent('slAfterShow');
 
     await drawer.callMethod('show');
     expect(slShow).toHaveReceivedEventTimes(1);
 
-    await page.waitFor(500); // wait for transition to end
+    await drawerPanel.waitForEvent('transitionend');
     expect(slAfterShow).toHaveReceivedEventTimes(1);
   });
 
@@ -73,13 +76,14 @@ describe('drawer', () => {
     await page.setContent(testContentStartOpen);
 
     const drawer = await page.find('sl-drawer');
+    const drawerPanel = await page.find('sl-drawer >>> .drawer__panel');
     const slHide = await drawer.spyOnEvent('slHide');
     const slAfterHide = await drawer.spyOnEvent('slAfterHide');
 
     await drawer.callMethod('hide');
     expect(slHide).toHaveReceivedEventTimes(1);
 
-    await page.waitFor(500); // wait for transition to end
+    await drawerPanel.waitForEvent('transitionend');
     expect(slAfterHide).toHaveReceivedEventTimes(1);
   });
 
diff --git a/test/e2e/dropdown.e2e.ts b/test/e2e/dropdown.e2e.ts
index 07d423914..2d84fa44f 100644
--- a/test/e2e/dropdown.e2e.ts
+++ b/test/e2e/dropdown.e2e.ts
@@ -29,12 +29,12 @@ describe('dropdown', () => {
     expect(await dropdownPanel.isVisible()).toBe(false);
 
     await dropdown.click();
-    await page.waitFor(500); // wait for transition to end
+    await dropdownPanel.waitForEvent('transitionend');
 
     expect(await dropdownPanel.isVisible()).toBe(true);
 
     await dropdown.click();
-    await page.waitFor(500); // wait for transition to end
+    await dropdownPanel.waitForEvent('transitionend');
 
     expect(await dropdownPanel.isVisible()).toBe(false);
   });
@@ -49,12 +49,12 @@ describe('dropdown', () => {
     expect(await dropdownPanel.isVisible()).toBe(false);
 
     await dropdown.callMethod('show');
-    await page.waitFor(500); // wait for transition to end
+    await dropdownPanel.waitForEvent('transitionend');
 
     expect(await dropdownPanel.isVisible()).toBe(true);
 
     await dropdown.callMethod('hide');
-    await page.waitFor(500); // wait for transition to end
+    await dropdownPanel.waitForEvent('transitionend');
 
     expect(await dropdownPanel.isVisible()).toBe(false);
   });
@@ -70,13 +70,13 @@ describe('dropdown', () => {
 
     dropdown.setAttribute('open', '');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await dropdownPanel.waitForEvent('transitionend');
 
     expect(await dropdownPanel.isVisible()).toBe(true);
 
     dropdown.removeAttribute('open');
     await page.waitForChanges();
-    await page.waitFor(500); // wait for transition to end
+    await dropdownPanel.waitForEvent('transitionend');
 
     expect(await dropdownPanel.isVisible()).toBe(false);
   });
@@ -86,13 +86,14 @@ describe('dropdown', () => {
     await page.setContent(testContentStartClosed);
 
     const dropdown = await page.find('sl-dropdown');
+    const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
     const slShow = await dropdown.spyOnEvent('slShow');
     const slAfterShow = await dropdown.spyOnEvent('slAfterShow');
 
     await dropdown.callMethod('show');
     expect(slShow).toHaveReceivedEventTimes(1);
 
-    await page.waitFor(500); // wait for transition to end
+    await dropdownPanel.waitForEvent('transitionend');
     expect(slAfterShow).toHaveReceivedEventTimes(1);
   });
 
@@ -101,14 +102,14 @@ describe('dropdown', () => {
     await page.setContent(testContentStartOpen);
 
     const dropdown = await page.find('sl-dropdown');
+    const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
     const slHide = await dropdown.spyOnEvent('slHide');
     const slAfterHide = await dropdown.spyOnEvent('slAfterHide');
 
     await dropdown.callMethod('hide');
     expect(slHide).toHaveReceivedEventTimes(1);
 
-    // hiding seems to require a greater timeout?
-    await page.waitFor(1500); // wait for transition to end
+    await dropdownPanel.waitForEvent('transitionend');
     expect(slAfterHide).toHaveReceivedEventTimes(1);
   });