Fix: e2e tests issue bridge ui (#882)

* fix: e2e tests issue bridge ui

* fix: close first visit modal twice

* fix

* fix

* swap enable/visible check ordeR

---------

Co-authored-by: kyzooghost <jeffersonzjtang@gmail.com>

bridge-ui/src/components/modal/first-time-visit/index.tsx

@@ -148,7 +148,7 @@ function BaseModal({ isModalOpen, onCloseModal, data }: BaseModalProps) {
           ))}
         </ol>
         {extraText && <p className={styles.extra}>{extraText}</p>}
-        <Button fullWidth onClick={onCloseModal}>
+        <Button data-testid="first-visit-modal-confirm-btn" fullWidth onClick={onCloseModal}>
           {btnText}
         </Button>
       </div>

bridge-ui/test/advancedFixtures.ts

@@ -1,9 +1,9 @@
 import { metaMaskFixtures, getExtensionId } from "@synthetixio/synpress/playwright";
-import setup from "./wallet-setup/metamask.setup";
 import { Locator, Page } from "@playwright/test";
+import setup from "./wallet-setup/metamask.setup";
 import { getNativeBridgeTransactionsCountImpl, selectTokenAndWaitForBalance } from "./utils";
 import { LINEA_SEPOLIA_NETWORK, PAGE_TIMEOUT, POLLING_INTERVAL } from "./constants";
