Merge pull request #7150 from ethereum-optimism/wyatt/ufm/synpress-playwright-init

Init synpress and playwright

pnpm-workspace.yaml

@@ -2,4 +2,3 @@ packages:
   - 'packages/*'
   - 'endpoint-monitor'
   - 'op-exporter'
-  - 'ufm-test-services/metamask'

ufm-test-services/.env.example

+CI=false
+
+GRAFANA_ADMIN_PWD=
+
+# Used to set the display to be used by playwright when running Metamask test service
+MM_DISPLAY=host.docker.internal:0
+MM_DISPLAY_VOLUME=/tmp/.X11-unix:/tmp/.X11-unix
\ No newline at end of file

ufm-test-services/crontab-example

@@ -5,4 +5,4 @@ PATH=/
 * * * * * /usr/local/bin/docker-compose -f /path/to/docker-compose.yml --profile 1minute up -d
 
 # Runs every 5 minutes
-*/5 * * * * /usr/local/bin/docker-compose -f /path/to/docker-compose.yml --profile 5minutes up -d
+*/5 * * * * /usr/local/bin/docker-compose -f /path/to/docker-compose.yml --profile 5minutes up -d
\ No newline at end of file

ufm-test-services/datesources.yml

@@ -5,4 +5,4 @@ datasources:
     type: prometheus
     access: proxy
     url: http://prometheus:9090
-    isDefault: true
+    isDefault: true
\ No newline at end of file

ufm-test-services/docker-compose.yml

@@ -33,8 +33,7 @@ services:
     depends_on:
       - prometheus
     environment:
-      # TODO - Replace with ENV variables to allow for better security
-      - GF_SECURITY_ADMIN_PASSWORD=adminpassword
+      - GF_SECURITY_ADMIN_PASSWORD=${GRAFANA_ADMIN_PWD}
     volumes:
       - ./datesources.yml:/etc/grafana/provisioning/datasources/datasources.yaml
     security_opt:

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

@@ -11,10 +11,17 @@
   "homepage": "https://optimism.io",
   "type": "module",
   "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/pnpm-workspace.yaml

+packages:
+  - ./

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 }