[LW-12654] test: add e2e test for Trezor with emulator (#1851)

ljagiela · web-flow · commit 75d9fc3693ad · 2025-05-05T09:45:13.000Z
* test: add e2e test for Trezor
* test: save docker compose logs after teardown
diff --git a/packages/e2e-tests/README.md b/packages/e2e-tests/README.md
@@ -10,6 +10,7 @@ UI-mapped gherkin tests for the Lace browser extension
   - On macOS, you can install it easily with homebrew: `brew install openjdk`
 - gpg
 - Firefox Developer Edition (for running tests on Firefox locally)
+- Docker (for Trezor tests)
 
 ## Running tests locally
 
@@ -86,12 +87,12 @@ UI-mapped gherkin tests for the Lace browser extension
 - 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)
+## Trezor test automation precondition (for local development)
 
-- run docker image locally <https://github.com/input-output-hk/lace-hw-testing-toolkit.git>
+- build docker image locally <https://github.com/input-output-hk/lace-hw-testing-toolkit.git> or
+- `docker pull public.ecr.aws/e8d0p1a5/lw-hw-testing-toolkit:latest` (you need to be authenticated) and run it
 - 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)
 
 ## Running tests locally in debug mode using IntelliJ IDEA/WebStorm
 
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
@@ -53,6 +53,7 @@
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-wdio": "8.37.0",
     "flat": "6.0.1",
+    "testcontainers": "10.24.2",
     "ts-node": "10.9.1",
     "typescript": "^4.9.5",
     "wdio-intercept-service": "4.4.1",
