From 6fb32612a6c92f69047591addb623f958d48bc7f Mon Sep 17 00:00:00 2001
From: Josh-HMCTS <128602796+Josh-HMCTS@users.noreply.github.com>
Date: Mon, 21 Oct 2024 14:07:38 +0100
Subject: [PATCH] Add spinner step for flaky tests (#3956)

---
 playwright_tests/E2E/global-search.test.ts  |  2 ++
 playwright_tests/E2E/staff-search.test.ts   |  4 ++++
 playwright_tests/E2E/steps/spinner-steps.ts | 10 ++++++++++
 3 files changed, 16 insertions(+)
 create mode 100644 playwright_tests/E2E/steps/spinner-steps.ts

diff --git a/playwright_tests/E2E/global-search.test.ts b/playwright_tests/E2E/global-search.test.ts
index 492cb3fe80..6dcf6b63d8 100644
--- a/playwright_tests/E2E/global-search.test.ts
+++ b/playwright_tests/E2E/global-search.test.ts
@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/test';
 import { signIn } from './steps/login-steps';
 import { clickOnMainMenu } from './steps/steps-functions';
 import { retryAction } from './steps/retry-steps';
+import { waitForSpinner } from './steps/spinner-steps';
 import axeTest from "./helpers/accessibilityTestHelper";
 
 test('Search from menu 16-digit find control', async ({ page }) => {
@@ -9,6 +10,7 @@ test('Search from menu 16-digit find control', async ({ page }) => {
 
   console.log('Search from menu 16-digit find control');
   const caseId = findCaseId(page)
+  await waitForSpinner(page);
   await expect(page.getByText('-digit case reference:')).toBeVisible();
   await page.getByLabel('-digit case reference:').click();
   await page.getByLabel('-digit case reference:').fill(caseId);
diff --git a/playwright_tests/E2E/staff-search.test.ts b/playwright_tests/E2E/staff-search.test.ts
index 2c44da87b5..10bc6e9ae0 100644
--- a/playwright_tests/E2E/staff-search.test.ts
+++ b/playwright_tests/E2E/staff-search.test.ts
@@ -1,10 +1,14 @@
 import { test, expect } from '@playwright/test';
 import { signIn, signOut } from "./steps/login-steps";
 import { clickToStaffPage, fillSearchBox } from "./steps/staff-steps";
+import { waitForSpinner } from './steps/spinner-steps';
 import axeTest from "./helpers/accessibilityTestHelper";
 
 test('Simplified search results', async ({ page }) => {
     await signIn(page, "STAFF_ADMIN");
+    await expect(page.getByLabel('Manage Cases')).toBeVisible();
+
+    await waitForSpinner(page);
     await clickToStaffPage(page);
   
     console.log("Using simple search");
diff --git a/playwright_tests/E2E/steps/spinner-steps.ts b/playwright_tests/E2E/steps/spinner-steps.ts
new file mode 100644
index 0000000000..71f7407032
--- /dev/null
+++ b/playwright_tests/E2E/steps/spinner-steps.ts
@@ -0,0 +1,10 @@
+import { Page } from '@playwright/test';
+
+export async function waitForSpinner(page: Page) {
+  try {
+    await page.waitForSelector('xuilib-loading-spinner', { state: 'attached', timeout: 5000 });
+    await page.waitForSelector('xuilib-loading-spinner', { state: 'detached' });
+  } catch (error) {
+    console.log('Spinner did not appear within the timeout period.');
+  }
+}