-import next from "next";
+
 /**
  * NB: There is an issue with Synpress `metaMaskFixtures` extension functions wherein extension functions
  * may not be able to reuse other extension functions. This is especially the case when advanced operations
@@ -14,6 +14,7 @@ import next from "next";
  */
 export const test = metaMaskFixtures(setup).extend<{
   // Bridge UI Actions
+  clickFirstVisitModalConfirmButton: () => Promise<void>;
   clickNativeBridgeButton: () => Promise<Locator>;
   openNativeBridgeTransactionHistory: () => Promise<void>;
   closeNativeBridgeTransactionHistory: () => Promise<void>;
@@ -38,6 +39,14 @@ export const test = metaMaskFixtures(setup).extend<{
   doInitiateBridgeTransaction: () => Promise<void>;
   doClaimTransaction: () => Promise<void>;
 }>({
+  clickFirstVisitModalConfirmButton: async ({ page }, use) => {
+    await use(async () => {
+      const confirmButton = page.getByTestId("first-visit-modal-confirm-btn");
+      await expect(confirmButton).toBeVisible();
+      await expect(confirmButton).toBeEnabled();
+      await confirmButton.click();
+    });
+  },
   // Bridge UI Actions
   clickNativeBridgeButton: async ({ page }, use) => {
     await use(async () => {
@@ -124,6 +133,8 @@ export const test = metaMaskFixtures(setup).extend<{
   // Metamask Actions - Should be ok to reuse within other fixture functions
   connectMetamaskToDapp: async ({ page, metamask }, use) => {
     await use(async () => {
+      await page.waitForLoadState("domcontentloaded", { timeout: PAGE_TIMEOUT });
+
       // Click Connect button
       const connectBtn = page.getByRole("button", { name: "Connect", exact: true }).first();
       await connectBtn.click();
@@ -155,6 +166,7 @@ export const test = metaMaskFixtures(setup).extend<{
   // We use this instead of metamask.approveTokenPermission because we found the original method flaky
   submitERC20ApprovalTx: async ({ context, page, metamask }, use) => {
     await use(async () => {
+      metamask.approveTokenPermission;
       // Need to wait for Metamask Notification page to exist, does not exist immediately after clicking 'Approve' button.
       // In Synpress source code, they use this logic in every method interacting with the Metamask notification page.
       const extensionId = await getExtensionId(context, "MetaMask");

bridge-ui/test/e2e/bridge-l1-l2.spec.ts

@@ -16,13 +16,24 @@ describe("L1 > L2 via Native Bridge", () => {
       expect(pageUrl).toEqual(TEST_URL);
     });
 
-    test("should have 'Native Bridge' button link on homepage", async ({ clickNativeBridgeButton }) => {
+    test("should have 'Native Bridge' button link on homepage", async ({
+      clickNativeBridgeButton,
+      clickFirstVisitModalConfirmButton,
+    }) => {
+      await clickFirstVisitModalConfirmButton();
       const nativeBridgeBtn = await clickNativeBridgeButton();
+      await clickFirstVisitModalConfirmButton();
       await expect(nativeBridgeBtn).toBeVisible();
     });
 
-    test("should connect MetaMask to dapp correctly", async ({ connectMetamaskToDapp, clickNativeBridgeButton }) => {
+    test("should connect MetaMask to dapp correctly", async ({
+      connectMetamaskToDapp,
+      clickNativeBridgeButton,
+      clickFirstVisitModalConfirmButton,
+    }) => {
+      await clickFirstVisitModalConfirmButton();
       await clickNativeBridgeButton();
+      await clickFirstVisitModalConfirmButton();
       await connectMetamaskToDapp();
     });
 
@@ -31,9 +42,12 @@ describe("L1 > L2 via Native Bridge", () => {
       connectMetamaskToDapp,
       clickNativeBridgeButton,
       openNativeBridgeTransactionHistory,
+      clickFirstVisitModalConfirmButton,
     }) => {
+      await clickFirstVisitModalConfirmButton();
       await connectMetamaskToDapp();
       await clickNativeBridgeButton();
+      await clickFirstVisitModalConfirmButton();
       await openNativeBridgeTransactionHistory();
 
       const txHistoryHeading = page.getByRole("heading").filter({ hasText: "Transaction History" });
@@ -46,9 +60,12 @@ describe("L1 > L2 via Native Bridge", () => {
       clickNativeBridgeButton,
       openNativeBridgeFormSettings,
       toggleShowTestNetworksInNativeBridgeForm,
+      clickFirstVisitModalConfirmButton,
     }) => {
+      await clickFirstVisitModalConfirmButton();
       await connectMetamaskToDapp();
       await clickNativeBridgeButton();
+      await clickFirstVisitModalConfirmButton();
       await openNativeBridgeFormSettings();
       await toggleShowTestNetworksInNativeBridgeForm();
 
@@ -66,11 +83,13 @@ describe("L1 > L2 via Native Bridge", () => {
       toggleShowTestNetworksInNativeBridgeForm,
       selectTokenAndInputAmount,
       switchToEthereumMainnet,
+      clickFirstVisitModalConfirmButton,
     }) => {
       test.setTimeout(60_000);
-
+      await clickFirstVisitModalConfirmButton();
       await connectMetamaskToDapp();
       await clickNativeBridgeButton();
+      await clickFirstVisitModalConfirmButton();
       await openNativeBridgeFormSettings();
       await toggleShowTestNetworksInNativeBridgeForm();
 
@@ -108,10 +127,13 @@ describe("L1 > L2 via Native Bridge", () => {
       doInitiateBridgeTransaction,
       openNativeBridgeTransactionHistory,
       closeNativeBridgeTransactionHistory,
+      clickFirstVisitModalConfirmButton,
     }) => {
       // Setup testnet UI
+      await clickFirstVisitModalConfirmButton();
       await connectMetamaskToDapp();
       await clickNativeBridgeButton();
+      await clickFirstVisitModalConfirmButton();
       await openNativeBridgeFormSettings();
       await toggleShowTestNetworksInNativeBridgeForm();
 
@@ -140,10 +162,13 @@ describe("L1 > L2 via Native Bridge", () => {
       openNativeBridgeTransactionHistory,
       closeNativeBridgeTransactionHistory,
       doTokenApprovalIfNeeded,
+      clickFirstVisitModalConfirmButton,
     }) => {
       // Setup testnet UI
+      await clickFirstVisitModalConfirmButton();
       await connectMetamaskToDapp();
       await clickNativeBridgeButton();
+      await clickFirstVisitModalConfirmButton();
       await openNativeBridgeFormSettings();
       await toggleShowTestNetworksInNativeBridgeForm();
 
@@ -172,9 +197,12 @@ describe("L1 > L2 via Native Bridge", () => {
       switchToLineaSepolia,
       doClaimTransaction,
       waitForTxListUpdateForClaimTx,
+      clickFirstVisitModalConfirmButton,
     }) => {
+      await clickFirstVisitModalConfirmButton();
       await connectMetamaskToDapp();
       await clickNativeBridgeButton();
+      await clickFirstVisitModalConfirmButton();
       await openNativeBridgeFormSettings();
       await toggleShowTestNetworksInNativeBridgeForm();