playwright and core.app integration (#2141)

Signed-off-by: Eunji Song <[email protected]>
Co-authored-by: Tyler Hackett <[email protected]>

packages/core-mobile/detox.config.js

@@ -302,6 +302,16 @@ module.exports = {
       app: 'android.internal.debug',
       artifacts: {
         rootDir: './e2e/artifacts/android'
+      },
+      testRunner: {
+        $0: 'jest',
+        args: {
+          config: './e2e/configs/reuseStateConfig.json'
+        },
+        jest: {
+          setupTimeout: 300000,
+          testTimeout: 300000
+        }
       }
     },
     'android.internal.debug.reuse_state': {

packages/core-mobile/e2e/configs/reuseStateConfig.json

@@ -7,7 +7,8 @@
   "testMatch": [
     "<rootDir>/tests/**/*.e2e.ts",
     "<rootDir>/tests/**/*.e2e.smoke.ts",
-    "<rootDir>/tests/**/*.e2e.parameterized.ts"
+    "<rootDir>/tests/**/*.e2e.parameterized.ts",
+    "<rootDir>/tests/**/*.e2e.playwright.ts"
   ],
   "reporters": ["detox/runners/jest/reporter"],
   "verbose": true,

packages/core-mobile/e2e/helpers/playwrightActions.ts

@@ -0,0 +1,34 @@
+import { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+const fs = require('fs')
+
+const tap = async (item: Locator, timeout = 5000) => {
+  await expect(item.first()).toBeEnabled({ timeout })
+  await item.first().click()
+}
+
+const open = async (url: string, page: Page) => {
+  await page.goto(url)
+  await page.setViewportSize({ width: 2080, height: 1080 })
+}
+
+const waitFor = async (item: Locator, timeout = 5000) => {
+  await expect(item).toBeVisible({ timeout })
+}
+
+async function writeQrCodeToFile(clipboardValue: string) {
+  fs.writeFile(
+    './e2e/tests/playwright/qr_codes.txt',
+    clipboardValue,
+    (err: NodeJS.ErrnoException | null) => {
+      if (err) throw err
+    }
+  )
+}
+
+export default {
+  tap,
+  open,
+  waitFor,
+  writeQrCodeToFile
+}

packages/core-mobile/e2e/helpers/playwrightSetup.ts

@@ -0,0 +1,39 @@
+import { test, Page } from '@playwright/test'
+const { chromium } = require('playwright-extra')
+const stealth = require('puppeteer-extra-plugin-stealth')()
+chromium.use(stealth)
+
+export const warmupWeb = async () => {
+  const browser = await chromium.launch({ headless: false })
+  const page = await browser.newPage()
+  return { browser, page }
+}
+
+export const playwrightSetup = () => {
+  let browser: { close: () => Promise<void> } | null = null
+  let page: Page | null = null
+
+  test.beforeAll(async () => {
+    const context = await warmupWeb()
+    browser = context.browser
+    page = context.page
+    console.log('Starting Playwright test...')
+  })
+
+  test.afterAll(async () => {
+    if (browser) {
+      await browser.close()
+      browser = null
+      page = null
+    }
+    console.log('Closing Playwright test...')
+  })
+
+  return () => {
+    if (page !== null) {
+      return { browser, page }
+    } else {
+      throw new Error('Page is not initialized or invalid type.')
+    }
+  }
+}

packages/core-mobile/e2e/pages/commonPlaywrightEls.page.ts

@@ -1,5 +1,6 @@
 import { Page } from '@playwright/test'
 import commonEls from '../locators/commonPlaywrightEls.loc'
+import playwrightActions from '../helpers/playwrightActions'
 class CommonElsPage {
   page: Page
 
@@ -27,10 +28,12 @@ class CommonElsPage {
     return this.page.getByText('Connect to a wallet')
   }
 
-  async qrUriValue(locator = 'wcm') {
+  async qrUriValue(locator = 'wcm', timeout = 5000) {
     if (locator === 'wcm') {
+      await playwrightActions.waitFor(this.wcmWalletUri, timeout)
       return await this.wcmWalletUri.getAttribute('uri')
     } else {
+      await playwrightActions.waitFor(this.wuiQrCodeUri, timeout)
       return await this.wuiQrCodeUri.getAttribute('uri')
     }
   }

packages/core-mobile/e2e/pages/coreApp.page.ts

@@ -1,13 +1,13 @@
 import { Page } from '@playwright/test'
 
-class CoreAppPage {
+class CoreApp {
   page: Page
 
   constructor(page: Page) {
     this.page = page
   }
 
-  get coreAppHomepage() {
+  get coreUrl() {
     return 'https://core.app/'
   }
 
@@ -19,21 +19,13 @@ class CoreAppPage {
     return this.page.locator('[data-testid="connect-terms-continue-btn"]')
   }
 
-  get connectWalletBtn() {
+  get connect() {
     return this.page.locator('[data-testid="connect-wallet-button"]')
   }
 
-  async clickConnectWalletBtn() {
-    await this.connectWalletBtn.click()
-  }
-
-  async clickAcceptTermsCheckbox() {
-    await this.termsCheckBox.click()
-  }
-
-  async clickContinueBtn() {
-    await this.continueBtn.click()
+  get coreMobile() {
+    return this.page.locator('[data-testid="connect-core-mobile"]')
   }
 }
 
-export default CoreAppPage
+export default CoreApp

packages/core-mobile/e2e/pages/plusMenu.page.ts

@@ -53,11 +53,15 @@ class PlusMenuPage {
     await Actions.tap(this.buyButton)
   }
 
-  async connectWallet(qrUri: string) {
+  async connectWallet(qrUri = '') {
     await bottomTabsPage.tapPortfolioTab()
     await bottomTabsPage.tapPlusIcon()
     await this.tapWalletConnectButton()
-    await scanQrCodePage.setQrCode(qrUri.toString())
+    if (qrUri) {
+      await scanQrCodePage.setQrCode(qrUri.toString())
+    } else {
+      await scanQrCodePage.enterQrCode()
+    }
   }
 
   async tapBridgeButton() {

packages/core-mobile/e2e/tests/playwright/core/core.e2e.playwright.ts

@@ -0,0 +1,11 @@
+import { warmup } from '../../../helpers/warmup'
+import connectToSitePage from '../../../pages/connectToSite.page'
+import plusMenuPage from '../../../pages/plusMenu.page'
+
+describe('PlayWright Integration', () => {
+  it('should connect Core App', async () => {
+    await warmup()
+    await plusMenuPage.connectWallet()
+    await connectToSitePage.selectAccountAndconnect()
+  })
+})

packages/core-mobile/e2e/tests/playwright/core/core.spec.ts

@@ -0,0 +1,25 @@
+import { test } from '@playwright/test'
+import CoreApp from '../../../pages/coreApp.page'
+import CommonPlaywrightPage from '../../../pages/commonPlaywrightEls.page'
+import playwrightActions from '../../../helpers/playwrightActions'
+import { playwrightSetup } from '../../../helpers/playwrightSetup'
+
+const getContext = playwrightSetup()
+
+test('Connect Core', async () => {
+  const { page } = getContext()
+  const common = new CommonPlaywrightPage(page)
+  const core = new CoreApp(page)
+
+  await playwrightActions.open(core.coreUrl, core.page)
+  await playwrightActions.tap(core.connect, 10000)
+  await playwrightActions.tap(core.coreMobile)
+  await playwrightActions.tap(core.termsCheckBox)
+  await playwrightActions.tap(core.continueBtn)
+  await playwrightActions.tap(common.walletConnectBtn)
+  const uri = await common.qrUriValue('w3m')
+  console.log('URI: ', uri)
+  if (uri) {
+    await playwrightActions.writeQrCodeToFile(uri)
+  }
+})

packages/core-mobile/e2e/tests/playwright/core/run-tests.js

@@ -0,0 +1,31 @@
+const { execSync } = require('child_process')
+
+const runTests = () => {
+  const testFile = 'e2e/tests/playwright/core/core.spec.ts'
+  const testFile2 = 'e2e/tests/playwright/core/core.e2e.playwright.ts'
+
+  try {
+    // Test Playwright
+    console.log('Running Playwright tests...')
+    execSync(`npx playwright test ${testFile} --project=chromium`, {
+      stdio: 'inherit'
+    })
+
+    // Test Detox
+    console.log('Running Detox tests...')
+    execSync(`detox test -c ios.internal.debug ${testFile2}`, {
+      stdio: 'inherit'
+    })
+
+    console.log('All tests completed successfully.')
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error('Test execution failed:', error.message)
+    } else {
+      console.error('Unexpected error occurred:', error)
+    }
+    process.exit(1)
+  }
+}
+
+runTests()

packages/core-mobile/package.json

@@ -239,7 +239,9 @@
     "msw": "1.3.2",
     "node-fetch": "3.3.2",
     "patch-package": "8.0.0",
+    "playwright-extra": "4.3.6",
     "postinstall-postinstall": "2.1.0",
+    "puppeteer-extra-plugin-stealth": "2.11.2",
     "react-dom": "18.3.1",
     "react-native-svg-transformer": "1.5.0",
     "react-test-renderer": "18.3.1",