feat: allow fixtures on E2E (#1268)

* feat: update locators and toggle fixtures to use with simulator

* feat: use path aliases for readable imports, prepare MWC e2e tests

* feat: update run script and work in progress for the new test structure

* feat: extends path usage, creates the first tests for playground-next

* feat: implements personalSign on the playground-next for e2e usage

* feat: always display terminate to avoid flaky tests

* feat: removes unecessary logs

* feat: work in progress

* feat: updates the Utils package to allow to start the app with fixtures

* chore: updates koa to solve vulnerability

* chore: updates configs and adds a logger

* chore: removes non needed references in the code

* chore: fixes dependency list

* chore: removes unused page object models

* feat: adds context switching feature to improve flakiness

* feat: add new dapp requirements

* feat: cleans wdio configs

* chore: updates locators

* chore: removes unused test dapp reference

* feat: adds automatic context switching via helpers

Author: christopherferreira9

e2e/.dapps.env.example

@@ -1 +1 @@
-DEVNEXT_DAPP_URL=http://192.111.111.111:3333/demo
+METAMASK_TEST_DAPP_URL=http://192.111.111.111:3333

e2e/.ios.env.example

@@ -1,7 +1,7 @@
 BUNDLE_ID=
-DEVICE_NAME=
-PLATFORM_VERSION=
-APP_PATH=
-AUTOMATION_NAME=
+DEVICE_NAME=iPhone 16 Pro
+PLATFORM_VERSION=18.2
+APP_PATH=METAMASK_APP_PATH
+AUTOMATION_NAME=XCUITest
 DEVICE_UDID=
 

e2e/README.md

@@ -2,7 +2,7 @@
 
 ### Node version
 
-`nvm use 18`
+`nvm use 20`
 
 ### Setup:
 
@@ -12,38 +12,29 @@
 
 `export SRP=TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST`
 
-### Env files needed:
+## Create an iOS simulator and Android emulator
 
-.ios.env:
 
-- BUNDLE_ID=
-- DEVICE_NAME=
-- PLATFORM_VERSION=
-- APP_PATH=
-- AUTOMATION_NAME=
-- DEVICE_UDID=
+### Complete your platform related env files:
+`cp .ios.env.example .ios.env`
 
-.android.env:
-
-- BUNDLE_ID=
-- DEVICE_NAME=
-- PLATFORM_VERSION=
-- APP_PATH=
-- AUTOMATION_NAME=
-- APP_ACTIVITY=
+`cp .android.env.example .android.env`
 
 .dapps.env:
+```
+DEVNEXT_DAPP_URL=
+WAGMI_TEST_DAPP_URL=
+```
 
-- REACT_DAPP_URL=
-- TEST_DAPP_URL=
+# iOS
+### Create an iOS simulator
 
-.env:
+### Run tests on iOS:
 
-- BROWSERSTACK_USERNAME=
-- BROWSERSTACK_ACCESS_KEY=
+`yarn test:ios:jssdk:e2e:local`
 
-### Run tests:
+### Run tests on Android:
 
-`yarn test:ios`
+`yarn test:android:jssdk:e2e:local`
 
 #### Currently setup to run locally

e2e/babel.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['.'],
+        alias: {
+          '@': './test',
+          '@util': './util',
+          '@specs': './test/specs',
+          '@screens': './src/screens',
+          '@fixtures': './src/fixtures',
+        },
+      },
+    ],
+  ],
+};

e2e/package.json

@@ -2,50 +2,52 @@
   "name": "metamask-sdk-e2e",
   "private": true,
   "type": "commonjs",