diff --git a/packages/e2e-tests/src/compose/lw-hw-testing-toolkit.yml b/packages/e2e-tests/src/compose/lw-hw-testing-toolkit.yml
@@ -0,0 +1,17 @@
+services:
+  lw-hw-testing-toolkit-e2e:
+    image: 'public.ecr.aws/e8d0p1a5/lw-hw-testing-toolkit:latest'
+    container_name: lw-hw-testing-toolkit
+    ports:
+      - "3389:3389/tcp"
+      - "127.0.0.1:21325:11325"
+      - "8000:8000"
+    tty: true
+    stdin_open: true
+    restart: "no"
+    healthcheck:
+      test: ['CMD', 'curl', '-f', 'http://localhost:8000/healthcheck']
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 10s
diff --git a/packages/e2e-tests/src/elements/trezorConnectPage.ts b/packages/e2e-tests/src/elements/trezorConnectPage.ts
@@ -2,10 +2,10 @@
 import { ChainablePromiseElement } from 'webdriverio';
 
 class TrezorConnectPage {
-  private CONFIRM_BUTTON = '[data-test="@permissions/confirm-button"]';
+  private CONFIRM_BUTTON = '[data-testid="@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 ANALYTICS_CONFIRM_BUTTON = '[data-testid="@analytics/continue-button"]';
+  private ANALYTICS_TOGGLE_BUTTON = '[data-testid="@analytics/toggle-switch"]';
   private SHADOW_ROOT = '#react';
 
   get confirmButton(): ChainablePromiseElement<WebdriverIO.Element> {
diff --git a/packages/e2e-tests/src/features/trezor/Trezor.feature b/packages/e2e-tests/src/features/trezor/Trezor.feature
@@ -1,18 +1,11 @@
-@TrezorOnboarding @Trezor @Pending
+@TrezorOnboarding @Trezor @Testnet
 Feature: Trezor Onboarding
 
+  @LW-7877 @Pending
   Scenario: Onboarding Trezor wallet
     And I connect, unlock and enter correct pin on Trezor emulator
-    Given I reject analytics banner on "Get started" page
-    And I click "Connect" button on wallet setup page
-    # TODO: remove/replace outdated steps
-#    And I click Trezor wallet icon
+    And I force the Trezor account setup page to open
     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
diff --git a/packages/e2e-tests/src/hooks/afterFeatureHooks.ts b/packages/e2e-tests/src/hooks/afterFeatureHooks.ts
@@ -0,0 +1,7 @@
+import { DockerManager } from '../support/DockerManager';
+
+export const afterFeatureHook = async (): Promise<void> => {
+  if (process.env.PRE_STARTED_TREZOR_SERVICES !== 'true' && DockerManager.getContainer()) {
+    await DockerManager.downDockerCompose();
+  }
+};
diff --git a/packages/e2e-tests/src/hooks/afterTagHooks.ts b/packages/e2e-tests/src/hooks/afterTagHooks.ts
@@ -2,6 +2,7 @@ import { After } from '@wdio/cucumber-framework';
 import { switchToWindowWithLace } from '../utils/window';
 import extendedView from '../page/extendedView';
 import { browser } from '@wdio/globals';
+import { stopEmulator } from '../utils/trezorEmulatorApiClient';
 
 After(
   { tags: '@DAppConnector or @DAppConnector-Extended or @DAppConnector-Popup' },
@@ -12,3 +13,5 @@ After({ tags: '@LW-7125 or @LW-9335' }, async () => {
   await browser.reloadSession();
   await extendedView.visit();
 });
+
+After({ tags: '@Trezor' }, async () => await stopEmulator());
diff --git a/packages/e2e-tests/src/hooks/beforeFeatureHooks.ts b/packages/e2e-tests/src/hooks/beforeFeatureHooks.ts
@@ -0,0 +1,13 @@
+import { DockerManager } from '../support/DockerManager';
+
+import type { Feature } from '@cucumber/messages';
+import { Logger } from '../support/logger';
+
+export const beforeFeatureHook = async (_uri: string, feature: Feature): Promise<void> => {
+  Logger.log('running before feature hook');
+  const tags = feature.tags.map((tag) => tag.name);
+
+  if (tags.includes('@Trezor') && !DockerManager.getContainer() && process.env.PRE_STARTED_TREZOR_SERVICES !== 'true') {
+    await DockerManager.startComposeFile();
+  }
+};
diff --git a/packages/e2e-tests/src/hooks/beforeTagHooks.ts b/packages/e2e-tests/src/hooks/beforeTagHooks.ts
@@ -7,6 +7,7 @@ import networkManager from '../utils/networkManager';
 import analyticsBanner from '../elements/analyticsBanner';
 import { addAndActivateWalletsInRepository } from '../fixture/walletRepositoryInitializer';
 import { setUsePersistentUserId } from '../utils/browserStorage';
+import { checkAndStartEmulator } from '../utils/trezorEmulatorApiClient';
 
 const extendedViewRepositoryWalletInitialization = async (walletNames: TestWalletName[]): Promise<void> => {
   await extendedView.visit();
@@ -303,3 +304,12 @@ Before(
     await localStorageInitializer.disableShowPinExtension();
   }
 );
+
+Before(
+  {
+    tags: '@Trezor'
+  },
+  async () => {
+    await checkAndStartEmulator();
+  }
+);
diff --git a/packages/e2e-tests/src/page/extendedView.ts b/packages/e2e-tests/src/page/extendedView.ts
@@ -62,6 +62,11 @@ class ExtendedView extends LaceView implements Page {
     await browser.url(`${await this.getBaseUrl()}#/voting`);
     await this.waitForPreloaderToDisappear();
   }
+
+  async visitTrezorSetupAccountPageWithOverride() {
+    await browser.url(`${await this.getBaseUrl()}#/setup/hardware?force-trezor-picked`);
+    await this.waitForPreloaderToDisappear();
+  }
 }
 
 export default new ExtendedView();
diff --git a/packages/e2e-tests/src/steps/trezorConnectSteps.ts b/packages/e2e-tests/src/steps/trezorConnectSteps.ts
@@ -1,12 +1,18 @@
 import { Given } from '@cucumber/cucumber';
 import TrezorConnectPage from '../elements/trezorConnectPage';
+import { switchToWindowWithRetry } from '../utils/window';
 
 Given(/^I reject analytics and click "Allow once for this session" on Trezor Connect page$/, async () => {
+  await switchToWindowWithRetry('TrezorConnect');
   await TrezorConnectPage.clickOnAnalyticsToggleButton();
   await TrezorConnectPage.clickOnAnalyticsConfirmButton();
+
+  await browser.pause(4000);
+  await switchToWindowWithRetry('TrezorConnect'); // page is reloaded so we need to re-connect the driver
   await TrezorConnectPage.clickOnConfirmButton();
 });
 
 Given(/^I click "Export" on Trezor Connect page$/, async () => {
+  await switchToWindowWithRetry('TrezorConnect');
   await TrezorConnectPage.clickOnExportButton();
 });
diff --git a/packages/e2e-tests/src/steps/trezorEmulatorSteps.ts b/packages/e2e-tests/src/steps/trezorEmulatorSteps.ts
@@ -1,15 +1,20 @@
 import { Given } from '@cucumber/cucumber';
 import { clickImageOnScreenshot } from '../utils/trezorEmulatorApiClient';
 import { browser } from '@wdio/globals';
+import extendedView from '../page/extendedView';
 
 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');
+  await clickImageOnScreenshot('tapToConnect.png');
+  await clickImageOnScreenshot('pinNumber.png');
+  await clickImageOnScreenshot('checkmarkButton.png');
 });
 
 Given(/^I confirm exporting public key on Trezor emulator$/, async () => {
   await browser.pause(3000);
-  await clickImageOnScreenshot('confirm.png');
+  await clickImageOnScreenshot('expandButton.png');
+  await clickImageOnScreenshot('confirmButton.png');
+});
+
+Given(/^I force the Trezor account setup page to open$/, async () => {
+  await extendedView.visitTrezorSetupAccountPageWithOverride();
 });
