test: [POM] Migrate bitcoin send e2e tests to POM (#29515)

## **Description**

- Migrate send transaction e2e tests with bitcoin account to POM
- Create related Bitcoin transaction page class and methods. 
 

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27155?quickstart=1)

## **Related issues**


## **Manual testing steps**
Check code readability, make sure tests pass.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: chloeYue

test/e2e/flask/btc/btc-send.spec.ts

@@ -1,98 +1,51 @@
 import { strict as assert } from 'assert';
 import { Suite } from 'mocha';
-import { Driver } from '../../webdriver/driver';
 import { DEFAULT_BTC_ACCOUNT, DEFAULT_BTC_BALANCE } from '../../constants';
-import {
-  getTransactionRequest,
-  SendFlowPlaceHolders,
-  withBtcAccountSnap,
-} from './common-btc';
-
-export async function startSendFlow(driver: Driver, recipient?: string) {
-  // Wait a bit so the MultichainRatesController is able to fetch BTC -> USD rates.
-  await driver.delay(1000);
-
-  // Start the send flow.
-  const sendButton = await driver.waitForSelector({
-    text: 'Send',
-    tag: 'button',
-    css: '[data-testid="coin-overview-send"]',
-  });
-  // FIXME: Firefox test is flaky without this delay. The send flow doesn't start properly.
-  if (driver.browser === 'firefox') {
-    await driver.delay(1000);
-  }
-  await sendButton.click();
-
-  // See the review button is disabled by default.
-  await driver.waitForSelector({
-    text: 'Review',
-    tag: 'button',
-    css: '[disabled]',
-  });
-
-  if (recipient) {
-    // Set the recipient address (if any).
-    await driver.pasteIntoField(
-      `input[placeholder="${SendFlowPlaceHolders.RECIPIENT}"]`,
-      recipient,
-    );
-  }
-}
+import ActivityListPage from '../../page-objects/pages/home/activity-list';
+import BitcoinSendPage from '../../page-objects/pages/send/bitcoin-send-page';
+import BitcoinHomepage from '../../page-objects/pages/home/bitcoin-homepage';
+import BitcoinReviewTxPage from '../../page-objects/pages/send/bitcoin-review-tx-page';
+import { getTransactionRequest, withBtcAccountSnap } from './common-btc';
 
 describe('BTC Account - Send', function (this: Suite) {
-  it('can send complete the send flow', async function () {
+  it('can complete the send flow', async function () {
     await withBtcAccountSnap(
       { title: this.test?.fullTitle() },
       async (driver, mockServer) => {
-        await startSendFlow(driver, DEFAULT_BTC_ACCOUNT);
+        const homePage = new BitcoinHomepage(driver);
+        await homePage.check_pageIsLoaded();
+        await homePage.check_isExpectedBitcoinBalanceDisplayed(
+          DEFAULT_BTC_BALANCE,
+        );
+        await homePage.startSendFlow();
 
+        // Set the recipient address and amount
+        const bitcoinSendPage = new BitcoinSendPage(driver);
+        await bitcoinSendPage.check_pageIsLoaded();
+        await bitcoinSendPage.fillRecipientAddress(DEFAULT_BTC_ACCOUNT);
         // TODO: Remove delay here. There is a race condition if the amount and address are set too fast.
         await driver.delay(1000);
-
-        // Set the amount to send.
         const mockAmountToSend = '0.5';
-        await driver.pasteIntoField(
-          `input[placeholder="${SendFlowPlaceHolders.AMOUNT}"]`,
-          mockAmountToSend,
-        );
-
-        // From here, the "summary panel" should have some information about the fees and total.
-        await driver.waitForSelector({
-          text: 'Total',
-          tag: 'p',
-        });
+        await bitcoinSendPage.fillAmount(mockAmountToSend);
 
-        // The review button will become available.
-        const snapReviewButton = await driver.findClickableElement({
-          text: 'Review',
-          tag: 'button',
-          css: '.snap-ui-renderer__footer-button',
-        });
-        assert.equal(await snapReviewButton.isEnabled(), true);
-        await snapReviewButton.click();
+        // Click the review button
+        await bitcoinSendPage.clickReviewButton();
 
         // TODO: There isn't any check for the fees and total amount. This requires calculating the vbytes used in a transaction dynamically.
         // We already have unit tests for these calculations on the Snap.
-
         // ------------------------------------------------------------------------------
         // From here, we have moved to the confirmation screen (second part of the flow).
 
-        // We should be able to send the transaction right away.
-        const snapSendButton = await driver.waitForSelector({
-          text: 'Send',
-          tag: 'button',
-          css: '.snap-ui-renderer__footer-button',
-        });
-        assert.equal(await snapSendButton.isEnabled(), true);
-        await snapSendButton.click();
-
-        // Check that we are selecting the "Activity tab" right after the send.
-        await driver.waitForSelector({
-          tag: 'div',
-          text: 'Bitcoin activity is not supported',
-        });
+        // Click the send transaction button
+        const bitcoinReviewTxPage = new BitcoinReviewTxPage(driver);
+        await bitcoinReviewTxPage.check_pageIsLoaded();
+        await bitcoinReviewTxPage.clickSendButton();
 
+        // Check that we are on the activity list page and the warning message is displayed
+        await homePage.check_pageIsLoaded();
+        await new ActivityListPage(driver).check_warningMessage(
+          'Bitcoin activity is not supported',
+        );
         const transaction = await getTransactionRequest(mockServer);
         assert(transaction !== undefined);
       },
@@ -103,58 +56,43 @@ describe('BTC Account - Send', function (this: Suite) {
     await withBtcAccountSnap(
       { title: this.test?.fullTitle() },
       async (driver, mockServer) => {
-        await startSendFlow(driver, DEFAULT_BTC_ACCOUNT);
+        const homePage = new BitcoinHomepage(driver);
+        await homePage.check_pageIsLoaded();
+        await homePage.check_isExpectedBitcoinBalanceDisplayed(
+          DEFAULT_BTC_BALANCE,
+        );
+        await homePage.startSendFlow();
 
+        // Use the max spendable amount of that account
+        const bitcoinSendPage = new BitcoinSendPage(driver);
+        await bitcoinSendPage.check_pageIsLoaded();
+        await bitcoinSendPage.fillRecipientAddress(DEFAULT_BTC_ACCOUNT);
         // TODO: Remove delay here. There is a race condition if the amount and address are set too fast.
         await driver.delay(1000);
-
-        // Use the max spendable amount of that account.
-        await driver.clickElement({
-          text: 'Max',
-          tag: 'button',
-        });
+        await bitcoinSendPage.selectMaxAmount();
+        await bitcoinSendPage.check_amountIsDisplayed(
+          `${DEFAULT_BTC_BALANCE} BTC`,
+        );
 
         // From here, the "summary panel" should have some information about the fees and total.
-        await driver.waitForSelector({
-          text: 'Total',
-          tag: 'p',
-        });
-
-        await driver.waitForSelector({
-          text: `${DEFAULT_BTC_BALANCE} BTC`,
-          tag: 'p',
-        });
-
-        // The review button will become available.
-        const snapReviewButton = await driver.findClickableElement({
-          text: 'Review',
-          tag: 'button',
-          css: '.snap-ui-renderer__footer-button',
-        });
-        assert.equal(await snapReviewButton.isEnabled(), true);
-        await snapReviewButton.click();
+        await bitcoinSendPage.clickReviewButton();
 
         // TODO: There isn't any check for the fees and total amount. This requires calculating the vbytes used in a transaction dynamically.
         // We already have unit tests for these calculations on the snap.
 
         // ------------------------------------------------------------------------------
         // From here, we have moved to the confirmation screen (second part of the flow).
 
-        // We should be able to send the transaction right away.
-        const snapSendButton = await driver.waitForSelector({
-          text: 'Send',
-          tag: 'button',
-          css: '.snap-ui-renderer__footer-button',
-        });
-        assert.equal(await snapSendButton.isEnabled(), true);
-        await snapSendButton.click();
-
-        // Check that we are selecting the "Activity tab" right after the send.
-        await driver.waitForSelector({
-          tag: 'div',
-          text: 'Bitcoin activity is not supported',
-        });
+        // Click the send transaction button
+        const bitcoinReviewTxPage = new BitcoinReviewTxPage(driver);
+        await bitcoinReviewTxPage.check_pageIsLoaded();
+        await bitcoinReviewTxPage.clickSendButton();
 
+        // Check that we are on the activity list page and the warning message is displayed
+        await homePage.check_pageIsLoaded();
+        await new ActivityListPage(driver).check_warningMessage(
+          'Bitcoin activity is not supported',
+        );
         const transaction = await getTransactionRequest(mockServer);
         assert(transaction !== undefined);
       },

test/e2e/flask/btc/common-btc.ts

@@ -18,12 +18,6 @@ import HeaderNavbar from '../../page-objects/pages/header-navbar';
 
 const QUICKNODE_URL_REGEX = /^https:\/\/.*\.btc.*\.quiknode\.pro(\/|$)/u;
 
-export enum SendFlowPlaceHolders {
-  AMOUNT = 'Enter amount to send',
-  RECIPIENT = 'Enter receiving address',
-  LOADING = 'Preparing transaction',
-}
-
 export function btcToSats(btc: number): number {
   // Watchout, we're not using BigNumber(s) here (but that's ok for test purposes)
   return btc * SATS_IN_1_BTC;

test/e2e/page-objects/pages/home/activity-list.ts

@@ -151,6 +151,23 @@ class ActivityListPage {
   async check_noTxInActivity(): Promise<void> {
     await this.driver.assertElementNotPresent(this.completedTransactions);
   }
+
+  /**
+   * Verifies that a specific warning message is displayed on the activity list.
+   *
+   * @param warningText - The expected warning text to validate against.
+   * @returns A promise that resolves if the warning message matches the expected text.
+   * @throws Assertion error if the warning message does not match the expected text.
+   */
+  async check_warningMessage(warningText: string): Promise<void> {
+    console.log(
+      `Check warning message "${warningText}" is displayed on activity list`,
+    );
+    await this.driver.waitForSelector({
+      tag: 'div',
+      text: warningText,
+    });
+  }
 }
 
 export default ActivityListPage;

test/e2e/page-objects/pages/home/bitcoin-homepage.ts

@@ -28,6 +28,10 @@ class BitcoinHomepage extends HomePage {
     console.log('Bitcoin homepage is loaded');
   }
 
+  async startSendFlow(): Promise<void> {
+    await this.driver.clickElement(this.sendButton);
+  }
+
   /**
    * Checks if the bridge button is enabled on bitcoin account homepage.
    *

test/e2e/page-objects/pages/send/bitcoin-review-tx-page.ts

@@ -0,0 +1,42 @@
+import { Driver } from '../../../webdriver/driver';
+
+class BitcoinReviewTxPage {
+  private driver: Driver;
+
+  private readonly reviewPageTitle = {
+    text: 'Review',
+    tag: 'h4',
+  };
+
+  private readonly sendButton = {
+    text: 'Send',
+    tag: 'span',
+  };
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.reviewPageTitle,
+        this.sendButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for bitcoin review tx page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Bitcoin review tx page is loaded');
+  }
+
+  async clickSendButton() {
+    console.log('Click send button on bitcoin review tx page');
+    await this.driver.clickElementAndWaitToDisappear(this.sendButton);
+  }
+}
+
+export default BitcoinReviewTxPage;

test/e2e/page-objects/pages/send/bitcoin-send-page.ts

@@ -0,0 +1,82 @@
+import { Driver } from '../../../webdriver/driver';
+
+class BitcoinSendPage {
+  private driver: Driver;
+
+  private readonly amountInputField = `input[placeholder="Enter amount to send"]`;
+
+  private readonly maxAmountButton = {
+    text: 'Max',
+    tag: 'button',
+  };
+
+  private readonly recipientInputField = `input[placeholder="Enter receiving address"]`;
+
+  private readonly reviewButton = {
+    text: 'Review',
+    tag: 'span',
+  };
+
+  private readonly totalFee = {
+    text: 'Total',
+    tag: 'p',
+  };
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.recipientInputField,
+        this.amountInputField,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for bitcoin send page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Bitcoin send page is loaded');
+  }
+
+  async clickReviewButton() {
+    console.log('Click review button on send bitcoin screen');
+    await this.driver.waitForSelector(this.totalFee);
+    await this.driver.clickElement(this.reviewButton);
+  }
+
+  async fillAmount(amount: string): Promise<void> {
+    console.log(`Fill amount input with ${amount} on send bitcoin screen`);
+    await this.driver.pasteIntoField(this.amountInputField, amount);
+  }
+
+  async fillRecipientAddress(recipient: string) {
+    console.log(
+      `Fill recipient address with ${recipient} on send bitcoin screen`,
+    );
+    await this.driver.pasteIntoField(this.recipientInputField, recipient);
+  }
+
+  async selectMaxAmount() {
+    console.log('Select max amount on send bitcoin screen');
+    await this.driver.clickElement(this.maxAmountButton);
+  }
+
+  /**
+   * Verifies that a specific amount is displayed on the send bitcoin screen.
+   *
+   * @param amount - The expected amount to validate.
+   */
+  async check_amountIsDisplayed(amount: string) {
+    console.log(`Check amount ${amount} is displayed on send bitcoin screen`);
+    await this.driver.waitForSelector({
+      text: amount,
+      tag: 'p',
+    });
+  }
+}
+
+export default BitcoinSendPage;