chore: setup e2e (#32)

.env.example

@@ -0,0 +1,12 @@
+## wallet setup
+WALLET_PRIVATE_KEY="..."
+METAMASK_VERSION="10.25.0"
+
+## environment setup
+CI=false
+
+## tenderly setup
+TENDERLY_ACCESS_KEY=""
+TENDERLY_ACCOUNT_ID=""
+TENDERLY_DEVNET_TEMPLATE=""
+TENDERLY_PROJECT=""

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -16,14 +16,21 @@ meta.json
 .DS_Store
 .env.local
 .env.development.local
-.env.test.local
+.env
 .env.production.local
 .env
 .eslintcache
 .vscode
 .idea
 
+# test files
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
+/test-results/
+/playwright-report/
+/playwright/.cache/

.scripts/install-tenderly.sh

@@ -0,0 +1,22 @@
+if ! command -v tenderly &> /dev/null
+then
+    # if on macos
+    if [[ "$OSTYPE" == "darwin"* ]]; then
+        echo "Installing tenderly-cli for MacOS..."
+        curl https://raw.githubusercontent.com/Tenderly/tenderly-cli/master/scripts/install-macos.sh | sh
+    # if on linux
+    elif [[ "$OSTYPE" == "linux"* ]]; then
+        echo "Installing tenderly-cli for Linux..."
+        curl https://raw.githubusercontent.com/Tenderly/tenderly-cli/master/scripts/install-linux.sh | sh
+    fi 
+
+    if ! command -v tenderly &> /dev/null 
+    then
+        echo "✗ Could not install tenderly-cli."
+        exit 1
+    fi
+
+    echo "✓ tenderly-cli installed."
+else
+    echo "✓ tenderly-cli already installed."
+fi

fixtures.ts

@@ -0,0 +1,73 @@
+import { test as base, chromium, type BrowserContext } from '@playwright/test';
+import { initialSetup } from '@synthetixio/synpress/commands/metamask';
+import { setExpectInstance } from '@synthetixio/synpress/commands/playwright';
+import { resetState } from '@synthetixio/synpress/commands/synpress';
+import { prepareMetamask } from '@synthetixio/synpress/helpers';
+
+import { createDevNet } from './tenderly';
+
+import { config } from 'dotenv';
+
+config();
+
+const { RPC_URL } = process.env;
+
+export const test = base.extend<{
+	context: BrowserContext;
+}>({
+	// eslint-disable-next-line no-empty-pattern
+	context: async ({}, use) => {
+		// required for synpress as it shares same expect instance as playwright
+		await setExpectInstance(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.WALLET_PRIVATE_KEY,
+			network: {
+				name: 'mainnet',
+				chainId: 1,
+				rpcUrl: RPC_URL,
+				symbol: 'ETH',
+			},
+			password: 'password',
+			enableAdvancedSettings: true,
+		});
+
+		await use(context);
+
+		await context.close();
+
+		await resetState();
+	},
+});
+
+export const expect = test.expect;