diff --git a/packages/e2e-tests/src/support/DockerManager.ts b/packages/e2e-tests/src/support/DockerManager.ts
@@ -0,0 +1,90 @@
+import { exec } from 'node:child_process';
+import path from 'node:path';
+
+import { DockerComposeEnvironment, StartedDockerComposeEnvironment, Wait } from 'testcontainers';
+import { Logger } from './logger';
+import fs from 'fs/promises';
+import { promisify } from 'node:util';
+const execAsync = promisify(exec);
+
+export class DockerManager {
+  private static _composeEnvironment: StartedDockerComposeEnvironment;
+  private static projectName = 'lw-hw-testing-toolkit-e2e';
+
+  public static async isDockerRunning(): Promise<boolean> {
+    return new Promise((resolve) => {
+      exec('docker info', (error) => {
+        resolve(!error);
+      });
+    });
+  }
+
+  public static async assertDockerStarted(): Promise<void> {
+    if (!(await this.isDockerRunning())) {
+      Logger.warn('Docker is not running. Please start Docker and try again.');
+      // eslint-disable-next-line unicorn/no-process-exit
+      process.exit(1);
+    }
+  }
+
+  public static async startLwHwTestingToolkit(): Promise<StartedDockerComposeEnvironment> {
+    Logger.log('Spinning up docker compose environment for lw-hw-testing-toolkit');
+
+    try {
+      const composeFilePath = path.resolve(import.meta.dirname, '../compose/');
+
+      const startedDockerComposeEnvironment = await new DockerComposeEnvironment(
+        composeFilePath,
+        'lw-hw-testing-toolkit.yml'
+      )
+        .withProjectName(this.projectName)
+        .withWaitStrategy(this.projectName, Wait.forLogMessage('Trezor Device Manipulation API is running'))
+        .up();
+
+      Logger.log('Docker compose environment for lw-hw-testing-toolkit has started');
+
+      return startedDockerComposeEnvironment;
+    } catch (error) {
+      Logger.warn(`Failed to start Docker Compose environment: ${error}`);
+      throw error;
+    }
+  }
+
+  public static async startComposeFile(): Promise<void> {
+    if (!this._composeEnvironment) {
+      await this.assertDockerStarted();
+      this._composeEnvironment = await this.startLwHwTestingToolkit();
+    }
+  }
+
+  public static getContainer(): StartedDockerComposeEnvironment {
+    return this._composeEnvironment;
+  }
+
+  public static async downDockerCompose(): Promise<void> {
+    Logger.log('Tearing down docker compose.');
+    await this.saveDockerLogs();
+    await this._composeEnvironment.down();
+  }
+
+  public static async saveDockerLogs(): Promise<void> {
+    try {
+      const composeFilePath = path.resolve(import.meta.dirname, '../compose');
+      const composeFile = 'lw-hw-testing-toolkit.yml';
+      const logDir = path.resolve('./logs');
+      await fs.mkdir(logDir, { recursive: true });
+
+      const logFilePath = path.join(logDir, './docker-compose.log');
+
+      const { stdout, stderr } = await execAsync(
+        `docker compose -p ${this.projectName} -f ${composeFile} logs --no-color --timestamps`,
+        { cwd: composeFilePath }
+      );
+
+      await fs.writeFile(logFilePath, stdout + stderr);
+      Logger.log('Docker compose logs saved.');
+    } catch (error) {
+      Logger.warn(`Failed to save docker compose logs: ${error}`);
+    }
+  }
+}
diff --git a/packages/e2e-tests/src/utils/trezorEmulatorApiClient.ts b/packages/e2e-tests/src/utils/trezorEmulatorApiClient.ts
@@ -1,17 +1,56 @@
 import { Logger } from '../support/logger';
 
 const baseUrl = 'http://localhost:8000';
