test: migrate signature redesign tests to page object model (#28538)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Migrates the existing signature redesign e2e tests to use page object
model.
Adds the relevant pages and updates the tests using the newly created
pages.

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

## **Related issues**

Fixes:
[#28540](#28540)

## **Manual testing steps**

1. Go to this page...
2.
3.

## **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**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

test/e2e/page-objects/pages/confirmations/redesign/accountDetailsModal.ts

@@ -0,0 +1,42 @@
+import { Driver } from '../../../../webdriver/driver';
+import { RawLocator } from '../../../common';
+import Confirmation from './confirmation';
+
+class AccountDetailsModal extends Confirmation {
+  private accountBalanceInfo: RawLocator;
+
+  private addressCopyButton: RawLocator;
+
+  private accountDetailsModalCloseButton: RawLocator;
+
+  constructor(driver: Driver) {
+    super(driver);
+
+    this.driver = driver;
+
+    this.accountBalanceInfo =
+      '[data-testid="confirmation-account-details-modal__account-balance"]';
+
+    this.addressCopyButton = '[data-testid="address-copy-button-text"]';
+
+    this.accountDetailsModalCloseButton =
+      '[data-testid="confirmation-account-details-modal__close-button"]';
+  }
+
+  async clickAddressCopyButton() {
+    await this.driver.clickElement(this.addressCopyButton);
+  }
+
+  async clickAccountDetailsModalCloseButton() {
+    await this.driver.clickElement(this.accountDetailsModalCloseButton);
+  }
+
+  async assertHeaderInfoBalance(balance: string) {
+    await this.driver.waitForSelector({
+      css: this.accountBalanceInfo.toString(),
+      text: `${balance} ETH`,
+    });
+  }
+}
+
+export default AccountDetailsModal;

test/e2e/page-objects/pages/confirmations/redesign/confirmation.ts

@@ -1,3 +1,4 @@
+import { Key } from 'selenium-webdriver';
 import { Driver } from '../../../../webdriver/driver';
 import { RawLocator } from '../../../common';
 
@@ -8,11 +9,25 @@ class Confirmation {
 
   private footerConfirmButton: RawLocator;
 
+  private headerAccountDetailsButton: RawLocator;
+
+  private footerCancelButton: RawLocator;
+
+  private sectionCollapseButton = '[data-testid="sectionCollapseButton"]';
+
+  private inlineAlertButton = {
+    css: '[data-testid="inline-alert"]',
+    text: 'Alert',
+  };
+
   constructor(driver: Driver) {
     this.driver = driver;
 
     this.scrollToBottomButton = '.confirm-scroll-to-bottom__button';
     this.footerConfirmButton = '[data-testid="confirm-footer-button"]';
+    this.headerAccountDetailsButton =
+      '[data-testid="header-info__account-details-button"]';
+    this.footerCancelButton = '[data-testid="confirm-footer-cancel-button"]';
   }
 
   async clickScrollToBottomButton() {
@@ -22,6 +37,27 @@ class Confirmation {
   async clickFooterConfirmButton() {
     await this.driver.clickElement(this.footerConfirmButton);
   }
+
+  async clickHeaderAccountDetailsButton() {
+    const accountDetailsButton = await this.driver.findElement(
+      this.headerAccountDetailsButton,
+    );
+    await accountDetailsButton.sendKeys(Key.RETURN);
+  }
+
+  async clickFooterCancelButtonAndAndWaitForWindowToClose() {
+    await this.driver.clickElementAndWaitForWindowToClose(
+      this.footerCancelButton,
+    );
+  }
+
+  async clickCollapseSectionButton() {
+    await this.driver.clickElement(this.sectionCollapseButton);
+  }
+
+  async clickInlineAlert() {
+    await this.driver.clickElement(this.inlineAlertButton);
+  }
 }
 
 export default Confirmation;

test/e2e/page-objects/pages/confirmations/redesign/permit-confirmation.ts

@@ -0,0 +1,142 @@
+import { strict as assert } from 'assert';
+import { Driver } from '../../../../webdriver/driver';
+import { DAPP_HOST_ADDRESS } from '../../../../constants';
+import Confirmation from './confirmation';
+
+export default class PermitConfirmation extends Confirmation {
+  constructor(driver: Driver) {
+    super(driver);
+
+    this.driver = driver;
+  }
+
+  private originSelector = { text: DAPP_HOST_ADDRESS };
+
+  private contractPetNameSelector = {
+    css: '.name__value',
+    text: '0xCcCCc...ccccC',
+  };
+
+  private primaryTypeSelector = { text: 'Permit' };
+
+  private ownerSelector = { css: '.name__name', text: 'Account 1' };
+
+  private spenderSelector = { css: '.name__value', text: '0x5B38D...eddC4' };
+
+  private valueSelector = { text: '3,000' };
+
+  private nonceSelector = { text: '0' };
+
+  private deadlineSelector = { text: '09 June 3554, 16:53' };
+
+  private nftContractPetNameSelector = {
+    css: '.name__value',
+    text: '0x581c3...45947',
+  };
+
+  private nftTitle = { text: 'Withdrawal request' };
+
+  private nftDescription = {
+    text: 'This site wants permission to withdraw your NFTs',
+  };
+
+  private nftPrimaryType = { text: 'Permit' };
+
+  private nftSpender = { css: '.name__value', text: '0x581c3...45947' };
+
+  private nftTokenId = { text: '3606393' };
+
+  private nftNonce = { text: '0' };
+
+  private nftDeadline = { text: '23 December 2024, 23:03' };
+
+  async verifyOrigin() {
+    const origin = await this.driver.findElement(this.originSelector);
+    assert.ok(origin, 'Origin element is missing or incorrect');
+  }
+
+  async verifyContractPetName() {
+    const contractPetName = await this.driver.findElement(
+      this.contractPetNameSelector,
+    );
+    assert.ok(
+      contractPetName,
+      'Contract Pet Name element is missing or incorrect',
+    );
+  }
+
+  async verifyPrimaryType() {
+    const primaryType = await this.driver.findElement(this.primaryTypeSelector);
+    assert.ok(primaryType, 'Primary Type element is missing or incorrect');
+  }
+
+  async verifyOwner() {
+    const owner = await this.driver.findElement(this.ownerSelector);
+    assert.ok(owner, 'Owner element is missing or incorrect');
+  }
+
+  async verifySpender() {
+    const spender = await this.driver.findElement(this.spenderSelector);
+    assert.ok(spender, 'Spender element is missing or incorrect');
+  }
+
+  async verifyValue() {
+    const value = await this.driver.findElement(this.valueSelector);
+    assert.ok(value, 'Value element is missing or incorrect');
+  }
+
+  async verifyNonce() {
+    const nonce = await this.driver.findElement(this.nonceSelector);
+    assert.ok(nonce, 'Nonce element is missing or incorrect');
+  }
+
+  async verifyDeadline() {
+    const deadline = await this.driver.findElement(this.deadlineSelector);
+    assert.ok(deadline, 'Deadline element is missing or incorrect');
+  }
+
+  async verifyNftContractPetName() {
+    const nftContractPetName = await this.driver.findElement(
+      this.nftContractPetNameSelector,
+    );
+    assert.ok(
+      nftContractPetName,
+      'NFT Contract Pet Name element is missing or incorrect',
+    );
+  }
+
+  async verifyNftTitle() {
+    const element = await this.driver.findElement(this.nftTitle);
+    assert.ok(element, 'NFT Title element is missing or incorrect');
+  }
+
+  async verifyNftDescription() {
+    const element = await this.driver.findElement(this.nftDescription);
+    assert.ok(element, 'NFT Description element is missing or incorrect');
+  }
+
+  async verifyNftPrimaryType() {
+    const element = await this.driver.findElement(this.nftPrimaryType);
+    assert.ok(element, 'NFT PrimaryType element is missing or incorrect');
+  }
+
+  async verifyNftSpender() {
+    const element = await this.driver.findElement(this.nftSpender);
+    assert.ok(element, 'NFT Spender element is missing or incorrect');
+  }
+
+  async verifyNftTokenId() {
+    const element = await this.driver.findElement(this.nftTokenId);
+    assert.ok(element, 'NFT TokenId element is missing or incorrect');
+  }
+
+  async verifyNftNonce() {
+    const element = await this.driver.findElement(this.nftNonce);
+    assert.ok(element, 'NFT Nonce element is missing or incorrect');
+  }
+
+  async verifyNftDeadline() {
+    const element = await this.driver.findElement(this.nftDeadline);
+    assert.ok(element, 'NFT Deadline element is missing or incorrect');
+  }
+}

test/e2e/page-objects/pages/confirmations/redesign/personal-sign-confirmation.ts

@@ -0,0 +1,34 @@
+import { strict as assert } from 'assert';
+import { DAPP_HOST_ADDRESS } from '../../../../constants';
+import { Driver } from '../../../../webdriver/driver';
+import Confirmation from './confirmation';
+
+export default class PersonalSignConfirmation extends Confirmation {
+  constructor(driver: Driver) {
+    super(driver);
+
+    this.driver = driver;
+  }
+
+  private originSelector = { text: DAPP_HOST_ADDRESS };
+
+  private messageSelector = { text: 'Example `personal_sign` message' };
+
+  private siweMessage = {
+    text: 'I accept the MetaMask Terms of Service: https://community.metamask.io/tos',
+  };
+
+  async verifyOrigin() {
+    const origin = await this.driver.findElement(this.originSelector);
+    assert.ok(origin, 'Origin element is missing or incorrect');
+  }
+
+  async verifyMessage() {
+    const message = this.driver.findElement(this.messageSelector);
+    assert.ok(await message);
+  }
+
+  async verifySiweMessage() {
+    this.driver.findElement(this.siweMessage);
+  }
+}

test/e2e/page-objects/pages/confirmations/redesign/sign-typed-data-confirmation.ts

@@ -0,0 +1,92 @@
+import { strict as assert } from 'assert';
+import { DAPP_HOST_ADDRESS } from '../../../../constants';
+import { Driver } from '../../../../webdriver/driver';
+import Confirmation from './confirmation';
+
+export default class SignTypedData extends Confirmation {
+  constructor(driver: Driver) {
+    super(driver);
+
+    this.driver = driver;
+  }
+
+  private origin = { text: DAPP_HOST_ADDRESS };
+
+  private signTypedDataMessage = { text: 'Hi, Alice!' };
+
+  private contract = { css: '.name__value', text: '0xCcCCc...ccccC' };
+
+  private primaryType = { text: 'Mail' };
+
+  private fromName = { text: 'Cow' };
+
+  private fromAddress = { css: '.name__value', text: '0xCD2a3...DD826' };
+
+  private toName = { text: 'Bob' };
+
+  private toAddress = { css: '.name__value', text: '0xbBbBB...bBBbB' };
+
+  private contents = { text: 'Hello, Bob!' };
+
+  private attachment = { text: '0x' };
+
+  private toAddressNum2 = { css: '.name__value', text: '0xB0B0b...00000' };
+
+  async verifyOrigin() {
+    const origin = await this.driver.findElement(this.origin);
+    assert.ok(origin, 'Origin element is missing or incorrect');
+  }
+
+  async verifySignTypedDataMessage() {
+    const message = this.driver.findElement(this.signTypedDataMessage);
+    assert.ok(await message);
+  }
+
+  async verifyContractPetName() {
+    const contractPetName = await this.driver.findElement(this.contract);
+    assert.ok(
+      contractPetName,
+      'Contract pet name element is missing or incorrect',
+    );
+  }
+
+  async verifyPrimaryType() {
+    const primaryType = await this.driver.findElement(this.primaryType);
+    assert.ok(primaryType, 'Primary type element is missing or incorrect');
+  }
+
+  async verifyFromName() {
+    const fromName = await this.driver.findElement(this.fromName);
+    assert.ok(fromName, 'From name element is missing or incorrect');
+  }
+
+  async verifyFromAddress() {
+    const fromAddress = await this.driver.findElement(this.fromAddress);
+    assert.ok(fromAddress, 'From address element is missing or incorrect');
+  }
+
+  async verifyToName() {
+    const toName = await this.driver.findElement(this.toName);
+    assert.ok(toName, 'To name element is missing or incorrect');
+  }
+
+  async verifyToAddress() {
+    const toAddress = await this.driver.findElement(this.toAddress);
+    assert.ok(toAddress, 'To address element is missing or incorrect');
+  }
+
+  async verifyContents() {
+    const contents = await this.driver.findElement(this.contents);
+    assert.ok(contents, 'Contents element is missing or incorrect');
+  }
+
+  async verifyAttachment() {
+    const attachment = await this.driver.findElement(this.attachment);
+    assert.ok(attachment, 'Attachment element is missing or incorrect');
+  }
+
+  async verifyToAddressNum2() {
+    const toAddressNum2 = await this.driver.findElement(this.toAddressNum2);
+    assert.ok(toAddressNum2, 'To Address num2 element is missing or incorrect');
+  }
+}