test: fix flaky e2e tests

packages/arb-token-bridge-ui/synpress.cctp.config.ts

@@ -43,7 +43,8 @@ export async function fundUsdc({
   await tx.wait()
 }
 
-const shouldRecordVideo = process.env.CYPRESS_RECORD_VIDEO === 'true'
+// const shouldRecordVideo = process.env.CYPRESS_RECORD_VIDEO === 'true'
+const shouldRecordVideo = true
 
 const tests =
   process.env.TEST_FILE &&

packages/arb-token-bridge-ui/synpress.config.ts

@@ -226,7 +226,8 @@ export default defineConfig({
     },
     baseUrl: 'http://localhost:3000',
     specPattern: tests,
-    supportFile: 'tests/support/index.ts'
+    supportFile: 'tests/support/index.ts',
+    defaultCommandTimeout: 20_000
   }
 })
 

packages/arb-token-bridge-ui/tests/e2e/specfiles.json

@@ -2,61 +2,61 @@
   {
     "name": "Login and balance check",
     "file": "tests/e2e/specs/**/login.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Deposit native token",
     "file": "tests/e2e/specs/**/depositNativeToken.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Withdraw native token",
     "file": "tests/e2e/specs/**/withdrawNativeToken.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Deposit ERC20",
     "file": "tests/e2e/specs/**/depositERC20.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Withdraw ERC20",
     "file": "tests/e2e/specs/**/withdrawERC20.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Batch deposit",
     "file": "tests/e2e/specs/**/batchDeposit.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "TX history",
     "file": "tests/e2e/specs/**/txHistory.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Approve ERC20",
     "file": "tests/e2e/specs/**/approveToken.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Import test ERC20",
     "file": "tests/e2e/specs/**/importToken.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Read classic deposits",
     "file": "tests/e2e/specs/**/readClassicDeposits.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Redeem Retryable",
     "file": "tests/e2e/specs/**/redeemRetryable.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   },
   {
     "name": "Switch network",
     "file": "tests/e2e/specs/**/switchNetworks.cy.{js,jsx,ts,tsx}",
-    "recordVideo": "false"
+    "recordVideo": "true"
   }
 ]

packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts

@@ -50,7 +50,7 @@ describe('Approve token for deposit', () => {
        * If confirm spending fails, test is still considered to be passing by Cypress
        * We add another check to make sure the test fails if needed
        */
-      cy.wait(10_000)
+      cy.wait(25_000)
       cy.rejectMetamaskTransaction()
     })
   })

packages/arb-token-bridge-ui/tests/e2e/specs/batchDeposit.cy.ts

