fix: e2e

README.md

@@ -2,15 +2,16 @@
 
 [OneKey DApp Example](https://dapp-example.onekeytest.com/)
 
-
 # Init monorepo
+
 ```bash
 yarn
 yarn bootstrap
 yarn build
 ```
 
 # Develop monorepo
+
 ```bash
 # Clean cache
 yarn clean && yarn bootstrap
@@ -30,18 +31,55 @@ yarn gulp-watch
 ```
 
 # Run dapp example web
+
 ```bash
 yarn example
 ```
 
 # Update all versions before publish
+
 ```bash
 yarn update-version 1.0.1
 ```
 
 # Publish to npmjs.com
+
 ```bash
 yarn publish-packages
 ```
 
 
+# E2E Test
+
+```
+# start dev runtime build
+yarn && yarn bootstrap && yarn start
+
+# run e2e test headless
+yarn test:e2e
+
+# run e2e test headed
+yarn test:e2e:headed
+
+# check e2e reports & screenshots
+# packages/e2e/playwright-report
+# packages/e2e/test-results
+
+
+
+
+```
+
+packages/providers/inpage-providers-hub/src/connectButtonHack/universal/config.ts
+
+skip connectButton site test
+
+```
+skip: { mobile: true, desktop: true },
+```
+
+only connectButton site test
+
+```
+only: true,
+```

package.json

@@ -24,8 +24,8 @@
     "example-build": "cd ./packages/example && yarn --registry 'https://registry.npmjs.org' && yarn build",
     "update-version": "lerna version --no-git-tag-version --exact",
     "swap-lock-registry": "npx swap-lock-registry --yarn --parallel --url https://registry.yarnpkg.com yarn.lock",
-    "test:e2e": "cd ./packages/e2e && yarn test:headed",
-    "test:e2e:hub": "cd ./packages/providers/inpage-providers-hub && yarn test:headed"
+    "test:e2e:headed": "cd ./packages/e2e && yarn test:headed",
+    "test:e2e": "cd ./packages/e2e && yarn test"
   },
   "devDependencies": {
     "@testing-library/react-hooks": "^7.0.2",

packages/e2e/.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 test-results/
 playwright-report/
+reports/
 playwright/.cache/ 

packages/e2e/package.json

@@ -26,9 +26,9 @@
   "scripts": {
     "env": "node dotEnvInit.js",
     "report": "yarn env && npx playwright show-report",
-    "test": "yarn env && npx playwright test",
-    "test:headed": "yarn env && npx playwright test  --headed && yarn report",
-    "test:ui": "yarn env && npx playwright test --ui"
+    "test": "yarn env && npx playwright test ",
+    "test:headed": "yarn env && npx playwright test --headed ",
+    "test:ui": "yarn env && npx playwright test --ui "
   },
   "dependencies": {
     "@onekeyfe/inpage-providers-hub": "2.1.23",

packages/e2e/playwright.config.ts

@@ -7,16 +7,27 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
+  reporter: [
+    [
+      'html',
+      {
+        outputFolder: 'playwright-report',
+      },
+    ],
+  ],
+  outputDir: 'test-results',
   use: {
     baseURL: 'http://localhost:3000',
     trace: 'on-first-retry',
   },
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], viewport: { width: 1440, height: 800 } },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['iPhone 6'] },
     },
   ],
-  outputDir: 'test-results',
 });

packages/e2e/tests/bing.e2e.ts