+const requestOptions = {
+  method: 'POST'
+};
 
 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);
+    response.ok
+      ? Logger.log(`Click response: ${await response.text()}`)
+      : console.error('Error on click:', response.statusText);
+  } catch (error) {
+    throw new Error(`Failed to click image '${imageName}' on screenshot: ${error}`);
+  }
+};
+
+export const startEmulator = async (): Promise<void> => {
+  try {
+    const response = await fetch(`${baseUrl}/start-emulator`, requestOptions);
+
+    response.ok
+      ? Logger.log(`Emulator started: ${await response.text()}`)
+      : console.error('Error when starting emulator:', response.statusText);
+  } catch (error) {
+    throw new Error(`Failed to start the emulator: ${error}`);
+  }
+};
+
+export const stopEmulator = async (): Promise<void> => {
+  try {
+    const response = await fetch(`${baseUrl}/stop-emulator`, requestOptions);
+
+    response.ok
+      ? Logger.log(`Emulator stopped: ${await response.text()}`)
+      : console.error('Error when stopping emulator:', response.statusText);
+  } catch (error) {
+    throw new Error(`Failed to stop the emulator: ${error}`);
+  }
+};
+
+export const checkAndStartEmulator = async (): Promise<void> => {
+  try {
+    const response = await fetch(`${baseUrl}/is-emulator-running`, requestOptions);
+
+    if (response.ok) {
+      Logger.log(`Emulator is running: ${await response.text()}`);
+    } else {
+      await startEmulator();
+    }
   } catch (error) {
-    throw new Error(`An error occurred: ${error}`);
+    throw new Error(`Failed to check if emulator is running: ${error}`);
   }
 };
diff --git a/packages/e2e-tests/wdio.conf.base.ts b/packages/e2e-tests/wdio.conf.base.ts
@@ -3,6 +3,8 @@
 import extensionUtils from './src/utils/utils';
 import fs from 'fs';
 import { Logger } from './src/support/logger';
+import { beforeFeatureHook } from './src/hooks/beforeFeatureHooks';
+import { afterFeatureHook } from './src/hooks/afterFeatureHooks';
 
 export const config: WebdriverIO.Config = {
   runner: 'local',
@@ -63,7 +65,7 @@ export const config: WebdriverIO.Config = {
       './src/features/NavigationMain*.feature',
       './src/features/NetworkSwitching*.feature',
       './src/features/OwnTags*.feature',
-      './src/features/Trezor/Trezor.feature',
+      './src/features/trezor/Trezor.feature',
       './src/features/WalletAccounts*.feature'
     ],
     batch9: ['./src/features/SendTransactionSimplePopup*.feature'],
@@ -160,5 +162,11 @@ export const config: WebdriverIO.Config = {
       // eslint-disable-next-line unicorn/no-process-exit
       process.exit(1);
     }
+  },
+  beforeFeature: async (uri, feature): Promise<void> => {
+    await beforeFeatureHook(uri, feature);
+  },
+  afterFeature: async () => {
+    await afterFeatureHook();
   }
 };
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,11 @@ class ExtendedView extends LaceView implements Page {`
`62`	`62`	await browser.url(`${await this.getBaseUrl()}#/voting`);
`63`	`63`	`await this.waitForPreloaderToDisappear();`
`64`	`64`	`}`
	`65`	`+`
	`66`	`+ async visitTrezorSetupAccountPageWithOverride() {`
	`67`	+ await browser.url(`${await this.getBaseUrl()}#/setup/hardware?force-trezor-picked`);
	`68`	`+ await this.waitForPreloaderToDisappear();`
	`69`	`+ }`
`65`	`70`	`}`
`66`	`71`
`67`	`72`	`export default new ExtendedView();`