Tests: Make test less flaky

Author: lamATnginx

tests/src/cards.spec.js

@@ -5,22 +5,23 @@ test.describe('Testing for cards shortcode', () => {
   test.beforeEach(async ({ page }) => {
     const cardsUrl = 'test-product/cards/permitted';
     await page.goto(`/${cardsUrl}`);
+    await page.waitForLoadState('networkidle');
     await waitFor(async () => await handleConsentPopup(page));
   });
 
   test('basic section', async ({ page }) => {
-    const section = await page.getByTestId('cards-test__basic');
-    const showAsCardCode = await section.getByTestId('card-section-content');
+    const section = page.getByTestId('cards-test__basic');
+    const showAsCardCode = section.getByTestId('card-section-content');
 
     expect(await showAsCardCode.count()).toBe(0);
   });
 
   test('featured section', async ({ page }) => {
-    const section = await page.getByTestId('cards-test__featuredSection');
-    const featuredSection = await section.getByTestId(
+    const section = page.getByTestId('cards-test__featuredSection');
+    const featuredSection = section.getByTestId(
       'card-section__featured-section'
     );
-    const cards = await (await featuredSection.getByTestId('card')).all();
+    const cards = await featuredSection.getByTestId('card').all();
 
     // Test featured section exists AND there are less than or equal to 3 cards.
     expect(await featuredSection.count()).toBeTruthy();

tests/src/footer.spec.js

@@ -4,6 +4,7 @@ import { handleConsentPopup, waitFor } from './util';
 test.describe('Smoke test for footer', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/test-product');
+    await page.waitForLoadState('networkidle');
     await waitFor(async () => await handleConsentPopup(page));
   });
 

tests/src/header.spec.js

@@ -4,6 +4,7 @@ import { handleConsentPopup, waitFor } from './util';
 test.describe('Smoke test for header', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/test-product');
+    await page.waitForLoadState('networkidle');
     await waitFor(async () => await handleConsentPopup(page));
   });
 
@@ -18,13 +19,13 @@ test.describe('Smoke test for header', () => {
   });
 
   test('header control works', async ({ page }) => {
-    const sidebarButtonClose = await page.getByTestId(
+    const sidebarButtonClose = page.getByTestId(
       'header__control--sidebar--close'
     );
-    const sidebarButtonOpen = await page.getByTestId(
+    const sidebarButtonOpen = page.getByTestId(
       'header__control--sidebar--open'
     );
-    const sidebar = await page.getByTestId('sidebar');
+    const sidebar = page.getByTestId('sidebar');
 
     // Close the sidebar
     await expect(sidebarButtonClose).toBeVisible();
@@ -44,9 +45,11 @@ test.describe('Smoke test for header', () => {
   });
 
   test('F5 Sites button works', async ({ page }) => {
-    const f5SitesButton = await page.getByTestId('header__f5sites_button');
-    await f5SitesButton.click();
-    const f5SitesContent = await page.getByTestId('header__f5sites_content');
-    await expect(f5SitesContent.count()).toBeTruthy();
+    const f5SitesButton = page.getByTestId('header__f5sites_button');
+    await expect(async () => {
+      await f5SitesButton.click();
+      const f5SitesContent = page.getByTestId('header__f5sites_content');
+      await expect(f5SitesContent).toBeVisible();
+    }).toPass();
   });
 });

tests/src/product-landing.spec.js

@@ -7,6 +7,7 @@ test.describe('Smoke test for landing page', () => {
 
     for (const product of products) {
       await page.goto(`/${product}/`);
+      await page.waitForLoadState('networkidle');
       await runSmokeTestOnPage(page);
     }
   });

tests/src/sidebar.spec.js

@@ -35,7 +35,7 @@ async function openPage(page, sidebarPage) {
 
   // Click on the page
   await sidebarPage.click();
-  const content = await page.getByTestId('content');
+  const content = page.getByTestId('content');
   await content.waitFor();
 }
 
@@ -45,6 +45,7 @@ test.describe('Smoke test for sidebar', () => {
 
   test.beforeEach(async ({ page }) => {
     await page.goto('/test-product/');
+    await page.waitForLoadState('networkidle');
   });
 
   test('sidebar renders', async ({ page }) => {

tests/src/tabs.spec.js

@@ -5,25 +5,26 @@ test.describe('Testing for tabs shortcode', () => {
   test.beforeEach(async ({ page }) => {
     const tabsUrl = 'test-product/tab-group/tab-group/';
     await page.goto(`/${tabsUrl}`);
+    await page.waitForLoadState('networkidle');
     await waitFor(async () => await handleConsentPopup(page));
   });
 
   test('tabs render', async ({ page }) => {
-    const section = await page.getByTestId('tabs-test__basic');
-    const tabsContainer = await section.getByTestId('tabs-container');
-    const tabLabels = await tabsContainer.getByTestId('tab-labels');
-    const tabContents = await tabsContainer.getByTestId('tab-contents');
+    const section = page.getByTestId('tabs-test__basic');
+    const tabsContainer = section.getByTestId('tabs-container');
+    const tabLabels = tabsContainer.getByTestId('tab-labels');
+    const tabContents = tabsContainer.getByTestId('tab-contents');
 
     expect(await tabsContainer.count()).toBeTruthy();
     expect(await tabLabels.count()).toBeTruthy();
     expect(await tabContents.count()).toBeTruthy();
   });
 
   test('tabs shift content when clicked', async ({ page }) => {
-    const section = await page.getByTestId('tabs-test__basic');
-    const tabsContainer = await section.getByTestId('tabs-container');
-    const tabLabels = await tabsContainer.getByTestId('tab-labels');
-    const tabContents = await tabsContainer.getByTestId('tab-contents');
+    const section = page.getByTestId('tabs-test__basic');
+    const tabsContainer = section.getByTestId('tabs-container');
+    const tabLabels = tabsContainer.getByTestId('tab-labels');
+    const tabContents = tabsContainer.getByTestId('tab-contents');
 
     const tabsList = await tabLabels.locator('li').all();
     for (const tab of tabsList) {