@@ -9,7 +9,7 @@ declare global {
 
 import { expect, test } from '@playwright/test';
 
-test.skip('Bing search test', async ({ page }) => {
+test('Bing search test', async ({ page }) => {
   // 打开 Bing
   await page.goto('https://www.baidu.com');
 

packages/providers/inpage-providers-hub/src/connectButtonHack/universal/__tests__/fixtures/index.ts → packages/e2e/tests/connectButton/fixtures/withChromeExtension.ts

@@ -1,6 +1,6 @@
 import { test as base, chromium, type BrowserContext } from '@playwright/test';
-import path from 'path';
 import env from 'dotenv';
+import path from 'path';
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 env.config({ path: path.resolve(`${__dirname}/../../../../../../../../.env`) });
 

packages/providers/inpage-providers-hub/src/connectButtonHack/universal/__tests__/universal.spec.ts → packages/e2e/tests/connectButton/universal.e2e.ts

@@ -1,9 +1,20 @@
 import { type IInjectedProviderNames } from '@onekeyfe/cross-inpage-provider-types';
+import { expect, test } from '@playwright/test';
 import path from 'node:path';
 import { Locator } from 'playwright/test';
-import { sitesConfig } from '../config';
-import { createWalletId } from '../utils';
-import { expect, test } from './fixtures';
+
+import * as fs from 'fs';
+
+import { connectButtonData } from '@onekeyfe/inpage-providers-hub';
+
+const injectedCode = fs.readFileSync(
+  path.resolve(
+    'node_modules/@onekeyfe/cross-inpage-provider-injected/dist/injected/injectedNative.js',
+  ),
+  'utf-8',
+);
+
+const { sitesConfig,createWalletId } = connectButtonData;
 
 
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
@@ -14,9 +25,10 @@ async function dbg(locator: Locator) {
 }
 test.describe('Connect Button Hack', () => {
   console.log('total sites:', sitesConfig.length);
-  const startWebSite = 'app.vesper.finance';
-  const startIdx = sitesConfig.findIndex((e) => e.urls.includes(startWebSite));
-  const availableSites = sitesConfig.slice(startIdx == -1 ? 0 : startIdx);
+  // const startWebSite = 'app.vesper.finance';
+  // const startIdx = sitesConfig.findIndex((e) => e.urls.includes(startWebSite));
+  // const availableSites = sitesConfig.slice(startIdx == -1 ? 0 : startIdx);
+  const availableSites = sitesConfig
   const sitesOnly = availableSites.filter((e) => e.only);
   const sites = sitesOnly.length > 0 ? sitesOnly : availableSites;
   const sitesWithoutSkip = sites.filter((e) => (typeof e.skip === 'boolean' ? !e.skip : true))
@@ -33,6 +45,7 @@ test.describe('Connect Button Hack', () => {
       test(url, async ({ page }, testInfo) => {
         const { project: { name }, } = testInfo;
         const index = sitesConfig.findIndex((e) => e.urls.includes(url));
+        // @ts-ignore
         testInfo['index'] = index;
         const device = name.includes('Mobile') ? 'mobile' : 'desktop';
         if (typeof skip === 'object' && skip !== null && skip[device] === true) {
@@ -42,8 +55,13 @@ test.describe('Connect Button Hack', () => {
           console.log(`[chrome-devtool]: ${msg.text()}`);
         });
         await page.goto(`https://${url}`, { waitUntil: 'domcontentloaded' });
+
+        // eval injectedCode
+        await page.evaluate(injectedCode);
+
         if (typeof testPath === 'function') {
-          await testPath(page as any);
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          await testPath(page);
         } else {
           const actualPath = Array.isArray(testPath) ? testPath : testPath[device] || [];
           for (const seg of actualPath) {
@@ -69,7 +87,12 @@ test.describe('Connect Button Hack', () => {
             const locator = page.locator(walletId.walletIdSelector).first();
             const existed = await locator.evaluate((el) => !!el );
             console.log('[dbg]: walletId found existed', walletId.walletId, existed);
-            expect(existed).toBeTruthy();
+
+            if(!existed){
+              expect(existed).toBe(walletId.walletIdSelector);
+            }else{
+              expect(existed).toBe(true);
+            }
           }
         }
       });
@@ -78,9 +101,22 @@ test.describe('Connect Button Hack', () => {
   //@ts-ignore
   test.afterEach(async ({ page }, { project: { name }, status, index }) => {
     const isMobile = name.includes('Mobile');
-    const host = page.url().split('/')[2] || 'passed';
+    const url = page.url() || 'unknown-url';
+    let hostname = url;
+    try {
+      hostname = new URL(url).hostname;
+    } catch (error) {
+      console.error('Failed to parse URL:', error);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    const screenshotPath = `test-results/screenshots/connectButton/universal/${status}/${index}-${hostname}-${isMobile ? 'mobile' : 'desktop'}-${status}.png`
+
     await page.screenshot({
-      path: `${__dirname}/screenshots/${index}-${host}-${isMobile ? 'mobile' : 'desktop'}-${status}.png`,
+      path: screenshotPath,
     });
   });
 });
+
+
+// npx playwright test --headed tests/connectButton/universal.e2e.ts

packages/e2e/tests/dapp.e2e.ts

@@ -35,3 +35,6 @@ test('dapp-test', async ({ page }) => {
   // 设置浏览器在测试完成后保持打开状态
   await page.pause();
 });
+
+
+// npx playwright test --headed tests/dapp.e2e.ts

packages/e2e/tests/example.e2e.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-test.skip('basic test', async ({ page }) => {
+test('basic test', async ({ page }) => {
   await page.goto('https://example.walletconnect.org');
   await expect(page).toHaveTitle(/React/);
 }); 

packages/providers/inpage-providers-hub/package.json

@@ -25,8 +25,6 @@
   "scripts": {
     "prebuild": "rm -rf dist",
     "build": "tsc && tsc --project tsconfig.cjs.json",
-    "test": "npx playwright test",
-    "test:report": "npx playwright show-report reports",
     "start": "tsc --watch"
   },
   "dependencies": {
@@ -54,8 +52,7 @@
     "web3": "^1.7.3"
   },
   "devDependencies": {
-    "@playwright/test": "^1.43.1",
-    "@types/node": "^20.12.7",
-    "playwright": "^1.43.1"
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.12.7"
   }
 }

packages/providers/inpage-providers-hub/src/connectButtonHack/universal/config.ts

@@ -224,6 +224,7 @@ const petraForRainbowKit: WalletInfo = {
 
 export const sitesConfig: SitesInfo[] = [
   {
+    // only: true,
     urls: ['app.turbos.finance'],
     testPath: [':text("I accept the")', ':text("Continue")', ':text("Connect Wallet")'],
     walletsForProvider: {
@@ -236,6 +237,7 @@ export const sitesConfig: SitesInfo[] = [
     },
   },
   {
+    // only: true,
     urls: ['app.defisaver.com'],
     testPath: ['button:text("ACCEPT")'],
     walletsForProvider: {
@@ -260,6 +262,7 @@ export const sitesConfig: SitesInfo[] = [
     },
   },
   {
+    // only: true,
     urls: ['haedal.xyz'],
     testPath: [':text("Stake Now")', ':text("Connect Wallet")'],
     walletsForProvider: {

packages/providers/inpage-providers-hub/src/connectButtonHack/universal/utils.ts

@@ -66,6 +66,7 @@ export function createWalletId(provider: IInjectedProviderNames, updatedName: st
     /onekey/i,
     'onekey-',
   );
+  // data-wallet-id="ethereum-onekey-metamask"
   const walletIdSelector = `[data-wallet-id="${walletId}"]`;
   return {
     walletId,