test(extension): [LW-8420] trezor emulator automation (#551)

bslabiak · web-flow · commit 39792b1079c0 · 2023-11-13T16:12:00.000+01:00
* test(extension): [LW-6869] test automation for trezor

* test(extension): integrate trezor tc with docker implementation

* test(extension): change step name

* test(extension): add connecting trezor step and description

* test(extension): remove old images

* test(extension): remove web security disabling

* test(extension): apply comment changes
diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStep.tsx b/packages/core/src/ui/components/WalletSetup/WalletSetupConnectHardwareWalletStep.tsx
@@ -71,7 +71,7 @@ export const WalletSetupConnectHardwareWalletStep = ({
                 [styles.hdWallet]: true,
                 [styles.hdWalletActive]: isButtonActive(wallet)
               })}
-              data-testid="connect-hardware-wallet-button-ledger"
+              data-testid={`connect-hardware-wallet-button-${wallet.toLowerCase()}`}
             >
               {wallet in logoMap ? (
                 <Icon className={styles.logo} component={logoMap[wallet as keyof typeof logoMap]} />
diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupWalletNameStep.tsx b/packages/core/src/ui/components/WalletSetup/WalletSetupWalletNameStep.tsx
@@ -55,6 +55,7 @@ export const WalletSetupWalletNameStep = ({
     >
       <p className={styles.subtitle}>{translations.chooseName}</p>
       <Input
+        dataTestId="wallet-setup-register-name-input"
         className={styles.inputName}
         label={translations.walletName}
         value={walletName}
diff --git a/packages/e2e-tests/README.md b/packages/e2e-tests/README.md
@@ -68,3 +68,10 @@ UI-mapped gherkin tests for the Lace browser extension
 - make necessary updates in `packages/e2e-tests/src/support/walletConfiguration.ts`
 - encrypt `walletConfiguration.ts` by running `./encrypt_secret.sh` (from the `packages/e2e-tests` directory)
 - delete `packages/e2e-tests/src/support/walletConfiguration.ts`
+
+## Trezor test automation precondition (local run)
+
+- run docker image locally <https://github.com/input-output-hk/lace-hw-testing-toolkit.git>
+- After starting docker image (info should be displayed - `⚡️ Trezor Device Manipulation API is running at http://localhost:8000`)
+  Tests need to be triggered in 60 sec because emulator shuts down device if there is no action  
+  (will be improved in follow-up tickets by starting emulator trough API)
diff --git a/packages/e2e-tests/src/elements/onboarding/commonOnboardingElements.ts b/packages/e2e-tests/src/elements/onboarding/commonOnboardingElements.ts
@@ -47,4 +47,14 @@ export default class CommonOnboardingElements {
   get termsOfServiceLink(): ChainablePromiseElement<WebdriverIO.Element> {
     return $(this.TERMS_OF_SERVICE_LINK);
   }
+
+  async clickOnNextButton(): Promise<void> {
+    await this.nextButton.waitForClickable({ timeout: 12_000 });
+    await this.nextButton.click();
+  }
+
+  async clickOnBackButton(): Promise<void> {
+    await this.backButton.waitForClickable();
+    await this.backButton.click();
+  }
 }
diff --git a/packages/e2e-tests/src/elements/onboarding/connectHardwareWalletPage.ts b/packages/e2e-tests/src/elements/onboarding/connectHardwareWalletPage.ts
@@ -6,6 +6,8 @@ export class OnboardingConnectHardwareWalletPage extends CommonOnboardingElement
   private SUBTITLE_TEXT = '[data-testid="connect-hardware-wallet-subtitle"]';
   private SUPPORTED_DEVICES_TEXT = '[data-testid="connect-hardware-wallet-supported-devices-text"]';
   private LEDGER_BUTTON = '[data-testid="connect-hardware-wallet-button-ledger"]';
+  private TREZOR_BUTTON = '[data-testid="connect-hardware-wallet-button-trezor"]';
+
   private CONNECT_DEVICE_TEXT = '[data-testid="connect-hardware-wallet-connect-device-text"]';
 
   get subTitle(): ChainablePromiseElement<WebdriverIO.Element> {
@@ -20,6 +22,10 @@ export class OnboardingConnectHardwareWalletPage extends CommonOnboardingElement
     return $(this.LEDGER_BUTTON);
   }
 
+  get trezorButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.TREZOR_BUTTON);
+  }
+
   get connectDevice(): ChainablePromiseElement<WebdriverIO.Element> {
     return $(this.CONNECT_DEVICE_TEXT);
   }
diff --git a/packages/e2e-tests/src/elements/onboarding/selectAccountPage.ts b/packages/e2e-tests/src/elements/onboarding/selectAccountPage.ts
@@ -0,0 +1,10 @@
+import CommonOnboardingElements from './commonOnboardingElements';
+
+class SelectAccountPage extends CommonOnboardingElements {
+  private ACCOUNT_RADIO_BUTTONS = '.ant-radio-input';
+
+  get accountRadioButtons() {
+    return $$(this.ACCOUNT_RADIO_BUTTONS);
+  }
+}
+export default new SelectAccountPage();
diff --git a/packages/e2e-tests/src/elements/trezorConnectPage.ts b/packages/e2e-tests/src/elements/trezorConnectPage.ts
@@ -0,0 +1,44 @@
+class TrezorConnectPage {
+  private CONFIRM_BUTTON = '[data-test="@permissions/confirm-button"]';
+  private EXPORT_BUTTON = '[id="container"] .confirm';
+  private ANALYTICS_CONFIRM_BUTTON = '[data-test="@analytics/continue-button"]';
+  private ANALYTICS_TOGGLE_BUTTON = '[data-test="@analytics/toggle-switch"]';
+  private SHADOW_ROOT = '#react';
+
+  get confirmButton() {
+    return $(this.CONFIRM_BUTTON);
+  }
+
+  get analyticsConfirmButton() {
+    return $(this.SHADOW_ROOT).shadow$(this.ANALYTICS_CONFIRM_BUTTON);
+  }
+
+  get analyticsToggleButton() {
+    return $(this.SHADOW_ROOT).shadow$(this.ANALYTICS_TOGGLE_BUTTON);
+  }
+
+  get exportButton() {
+    return $(this.EXPORT_BUTTON);
+  }
+
+  async clickOnConfirmButton(): Promise<void> {
+    await this.confirmButton.waitForClickable();
+    await this.confirmButton.click();
+  }
+
+  async clickOnAnalyticsConfirmButton(): Promise<void> {
+    await this.analyticsConfirmButton.waitForClickable();
+    await this.analyticsConfirmButton.click();
+  }
+
+  async clickOnAnalyticsToggleButton(): Promise<void> {
+    await this.analyticsToggleButton.waitForClickable();
+    await this.analyticsToggleButton.click();
+  }
+
+  async clickOnExportButton(): Promise<void> {
+    await this.exportButton.waitForClickable();
+    await this.exportButton.click();
+  }
+}
+export default new TrezorConnectPage();
diff --git a/packages/e2e-tests/src/features/trezor/Trezor.feature b/packages/e2e-tests/src/features/trezor/Trezor.feature
@@ -0,0 +1,24 @@
+@TrezorOnboarding @Trezor @Pending
+Feature: Trezor Onboarding
+
+  Scenario: Onboarding Trezor wallet
+    And I connect, unlock and enter correct pin on Trezor emulator
+    Given I click "Connect" button on wallet setup page
+    And I click "OK" button on "Limited support for DApp" modal
+    And I am on "Lace terms of use" page and accept terms
+    And I am on "Help us improve your experience" page
+    When I click "Agree" button on Analytics page
+    And I click Trezor wallet icon
+    And I click "Next" button during wallet setup
+    And I select 1 account on Select Account page
+    When I click "Next" button during wallet setup
+    When I enter wallet name with size of: 10 characters
+    When I click "Next" button during wallet setup
+    And I switch to window with title: TrezorConnect
+    And I reject analytics and click "Allow once for this session" on Trezor Connect page
+    And I click "Export" on Trezor Connect page
+    And I confirm exporting public key on Trezor emulator
+    And I switch to window with Lace
+    Then "All done" page is displayed
+    When I click "Go to my wallet" button on "All done" page
+    Then I see LW homepage
diff --git a/packages/e2e-tests/src/hooks/beforeTagHooks.ts b/packages/e2e-tests/src/hooks/beforeTagHooks.ts
@@ -20,7 +20,9 @@ const popupViewWalletInitialization = async (walletName = TestWalletName.TestAut
 };
 
 Before(
-  { tags: '@OnboardingCreateWallet or @Staking-initial-E2E or @OnboardingRestoreWallet or @OnboardingHardwareWallet' },
+  {
+    tags: '@OnboardingCreateWallet or @Staking-initial-E2E or @OnboardingRestoreWallet or @OnboardingHardwareWallet or @TrezorOnboarding'
+  },
   async () => await extendedView.visit()
 );
 
diff --git a/packages/e2e-tests/src/steps/commonSteps.ts b/packages/e2e-tests/src/steps/commonSteps.ts
@@ -18,7 +18,12 @@ import BackgroundStorageAssert from '../assert/backgroundStorageAssert';
 import topNavigationAssert from '../assert/topNavigationAssert';
 import testContext from '../utils/testContext';
 import MenuHeader from '../elements/menuHeader';
-import { closeAllTabsExceptActiveOne, switchToLastWindow, switchToWindowWithLace } from '../utils/window';
+import {
+  closeAllTabsExceptActiveOne,
+  switchToLastWindow,
+  switchToWindowWithLace,
+  switchToWindowWithRetry
+} from '../utils/window';
 import { Given } from '@wdio/cucumber-framework';
 import tokensPageObject from '../pageobject/tokensPageObject';
 import menuMainAssert from '../assert/menuMainAssert';
@@ -196,6 +201,10 @@ Then(/^I switch to last window$/, async () => {
   await switchToLastWindow();
 });
 
+Then(/^I switch to window with title: ([^"]*)$/, async (url: string) => {
+  await switchToWindowWithRetry(url);
+});
+
 Then(/^I see a different wallet address than in my initial wallet$/, async () => {
   await menuMainAssert.assertAddressIsNotEqual();
 });
diff --git a/packages/e2e-tests/src/steps/onboardingSteps.ts b/packages/e2e-tests/src/steps/onboardingSteps.ts
@@ -36,6 +36,8 @@ import webTester from '../actor/webTester';
 import MainLoader from '../elements/MainLoader';
 import CommonAssert from '../assert/commonAssert';
 import { shuffle } from '../utils/arrayUtils';
+import OnboardingConnectHardwareWalletPage from '../elements/onboarding/connectHardwareWalletPage';
+import SelectAccountPage from '../elements/onboarding/selectAccountPage';
 
 const mnemonicWords: string[] = getTestWallet(TestWalletName.TestAutomationWallet).mnemonic ?? [];
 const invalidMnemonicWords: string[] = getTestWallet(TestWalletName.InvalidMnemonic).mnemonic ?? [];
@@ -68,16 +70,20 @@ When(/^I click "(Back|Next)" button during wallet setup$/, async (button: 'Back'
   const commonOnboardingElements = new CommonOnboardingElements();
   switch (button) {
     case 'Back':
-      await commonOnboardingElements.backButton.click();
+      await commonOnboardingElements.clickOnBackButton();
       break;
     case 'Next':
-      await commonOnboardingElements.nextButton.click();
+      await commonOnboardingElements.clickOnNextButton();
       break;
     default:
       throw new Error(`Unsupported button name: ${button}`);
   }
 });
 
+When(/^I select ([^"]*) account on Select Account page$/, async (accountNumber: number) => {
+  await SelectAccountPage.accountRadioButtons[accountNumber - 1].click();
+});
+
 When(/^I click "(Back|Skip|Agree)" button on Analytics page$/, async (button: 'Back' | 'Skip' | 'Agree') => {
   switch (button) {
     case 'Back':
@@ -201,6 +207,10 @@ Then(/^"Connect Hardware Wallet" page is displayed$/, async () => {
   await OnboardingConnectHWPageAssert.assertSeeConnectHardwareWalletPage();
 });
 
+Then(/^I click Trezor wallet icon$/, async () => {
+  await OnboardingConnectHardwareWalletPage.trezorButton.click();
+});
+
 Then(/^"All done" page is displayed$/, async () => {
   await OnboardingAllDonePageAssert.assertSeeAllDonePage();
 });
diff --git a/packages/e2e-tests/src/steps/trezorConnetSteps.ts b/packages/e2e-tests/src/steps/trezorConnetSteps.ts
@@ -0,0 +1,12 @@
+import { Given } from '@cucumber/cucumber';
+import TrezorConnectPage from '../elements/trezorConnectPage';
+
+Given(/^I reject analytics and click "Allow once for this session" on Trezor Connect page$/, async () => {
+  await TrezorConnectPage.clickOnAnalyticsToggleButton();
+  await TrezorConnectPage.clickOnAnalyticsConfirmButton();
+  await TrezorConnectPage.clickOnConfirmButton();
+});
+
+Given(/^I click "Export" on Trezor Connect page$/, async () => {
+  await TrezorConnectPage.clickOnExportButton();
+});
diff --git a/packages/e2e-tests/src/steps/trezorEmulatorSteps.ts b/packages/e2e-tests/src/steps/trezorEmulatorSteps.ts
@@ -0,0 +1,15 @@
+import { Given } from '@cucumber/cucumber';
+import { clickImageOnScreenshot } from '../utils/trezorEmulatorApiClient';
+import { browser } from '@wdio/globals';
+
+Given(/^I connect, unlock and enter correct pin on Trezor emulator$/, async () => {
+  await clickImageOnScreenshot('notConnectedTrezor.png');
+  await clickImageOnScreenshot('tapToUnlock.png');
+  await clickImageOnScreenshot('pin.png');
+  await clickImageOnScreenshot('confirmPin.png');
+});
+
+Given(/^I confirm exporting public key on Trezor emulator$/, async () => {
+  await browser.pause(3000);
+  await clickImageOnScreenshot('confirm.png');
+});
diff --git a/packages/e2e-tests/src/utils/trezorEmulatorApiClient.ts b/packages/e2e-tests/src/utils/trezorEmulatorApiClient.ts
@@ -0,0 +1,17 @@
+import { Logger } from '../support/logger';
+
+const baseUrl = 'http://localhost:8000';
+
+export const clickImageOnScreenshot = async (imageName: string): Promise<void> => {
+  try {
+    const requestOptions = {
+      method: 'POST'
+    };
+
+    const response = await fetch(`${baseUrl}/click/${imageName}`, requestOptions);
+
+    response.ok ? Logger.log(`Response: ${await response.text()}`) : console.error('Error:', response.statusText);
+  } catch (error) {
+    throw new Error(`An error occurred: ${error}`);
+  }
+};
diff --git a/packages/e2e-tests/src/utils/window.ts b/packages/e2e-tests/src/utils/window.ts
@@ -44,3 +44,20 @@ export const switchToWindowWithLace = async (): Promise<void> => {
   await browser.pause(1000);
   await browser.switchWindow(/^Lace$/);
 };
+
+export const switchToWindowWithTitle = async (url: string): Promise<boolean> => {
+  try {
+    await browser.switchWindow(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const switchToWindowWithRetry = async (url: string): Promise<void> => {
+  await browser.waitUntil(async () => await switchToWindowWithTitle(url), {
+    timeout: 6000,
+    interval: 1000,
+    timeoutMsg: `failed while switching to tab with title: ${url}`
+  });
+};
diff --git a/packages/e2e-tests/wdio.conf.chrome.ts b/packages/e2e-tests/wdio.conf.chrome.ts
@@ -19,7 +19,6 @@ const chromeConfig: WebdriverIO.Config = {
           '--no-first-run',
           '--no-default-browser-check',
           `--load-extension=${__dirname}/../../apps/browser-extension-wallet/dist`,
-          '--disable-web-security',
           '--allow-insecure-localhost',
           '--window-size=1920,1080',
           '--allow-file-access-from-files',
diff --git a/packages/e2e-tests/wdio.conf.edge.ts b/packages/e2e-tests/wdio.conf.edge.ts
@@ -18,7 +18,6 @@ const edgeConfig: WebdriverIO.Config = {
           '--no-first-run',
           '--no-default-browser-check',
           `--load-extension=${__dirname}/../../apps/browser-extension-wallet/dist`,
-          '--disable-web-security',
           '--allow-insecure-localhost',
           '--window-size=1920,1080',
           '--allow-file-access-from-files',

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ export const WalletSetupConnectHardwareWalletStep = ({`
`71`	`71`	`[styles.hdWallet]: true,`
`72`	`72`	`[styles.hdWalletActive]: isButtonActive(wallet)`
`73`	`73`	`})}`
`74`		`- data-testid="connect-hardware-wallet-button-ledger"`
	`74`	+ data-testid={`connect-hardware-wallet-button-${wallet.toLowerCase()}`}
`75`	`75`	`>`
`76`	`76`	`{wallet in logoMap ? (`
`77`	`77`	`<Icon className={styles.logo} component={logoMap[wallet as keyof typeof logoMap]} />`
Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,7 @@ export const WalletSetupWalletNameStep = ({`
`55`	`55`	`>`
`56`	`56`	`<p className={styles.subtitle}>{translations.chooseName}</p>`
`57`	`57`	`<Input`
	`58`	`+ dataTestId="wallet-setup-register-name-input"`
`58`	`59`	`className={styles.inputName}`
`59`	`60`	`label={translations.walletName}`
`60`	`61`	`value={walletName}`