Merge pull request AdaptiveConsulting#2292 from AdaptiveConsulting/ch…

…ore/5581-flaky-test-new-row-flashing

Test: 5590 Improve "when user buys a currency, the new row should flash briefly" test resiliency

packages/client/e2e/blotter.spec.ts

@@ -4,7 +4,7 @@ import { expect, Page } from "@playwright/test"
 import fs from "fs"
 
 import { test } from "./fixtures"
-import { isOpenFin } from "./utils"
+import { ElementTimeout, isOpenFin } from "./utils"
 
 const getTradeIDColIndex = () => {
   // const tradeIndex = fxColFields.indexOf(
@@ -77,13 +77,29 @@ test.describe("Trade Blotter", () => {
       .locator("input[id='notional-input-EURUSD']")
       .pressSequentially("1m")
 
-    await tilePage.locator('[data-testid="Buy-EURUSD"]').nth(0).click()
-
-    const tradeID = await tilePage
-      .locator("[data-testid='trade-id']")
-      .innerText()
-    const newRow = blotterPage.getByTestId(`trades-grid-row-${tradeID}`)
-    await expect(newRow).toHaveCSS("animation", /1s ease-in-out/)
+    // circumvent low occurences of false negative. if it fails on 1st attempt then we retry until timeout
+    const retryTimeout = ElementTimeout.NORMAL
+    await expect(async () => {
+      await tilePage.locator("input[id='notional-input-EURUSD']").clear()
+      await tilePage
+        .locator("input[id='notional-input-EURUSD']")
+        .pressSequentially("1m")
+      await tilePage.locator('[data-testid="Buy-EURUSD"]').nth(0).click()
+
+      const tradeID = await tilePage
+        .locator("[data-testid='trade-id']")
+        .innerText()
+
+      const newRow = blotterPage.getByTestId(`trades-grid-row-${tradeID}`)
+
+      await expect(newRow).toHaveCSS("animation", /1s ease-in-out/, {
+        timeout: ElementTimeout.AGGRESSIVE,
+      })
+    }, `Unable to retry clicking on accept button within ${retryTimeout} seconds`).toPass(
+      {
+        timeout: retryTimeout,
+      },
+    )
   })
 
   test("when user clicks on the header of any column, it should sort it (depending on number of clicks, can be ascending or descending)", async () => {