Init synpress and playwright

ufm-test-services/metamask/.env.example

+METAMASK_SECRET_WORDS_OR_PRIVATEKEY=""
+METAMASK_NETWORK="goerli"
+METAMASK_PASSWORD="Test@1234"
+METAMASK_DAPP_URL="http://localhost:9011"

ufm-test-services/metamask/.gitignore

+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/

ufm-test-services/metamask/package.json

@@ -13,9 +13,15 @@
   "scripts": {
     "clean": "rm -rf node_modules packages/*/node_modules && echo 'Finished cleaning'",
     "lint": "prettier --check .",
-    "lint:fix": "prettier --write ."
+    "lint:fix": "prettier --write .",
+    "start:metamask-dapp": "npx static-server node_modules/@metamask/test-dapp/dist --port 9011"
   },
   "devDependencies": {
+    "@metamask/test-dapp": "^7.1.0",
+    "@playwright/test": "^1.37.1",
+    "@synthetixio/synpress": "3.7.2-beta.5",
+    "dotenv": "^16.3.1",
+    "static-server": "^2.2.1",
     "typescript": "^5.1.6"
   }
 }

ufm-test-services/metamask/playwright.config.ts

+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+import 'dotenv/config'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm run start:metamask-dapp',
+    url: process.env.METAMASK_DAPP_URL,
+    reuseExistingServer: false,
+  },
+});

ufm-test-services/metamask/tests/metamask.spec.ts

+import { testWithSynpress } from './testWithSynpress'
+import { test } from '@playwright/test'
+
+testWithSynpress('should be able to read', async ({ page }) => {
+	await page.goto('http://localhost:9011')
+})

ufm-test-services/metamask/tests/testWithSynpress.ts

+import 'dotenv/config'
+import {
+	type BrowserContext,
+	chromium,
+	expect,
+	test as base,
+} from '@playwright/test'
+import metamask from '@synthetixio/synpress/commands/metamask.js'
+import helpers from '@synthetixio/synpress/helpers.js'
+
+const { initialSetup } = metamask
+const { prepareMetamask } = helpers
+
+export const testWithSynpress = base.extend<{
+	context: BrowserContext
+}>({
+	context: async ({}, use) => {
+		// required for synpress
+		global.expect = expect
+		// download metamask
+		const metamaskPath = await prepareMetamask(
+			process.env.METAMASK_VERSION || '10.25.0',
+		)
+		// prepare browser args
+		const browserArgs = [
+			`--disable-extensions-except=${metamaskPath}`,
+			`--load-extension=${metamaskPath}`,
+			'--remote-debugging-port=9222',
+		]
+		if (process.env.CI) {
+			browserArgs.push('--disable-gpu')
+		}
+		if (process.env.HEADLESS_MODE) {
+			browserArgs.push('--headless=new')
+		}
+		// launch browser
+		const context = await chromium.launchPersistentContext('', {
+			headless: false,
+			args: browserArgs,
+		})
+		// wait for metamask
+		await context.pages()[0].waitForTimeout(3000)
+		// setup metamask
+		await initialSetup(chromium, {
+			secretWordsOrPrivateKey: process.env.METAMASK_SECRET_WORDS_OR_PRIVATEKEY,
+			network: process.env.METAMASK_NETWORK,
+			password: process.env.METAMASK_PASSWORD,
+			enableAdvancedSettings: true,
+		})
+		await use(context)
+		await context.close()
+	},
+})
+
+export { expect }