diff --git a/packages/web-components/src/menu/menu.spec.ts b/packages/web-components/src/menu/menu.spec.ts
index 77bab566a9ec4f..eccab415c53366 100644
--- a/packages/web-components/src/menu/menu.spec.ts
+++ b/packages/web-components/src/menu/menu.spec.ts
@@ -20,7 +20,7 @@ test.describe('Menu', () => {
     const element = page.locator('fluent-menu');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -40,7 +40,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -62,7 +62,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -89,7 +89,7 @@ test.describe('Menu', () => {
     const menuList = element.locator('fluent-menu-list');
     const menuItems = menuList.locator('fluent-menu-item');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -116,7 +116,7 @@ test.describe('Menu', () => {
     const menuList = element.locator('fluent-menu-list');
     const menuItems = menuList.locator('fluent-menu-item');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -144,7 +144,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -170,7 +170,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -197,7 +197,7 @@ test.describe('Menu', () => {
     const menuList = element.locator('fluent-menu-list');
     const menuItems = menuList.locator('fluent-menu-item');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -225,7 +225,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -261,7 +261,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -296,7 +296,7 @@ test.describe('Menu', () => {
     const menuList = element.locator('fluent-menu-list');
     const menuItems = menuList.locator('fluent-menu-item');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -348,7 +348,7 @@ test.describe('Menu', () => {
     const element = page.locator('fluent-menu');
     const menuButton = element.locator('fluent-menu-button');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger" icon-only></fluent-menu-button>
         <fluent-button appearance="primary" slot="primary-action">Primary Action</fluent-menu-button>
diff --git a/packages/web-components/src/tablist/tablist.spec.ts b/packages/web-components/src/tablist/tablist.spec.ts
index a2c96795c3d3c1..0c2346d647fa7a 100644
--- a/packages/web-components/src/tablist/tablist.spec.ts
+++ b/packages/web-components/src/tablist/tablist.spec.ts
@@ -17,7 +17,7 @@ test.describe('Tablist', () => {
     const element = page.locator('fluent-tablist');
     const tabs = element.locator('fluent-tab');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-tablist>
           <fluent-tab>Tab one</fluent-tab>
           <fluent-tab>Tab two</fluent-tab>
@@ -37,7 +37,7 @@ test.describe('Tablist', () => {
     const tabs = element.locator('fluent-tab');
     const tab = tabs.nth(2);
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-tablist>
           <fluent-tab>Tab one</fluent-tab>
           <fluent-tab>Tab two</fluent-tab>
@@ -55,7 +55,7 @@ test.describe('Tablist', () => {
   test('should have reflect disabled attribute on control', async ({ page }) => {
     const element = page.locator('fluent-tablist');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-tablist>
           <fluent-tab>Tab one</fluent-tab>
           <fluent-tab>Tab two</fluent-tab>
@@ -75,7 +75,7 @@ test.describe('Tablist', () => {
   test('should have role of `tablist`', async ({ page }) => {
     const element = page.locator('fluent-tablist');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-tablist>
           <fluent-tab>Tab one</fluent-tab>
           <fluent-tab>Tab two</fluent-tab>
@@ -91,7 +91,7 @@ test.describe('Tablist', () => {
   }) => {
     const element = page.locator('fluent-tablist');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-tablist>
           <fluent-tab>Tab one</fluent-tab>
           <fluent-tab>Tab two</fluent-tab>
@@ -106,7 +106,7 @@ test.describe('Tablist', () => {
     const element = page.locator('fluent-tablist');
     const tabs = element.locator('fluent-tab');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-tablist>
           <fluent-tab>Tab one</fluent-tab>
           <fluent-tab>Tab two</fluent-tab>
@@ -134,7 +134,7 @@ test.describe('Tablist', () => {
       const element = page.locator('fluent-tablist');
       const tabs = element.locator('fluent-tab');
 
-      page.setContent(/* html */ `
+      await page.setContent(/* html */ `
         <fluent-tablist>
             <fluent-tab>Tab one</fluent-tab>
             <fluent-tab>Tab two</fluent-tab>
@@ -162,7 +162,7 @@ test.describe('Tablist', () => {
       const element = page.locator('fluent-tablist');
       const tabs = element.locator('fluent-tab');
 
-      page.setContent(/* html */ `
+      await page.setContent(/* html */ `
         <fluent-tablist>
             <fluent-tab>Tab one</fluent-tab>
             <fluent-tab>Tab two</fluent-tab>
@@ -181,7 +181,7 @@ test.describe('Tablist', () => {
       const element = page.locator('fluent-tablist');
       const tabs = element.locator('fluent-tab');
 
-      page.setContent(/* html */ `
+      await page.setContent(/* html */ `
         <fluent-tablist>
             <fluent-tab>Tab one</fluent-tab>
             <fluent-tab>Tab two</fluent-tab>
@@ -204,7 +204,7 @@ test.describe('Tablist', () => {
       const element = page.locator('fluent-tablist');
       const tabs = element.locator('fluent-tab');
 
-      page.setContent(/* html */ `
+      await page.setContent(/* html */ `
         <fluent-tablist>
             <fluent-tab>Tab one</fluent-tab>
             <fluent-tab>Tab two</fluent-tab>
@@ -230,7 +230,7 @@ test.describe('Tablist', () => {
     test(`should set appearance to \`${appearance}\``, async ({ page }) => {
       const element = page.locator('fluent-tablist');
 
-      page.setContent(/* html */ `
+      await page.setContent(/* html */ `
         <fluent-tablist appearance="${appearance}">
             <fluent-tab>Tab one</fluent-tab>
             <fluent-tab>Tab two</fluent-tab>
@@ -248,7 +248,7 @@ test.describe('Tablist', () => {
     test(`should set size to \`${size}\``, async ({ page }) => {
       const element = page.locator('fluent-tablist');
 
-      page.setContent(/* html */ `
+      await page.setContent(/* html */ `
         <fluent-tablist size="${size}">
             <fluent-tab>Tab one</fluent-tab>
             <fluent-tab>Tab two</fluent-tab>
@@ -349,7 +349,7 @@ test.describe('Tablist', () => {
     const element = page.locator('fluent-tablist');
     const tabs = element.locator('fluent-tab');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-tablist>
           <fluent-tab>Tab one</fluent-tab>
           <fluent-tab hidden>Tab two</fluent-tab>
@@ -377,7 +377,7 @@ test.describe('Tablist', () => {
     const element = page.locator('fluent-tablist');
     const tabs = element.locator('fluent-tab');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-tablist>
           <fluent-tab>Tab one</fluent-tab>
           <fluent-tab>Tab two</fluent-tab>
diff --git a/packages/web-components/src/tabs/tabs.spec.ts b/packages/web-components/src/tabs/tabs.spec.ts
index 1028637618e3ac..1f83a63c824cd4 100644
--- a/packages/web-components/src/tabs/tabs.spec.ts
+++ b/packages/web-components/src/tabs/tabs.spec.ts
@@ -388,7 +388,7 @@ test.describe('Tabs', () => {
     test(`should set appearance to \`${appearance}\``, async ({ page }) => {
       const element = page.locator('fluent-tabs');
 
-      page.setContent(/* html */ `
+      await page.setContent(/* html */ `
         <fluent-tabs appearance="${appearance}"></fluent-tabs>
       `);
 
@@ -400,7 +400,7 @@ test.describe('Tabs', () => {
     test(`should set size to \`${size}\``, async ({ page }) => {
       const element = page.locator('fluent-tabs');
 
-      page.setContent(/* html */ `
+      await page.setContent(/* html */ `
         <fluent-tabs size="${size}"></fluent-tabs>
       `);