+  "scripts": {
+    "test:ios:metamask-connector:e2e:local": "wdio run test/configs/local/wdio.ios.app.local.conf.ts --suite metamask_connector",
+    "test:ios:metamask-connector:e2e:browserstack": "wdio run test/configs/browserstack/wdio.ios.app.browserstack.conf.ts --suite metamask_connector",
+    "test:android:metamask-connector:e2e:local": "wdio run test/configs/local/wdio.android.app.local.conf.ts --suite metamask_connector",
+    "test:android:metamask-connector:e2e:browserstack": "wdio run test/configs/browserstack/wdio.android.app.browserstack.conf.ts --suite metamask_connector",
+    "setup": "yarn install",
+    "build": "tsc --build",
+    "clean": "yarn clean:reports && rm -rf node_modules",
+    "clean:reports": "rm -rf allure-results",
+    "clean:build": "tsc --build --clean",
+    "allow-scripts": ""
+  },
   "devDependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@metamask/eslint-config": "11.1.0",
+    "@metamask/eslint-config-nodejs": "11.1.0",
+    "@metamask/eslint-config-typescript": "11.1.0",
     "@types/koa": "^2.13.12",
+    "@types/lodash.merge": "4.6.9",
+    "@types/module-alias": "^2.0.4",
+    "@typescript-eslint/eslint-plugin": "5.61.0",
+    "@typescript-eslint/parser": "5.61.0",
     "@wdio/allure-reporter": "^8.11.0",
     "@wdio/appium-service": "^9.2.1",
     "@wdio/browserstack-service": "^9.1.2",
     "@wdio/cli": "latest",
+    "@wdio/globals": "8.24.6",
     "@wdio/local-runner": "latest",
     "@wdio/mocha-framework": "latest",
     "@wdio/spec-reporter": "latest",
-    "ts-node": "^10.9.1",
+    "allure-commandline": "2.23.0",
+    "appium-adb": "11.0.8",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "dotenv": "16.0.3",
+    "eslint": "8.44.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jsdoc": "46.4.3",
+    "eslint-plugin-prettier": "4.2.1",
+    "koa": "2.14.2",
+    "module-alias": "^2.2.3",
+    "prettier": "2.8.8",
+    "ts-node": "^10.9.2",
     "typescript": "^4.9.5",
-    "wdio-wait-for": "^3.0.9"
-  },
-  "scripts": {
-    "test:android:jssdk:e2e:browserstack": "wdio run test/configs/browserstack/wdio.android.app.browserstack.conf.ts --suite web_dapp",
-    "test:ios:jssdk:e2e:browserstack": "wdio run test/configs/browserstack/wdio.ios.app.browserstack.conf.ts --suite web_dapp",
-    "test:ios:jssdk:e2e:local": "wdio run test/configs/local/wdio.ios.app.local.conf.ts --suite web_dapp",
-    "test:android:jssdk:e2e:local": "wdio run test/configs/local/wdio.android.app.local.conf.ts --suite web_dapp",
-    "setup": "yarn install",
-    "build": "tsc --build",
-    "clean": "yarn clean:reports && rm -rf node_modules",
-    "clean:reports": "rm -rf allure-results",
-    "clean:build": "tsc --build --clean",
-    "allow-scripts": ""
-  },
-  "dependencies": {
-    "@metamask/eslint-config": "^11.1.0",
-    "@metamask/eslint-config-nodejs": "^11.1.0",
-    "@metamask/eslint-config-typescript": "^11.1.0",
-    "@types/lodash.merge": "^4.6.9",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
-    "@wdio/globals": "^8.24.6",
-    "allure-commandline": "^2.23.0",
-    "appium-adb": "^11.0.8",
-    "axios": "^1.6.2",
-    "dotenv": "^16.0.3",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^46.4.3",
-    "eslint-plugin-prettier": "^4.2.1",
-    "koa": "^2.14.2",
-    "prettier": "^2.8.8",
-    "webdriverio": "^9.2.1"
+    "wdio-wait-for": "^3.0.9",
+    "webdriverio": "9.2.1"
   }
 }