@@ -141,11 +141,7 @@ describe('Batch Deposit', () => {
     context('deposit should complete successfully', () => {
       cy.selectTransactionsPanelTab('settled')
 
-      cy.waitUntil(() => cy.findTransactionInTransactionHistory(txData), {
-        errorMsg: 'Could not find settled ERC20 Batch Deposit transaction',
-        timeout: 60_000,
-        interval: 500
-      })
+      cy.findTransactionInTransactionHistory(txData)
 
       cy.findTransactionInTransactionHistory({
         duration: 'a few seconds ago',
@@ -156,23 +152,29 @@ describe('Batch Deposit', () => {
 
     context('funds should reach destination account successfully', () => {
       // should have more funds on destination chain
-      cy.findByLabelText(`${ERC20TokenSymbol} balance amount on childChain`)
-        .invoke('text')
-        .then(parseFloat)
-        .should('be.gt', Number(parentErc20Balance))
-      cy.findByLabelText(`${nativeTokenSymbol} balance amount on childChain`)
-        .invoke('text')
-        .then(parseFloat)
-        .should(
-          'be.gt',
+      cy.findByLabelText(
+        `${ERC20TokenSymbol} balance amount on childChain`
+      ).should($el => {
+        const currentBalance = parseFloat($el.text())
+        expect(currentBalance).to.be.gt(Number(parentErc20Balance))
+      })
+
+      cy.findByLabelText(
+        `${nativeTokenSymbol} balance amount on childChain`
+      ).should($el => {
+        const currentBalance = parseFloat($el.text())
+        expect(currentBalance).to.be.gt(
           Number(parentNativeTokenBalance) + nativeCurrencyAmountToSend
         )
+      })
 
       // the balance on the source chain should not be the same as before
-      cy.findByLabelText(`${ERC20TokenSymbol} balance amount on parentChain`)
-        .invoke('text')
-        .then(parseFloat)
-        .should('be.lt', Number(parentErc20Balance))
+      cy.findByLabelText(
+        `${ERC20TokenSymbol} balance amount on parentChain`
+      ).should($el => {
+        const currentBalance = parseFloat($el.text())
+        expect(currentBalance).to.be.lt(Number(parentErc20Balance))
+      })
     })
 
     context('transfer panel amount should be reset', () => {
@@ -251,11 +253,7 @@ describe('Batch Deposit', () => {
     context('deposit should complete successfully', () => {
       cy.selectTransactionsPanelTab('settled')
 
-      cy.waitUntil(() => cy.findTransactionInTransactionHistory(txData), {
-        errorMsg: 'Could not find settled ERC20 Batch Deposit transaction',
-        timeout: 60_000,
-        interval: 500
-      })
+      cy.findTransactionInTransactionHistory(txData)
 
       cy.findTransactionInTransactionHistory({
         duration: 'a few seconds ago',

packages/arb-token-bridge-ui/tests/e2e/specs/depositERC20.cy.ts

@@ -150,20 +150,12 @@ describe('Deposit Token', () => {
           // switch to settled transactions
           cy.selectTransactionsPanelTab('settled')
 
-          //wait for some time for tx to go through and find the new amount in settled transactions
-          cy.waitUntil(
-            () =>
-              cy.findTransactionInTransactionHistory({
-                duration: 'a few seconds ago',
-                amount: ERC20AmountToSend,
-                symbol: testCase.symbol
-              }),
-            {
-              errorMsg: 'Could not find settled ERC20 Deposit transaction',
-              timeout: 60_000,
-              interval: 500
-            }
-          )
+          cy.findTransactionInTransactionHistory({
+            duration: 'a few seconds ago',
+            amount: ERC20AmountToSend,
+            symbol: testCase.symbol
+          })
+
           // open the tx details popup
           const txData = {
             amount: ERC20AmountToSend,

packages/arb-token-bridge-ui/tests/e2e/specs/withdrawERC20.cy.ts

@@ -103,7 +103,7 @@ describe('Withdraw ERC20 Token', () => {
         })
 
         context('should show clickable withdraw button', () => {
-          cy.findMoveFundsButton().click()
+          cy.startTransfer({ shouldConfirmInMetamask: false })
         })
 
         context('should withdraw successfully', () => {
@@ -218,7 +218,7 @@ describe('Withdraw ERC20 Token', () => {
         })
 
         context('should show clickable withdraw button', () => {
-          cy.findMoveFundsButton().click()
+          cy.startTransfer({ shouldConfirmInMetamask: false })
         })
 
         context('should initiate withdrawal successfully', () => {

packages/arb-token-bridge-ui/tests/e2e/specs/withdrawNativeToken.cy.ts

@@ -61,7 +61,7 @@ describe('Withdraw native token', () => {
           ETHToWithdraw = Number((Math.random() * 0.001).toFixed(5)) // generate a new withdrawal amount for each test-run attempt so that findAllByText doesn't stall coz of prev transactions
           cy.login({ networkType: 'childChain' })
           cy.typeAmount(ETHToWithdraw)
-          cy.findMoveFundsButton().click()
+          cy.startTransfer({ shouldConfirmInMetamask: false })
           cy.findByText(/Arbitrum’s bridge/i).should('be.visible')
 
           // the Continue withdrawal button should be disabled at first
@@ -146,7 +146,7 @@ describe('Withdraw native token', () => {
 
       cy.typeAmount(ETHToWithdraw)
       cy.fillCustomDestinationAddress()
-      cy.findMoveFundsButton().click()
+      cy.startTransfer({ shouldConfirmInMetamask: false })
       cy.findByText(/Arbitrum’s bridge/i).should('be.visible')
 
       // the Continue withdrawal button should be disabled at first

packages/arb-token-bridge-ui/tests/support/commands.ts

@@ -222,11 +222,17 @@ export function findMoveFundsButton(): Cypress.Chainable<JQuery<HTMLElement>> {
     .should('be.visible')
 }
 
-export function startTransfer() {
+export function startTransfer({
+  shouldConfirmInMetamask = true
+}: {
+  shouldConfirmInMetamask?: boolean
+} = {}) {
   cy.wait(5_000)
   cy.findMoveFundsButton().click()
   cy.wait(15_000)
-  cy.confirmMetamaskTransaction()
+  if (shouldConfirmInMetamask) {
+    cy.confirmMetamaskTransaction()
+  }
 }
 
 export function findSelectTokenButton(
@@ -304,6 +310,8 @@ export function findTransactionInTransactionHistory({
   amount2?: number
   duration?: string
 }) {
+  const timeout = 120_000
+
   // Replace . with \.
   const parsedAmount = amount.toString().replace(/\./g, '\\.')
 
@@ -313,15 +321,18 @@ export function findTransactionInTransactionHistory({
     }`
   )
 
-  cy.findByTestId(rowId).as('row')
+  cy.findByTestId(rowId, { timeout }).as('row')
   if (duration) {
-    cy.get('@row').findAllByText(duration).first().should('be.visible')
+    cy.get('@row', { timeout })
+      .findAllByText(duration, { timeout })
+      .first()
+      .should('be.visible', { timeout })
   }
 
-  cy.get('@row')
-    .findByLabelText('Transaction details button')
-    .should('be.visible')
-  return cy.get('@row')
+  cy.get('@row', { timeout })
+    .findByLabelText('Transaction details button', { timeout })
+    .should('be.visible', { timeout })
+  return cy.get('@row', { timeout })
 }
 
 export function findClaimButton(