playwright test on connect ok

svelte/src/components/Account/Account.svelte

@@ -43,11 +43,11 @@
 
   <div class="col col-xs-12 col-sm-3">
     <div class="btn btn-light">
-      <div class="account">
+      <div class="account" >
         {#if accountAvatar}
           <img src={accountAvatar} width="30px" alt="avatar" /> &nbsp;&nbsp;
         {/if}
-        <span>
+        <span id="metamaskAccount">
           {getShortAddress(accountName, 10)}&nbsp;&nbsp;&nbsp;&nbsp;
         </span>
       </div>

svelte/src/components/Account/AccountConnect.svelte

@@ -41,7 +41,7 @@
 {:else}
   <div class={classMetamask}>
     {#if _metamaskInstalled}
-      <span role="button" tabindex="0" on:click|preventDefault={_metamaskConnect} on:keydown={_metamaskConnect}>
+      <span id="metamaskConnect" role="button" tabindex="0" on:click|preventDefault={_metamaskConnect} on:keydown={_metamaskConnect}>
         {metamaskConnectMessage}
       </span>
     {:else}

sveltekit/package.json

@@ -8,22 +8,26 @@
     "build": "ENVIR=PROD vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:chromium": "playwright install chromium",
+    "test": "playwright test"
   },
   "devDependencies": {
+    "@playwright/test": "^1.43.0",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@synthetixio/synpress": "3.7.2-beta.10",
     "prettier-plugin-svelte": "^3.2.2",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.7",
+    "svelte": "^4.2.13",
+    "svelte-check": "^3.6.9",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
-    "vitest": "^1.3.1"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vitest": "^1.4.0"
   },
   "type": "module",
   "dependencies": {
     "@kredeum/svelte": "workspace:^"
   }
-}
+}

sveltekit/playwright.config.ts

@@ -0,0 +1,19 @@
+import { type PlaywrightTestConfig, devices } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'pnpm build && pnpm preview',
+		port: 4173
+	},
+  projects: [
+      {
+        name: 'chromium',
+        use: { ...devices['Desktop Chrome'] }
+      }
+    ],
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;
+

sveltekit/tests/connect.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from './fixtures';
+import { metamask } from './synthetixio';
+
+test.only('connect wallet using default metamask account', async ({ page }) => {
+	await page.goto('/');
+	await page.click('#metamaskConnect');
+	await metamask.acceptAccess();
+	await expect(page.locator('#metamaskAccount')).toContainText('0xf39Fd6e5');
+});

sveltekit/tests/fixtures.ts

@@ -0,0 +1,54 @@
+import { test as base, chromium, type BrowserContext } from '@playwright/test';
+import { metamask, playwright, synpress, helpers } from './synthetixio';
+
+export const test = base.extend<{
+	context: BrowserContext;
+}>({
+	context: async ({}, use) => {
+		// required for synpress as it shares same expect instance as playwright
+		await playwright.setExpectInstance(expect);
+
+		// download metamask
+		const metamaskPath = await helpers.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 metamask.initialSetup(chromium, {
+			secretWordsOrPrivateKey: 'test test test test test test test test test test test junk',
+			network: 'optimism',
+			password: 'Tester@1234',
+			enableAdvancedSettings: true
+		});
+
+		await use(context);
+
+		await context.close();
+
+		await synpress.resetState();
+	}
+});
+
+export const expect = test.expect;

sveltekit/tests/synthetixio.ts

@@ -0,0 +1,9 @@
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
+const metamask = require('@synthetixio/synpress/commands/metamask');
+const playwright = require('@synthetixio/synpress/commands/playwright');
+const synpress = require('@synthetixio/synpress/commands/synpress');
+const helpers = require('@synthetixio/synpress/helpers');
+
+export { metamask, playwright, synpress, helpers };

sveltekit/tests/test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('index page title ok', async ({ page }) => {
+	await page.goto('/');
+  await expect(page).toHaveTitle('Kredeum NFTs Factory');
+});