e2e/test/fixtures/FixtureBuilder.ts e2e/src/fixtures/FixtureBuilder.tse2e/test/fixtures/FixtureBuilder.ts renamed to e2e/src/fixtures/FixtureBuilder.ts

@@ -1,13 +1,12 @@
-import axios from 'axios';
-import { FIXTURE_SERVER_URL } from '../../src/Constants';
-import FixtureServer from './FixtureServer';
-import { FixtureBuilder } from './FixtureBuilder';
+import FixtureServer from '@fixtures/FixtureServer';
+import { FixtureBuilder } from '@fixtures/FixtureBuilder';
+import { FIXTURE_SERVER_URL } from '@util/Constants';
 
 // checks if server has already been started
 const isFixtureServerStarted = async () => {
   try {
-    const response = await axios.get(FIXTURE_SERVER_URL);
-    return response.status === 200;
+    const response = await fetch(FIXTURE_SERVER_URL);
+    return response.ok;
   } catch (error) {
     return false;
   }
@@ -22,10 +21,10 @@ export const loadFixture = async (
   const state = fixture || new FixtureBuilder().build();
   fixtureServer.loadJsonState(state);
   // Checks if state is loaded
-  const response = await axios.get(FIXTURE_SERVER_URL);
+  const response = await fetch(FIXTURE_SERVER_URL);
 
   // Throws if state is not properly loaded
-  if (response.status !== 200) {
+  if (!response.ok) {
     throw new Error('Not able to load fixtures');
   }
 };

e2e/test/fixtures/FixtureHelper.ts e2e/src/fixtures/FixtureHelper.tse2e/test/fixtures/FixtureHelper.ts renamed to e2e/src/fixtures/FixtureHelper.ts

@@ -1,6 +1,6 @@
 import Koa from 'koa';
 import * as http from "http";
-import { FIXTURE_SERVER_HOST, FIXTURE_SERVER_PORT } from '../../src/Constants';
+import { FIXTURE_SERVER_HOST, FIXTURE_SERVER_PORT } from '@util/Constants';
 
 const CURRENT_STATE_KEY = '__CURRENT__';
 const DEFAULT_STATE_KEY = '__DEFAULT__';

e2e/test/fixtures/FixtureServer.ts e2e/src/fixtures/FixtureServer.tse2e/test/fixtures/FixtureServer.ts renamed to e2e/src/fixtures/FixtureServer.ts

@@ -1,8 +1,8 @@
 import { ChainablePromiseElement } from 'webdriverio';
-import { METAMASK_APP_NAME_ANDROID } from '../../Constants';
-import Gestures from '../../Gestures';
-import { getSelectorForPlatform } from '../../Utils';
-import { AndroidSelector } from '../../Selectors';
+import { METAMASK_APP_NAME_ANDROID } from '@util/Constants';
+import Gestures from '@util/Gestures';
+import { getSelectorForPlatform } from '@util/Utils';
+import { AndroidSelector } from '@util/Selectors';
 
 class AndroidSettingsOpeningLinksScreen {
   get openingLinksMetaMaskAppOption(): ChainablePromiseElement {

e2e/src/screens/Android/AndroidSettingsOpeningLinksScreen.ts

@@ -1,13 +1,13 @@
 import { ChainablePromiseArray, ChainablePromiseElement } from 'webdriverio';
 
 import { $$ } from '@wdio/globals';
-import Gestures from '../../Gestures';
-import { getSelectorForPlatform } from '../../Utils';
+import Gestures from '@util/Gestures';
+import { getSelectorForPlatform } from '@util/Utils';
 import {
   IS_RUNNING_IN_BROWSER_STACK,
   METAMASK_APP_NAME_ANDROID,
-} from '../../Constants';
-import { AndroidSelector } from '../../Selectors';
+} from '@util/Constants';
+import { AndroidSelector } from '@util/Selectors';
 
 class AndroidSettingsScreen {
   get metaMaskQALinksButton(): ChainablePromiseElement {