feat: display full terms of service during onboarding

test/e2e/page-objects/flows/onboarding.flow.ts

@@ -35,7 +35,6 @@ export const createNewWalletOnboardingFlow = async ({
   }
   const startOnboardingPage = new StartOnboardingPage(driver);
   await startOnboardingPage.check_pageIsLoaded();
-  await startOnboardingPage.checkTermsCheckbox();
   await startOnboardingPage.clickCreateWalletButton();
 
   const onboardingMetricsPage = new OnboardingMetricsPage(driver);
@@ -80,7 +79,6 @@ export const importSRPOnboardingFlow = async ({
 
   const startOnboardingPage = new StartOnboardingPage(driver);
   await startOnboardingPage.check_pageIsLoaded();
-  await startOnboardingPage.checkTermsCheckbox();
   await startOnboardingPage.clickImportWalletButton();
 
   const onboardingMetricsPage = new OnboardingMetricsPage(driver);

test/e2e/page-objects/pages/onboarding/start-onboarding-page.ts

@@ -14,18 +14,20 @@ class StartOnboardingPage {
     tag: 'h2',
   };
 
+  private readonly termsModal = '[data-testid="terms-of-use-modal-body"]';
+
   private readonly termsCheckbox = '[data-testid="onboarding-terms-checkbox"]';
 
+  private readonly termsConfirmButton =
+    '[data-testid="onboarding-terms-accept"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
 
   async check_pageIsLoaded(): Promise<void> {
     try {
-      await this.driver.waitForMultipleSelectors([
-        this.startMessage,
-        this.termsCheckbox,
-      ]);
+      await this.driver.waitForMultipleSelectors([this.startMessage]);
     } catch (e) {
       console.log(
         'Timeout while waiting for start onboarding page to be loaded',
@@ -37,15 +39,32 @@ class StartOnboardingPage {
   }
 
   async checkTermsCheckbox(): Promise<void> {
+    await this.driver.waitForSelector(this.termsModal);
+
+    await this.driver.executeScript(`
+      const modalBody = document.querySelector('[data-testid="terms-of-use-modal-body"]');
+      if (modalBody) {
+        modalBody.scrollTo({ top: modalBody.scrollHeight, behavior: 'instant' });
+      }
+    `);
+
+    await this.driver.findClickableElement(this.termsCheckbox);
     await this.driver.clickElement(this.termsCheckbox);
+
+    await this.driver.findClickableElement(this.termsConfirmButton);
+    await this.driver.clickElement(this.termsConfirmButton);
   }
 
   async clickCreateWalletButton(): Promise<void> {
-    await this.driver.clickElementAndWaitToDisappear(this.createWalletButton);
+    await this.driver.findClickableElement(this.createWalletButton);
+    await this.driver.clickElement(this.createWalletButton);
+    await this.checkTermsCheckbox();
   }
 
   async clickImportWalletButton(): Promise<void> {
-    await this.driver.clickElementAndWaitToDisappear(this.importWalletButton);
+    await this.driver.findClickableElement(this.importWalletButton);
+    await this.driver.clickElement(this.importWalletButton);
+    await this.checkTermsCheckbox();
   }
 }
 

test/e2e/playwright/shared/pageObjects/extension-page.ts

@@ -17,7 +17,9 @@ export class ChromeExtensionPage {
     await context.waitForEvent('page');
     const pages = context.pages();
     const page = pages[pages.length - 1]; // return last tab
-    await page.waitForSelector('text=/I agree to MetaMask/');
+    await page
+      .getByTestId('onboarding-create-wallet')
+      .waitFor({ state: 'visible' });
     return page;
   }
 }

test/e2e/playwright/shared/pageObjects/signup-page.ts

@@ -49,6 +49,8 @@ export class SignUpPage {
 
   readonly skipSrpBackupBtn: Locator;
 
+  readonly termsModalBody: Locator;
+
   readonly popOverBtn: Locator;
 
   constructor(page: Page) {
@@ -79,13 +81,22 @@ export class SignUpPage {
     this.nextBtn = page.getByTestId('pin-extension-next');
     this.agreeBtn = page.locator('button:has-text("I agree")');
     this.enableBtn = page.locator('button:has-text("Enable")');
+    this.termsModalBody = page.getByTestId('terms-of-use-modal-body');
     this.popOverBtn = page.getByTestId('popover-close');
   }
 
-  async importWallet() {
+  private async handleTermsModal() {
+    await this.termsModalBody.waitFor({ state: 'visible' });
+    for (let i = 0; i < 1000; i++) {
+      await this.termsModalBody.press('ArrowDown');
+    }
     await this.agreeTandCCheck.click();
+    await this.page.getByTestId('onboarding-terms-accept').click();
+  }
+
+  async importWallet() {
     await this.importWalletBtn.click();
-    await this.agreeBtn.click();
+    await this.handleTermsModal();
 
     const seeds = SEED_PHRASE?.trim().split(/\s+/u);
     for (const [index, element] of (seeds as string[]).entries()) {
@@ -104,8 +115,8 @@ export class SignUpPage {
   }
 
   async createWallet() {
-    await this.agreeTandCCheck.click();
     await this.createWalletBtn.click();
+    await this.handleTermsModal();
     await this.metametricsBtn.click();
     await this.passwordTxt.fill(ACCOUNT_PASSWORD as string);
     await this.passwordConfirmTxt.fill(ACCOUNT_PASSWORD as string);

test/e2e/tests/account/incremental-security.spec.js

@@ -1,6 +1,8 @@
 const { strict: assert } = require('assert');
 const { convertToHexValue, withFixtures, openDapp } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
+const StartOnboardingPage =
+  require('../../page-objects/pages/onboarding/start-onboarding-page').default;
 
 const WALLET_PASSWORD = 'correct horse battery staple';
 
@@ -31,11 +33,10 @@ describe('Incremental Security', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        // agree to terms of use
-        await driver.clickElement('[data-testid="onboarding-terms-checkbox"]');
-
         // welcome
-        await driver.clickElement('[data-testid="onboarding-create-wallet"]');
+        const startOnboardingPage = new StartOnboardingPage(driver);
+        await startOnboardingPage.check_pageIsLoaded();
+        await startOnboardingPage.clickCreateWalletButton();
 
         // metrics
         await driver.clickElement('[data-testid="metametrics-no-thanks"]');

test/e2e/tests/metrics/app-installed.spec.ts

@@ -47,7 +47,6 @@ describe('App Installed Events @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickCreateWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);
@@ -81,7 +80,6 @@ describe('App Installed Events @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickCreateWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);

test/e2e/tests/onboarding/onboarding.spec.ts

@@ -78,7 +78,6 @@ describe('MetaMask onboarding @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickImportWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);
@@ -106,7 +105,6 @@ describe('MetaMask onboarding @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickImportWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);
@@ -131,7 +129,6 @@ describe('MetaMask onboarding @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickCreateWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);

test/e2e/tests/responsive-ui/metamask-responsive-ui.spec.js

@@ -8,6 +8,8 @@ const {
   withFixtures,
 } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
+const StartOnboardingPage =
+  require('../../page-objects/pages/onboarding/start-onboarding-page').default;
 
 describe('MetaMask Responsive UI', function () {
   it('Creating a new wallet @no-mmi', async function () {
@@ -22,11 +24,9 @@ describe('MetaMask Responsive UI', function () {
       async ({ driver }) => {
         await driver.navigate();
 
-        // agree to terms of use
-        await driver.clickElement('[data-testid="onboarding-terms-checkbox"]');
-
-        // welcome
-        await driver.clickElement('[data-testid="onboarding-create-wallet"]');
+        const startOnboardingPage = new StartOnboardingPage(driver);
+        await startOnboardingPage.check_pageIsLoaded();
+        await startOnboardingPage.clickCreateWalletButton();
 
         // metrics
         await driver.clickElement('[data-testid="metametrics-no-thanks"]');