feat: add support for brave browser in tests (#1997)

.github/workflows/ui_tests.yml

@@ -57,6 +57,9 @@ jobs:
       - name: Get installed Playwright version
         id: playwright-version
         run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').packages['apps/laboratory']['devDependencies']['@playwright/test'])")" >> $GITHUB_ENV
+      - name: Install Brave Browser
+        working-directory: ./apps/laboratory/
+        run: sudo ./scripts/install-brave-browser.sh
       - name: Cache playwright binaries
         uses: actions/cache@v4
         id: playwright-cache

apps/laboratory/scripts/install-brave-browser.sh

@@ -0,0 +1,11 @@
+echo "Installing Brave Browser"
+
+touch /var/lib/man-db/auto-update
+
+curl -fsSLo /usr/share/keyrings/brave-browser-archive-keyring.gpg https://brave-browser-apt-release.s3.brave.com/brave-browser-archive-keyring.gpg
+
+echo "deb [signed-by=/usr/share/keyrings/brave-browser-archive-keyring.gpg] https://brave-browser-apt-release.s3.brave.com/ stable main" | tee /etc/apt/sources.list.d/brave-browser-release.list
+
+apt update -y
+
+apt install brave-browser -y

apps/laboratory/tests/shared/constants/browsers.ts

@@ -0,0 +1,2 @@
+export const BRAVE_MACOS_PATH = '/Applications/Brave Browser.app/Contents/MacOS/Brave Browser'
+export const BRAVE_UBUNTU_PATH = '/usr/bin/brave-browser'

apps/laboratory/tests/shared/constants/devices.ts

@@ -1 +1 @@
-export const DEVICES = ['Desktop Chrome', 'Desktop Firefox', 'Desktop Safari']
+export const DEVICES = ['Desktop Chrome', 'Desktop Brave', 'Desktop Firefox']

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -81,12 +81,12 @@ export class ModalPage {
 
   async disconnect() {
     const accountBtn = this.page.getByTestId('account-button')
-    await expect(accountBtn).toBeVisible()
-    await expect(accountBtn).toBeEnabled()
+    await expect(accountBtn, 'Account button should be visible').toBeVisible()
+    await expect(accountBtn, 'Account button should be enabled').toBeEnabled()
     await accountBtn.click({ force: true })
     const disconnectBtn = this.page.getByTestId('disconnect-button')
-    await expect(disconnectBtn).toBeVisible()
-    await expect(disconnectBtn).toBeEnabled()
+    await expect(disconnectBtn, 'Disconnect button should be visible').toBeVisible()
+    await expect(disconnectBtn, 'Disconnect button should be visible').toBeEnabled()
     await disconnectBtn.click({ force: true })
   }
 
@@ -108,7 +108,7 @@ export class ModalPage {
 
   async promptSiwe() {
     const siweSign = this.page.getByTestId('w3m-connecting-siwe-sign')
-    await expect(siweSign, 'Siwe promp sign button should be enabled').toBeEnabled()
+    await expect(siweSign, 'Siwe prompt sign button should be enabled').toBeEnabled()
     await siweSign.click()
   }
 

apps/laboratory/tests/shared/utils/device.ts

@@ -1,9 +1,5 @@
 import { DEVICES } from '../constants/devices'
 
 export function getAvailableDevices(): string[] {
-  if (!process.env['CI']) {
-    return DEVICES
-  }
-
-  return DEVICES.filter(d => d !== 'Desktop Safari')
+  return DEVICES
 }

apps/laboratory/tests/shared/utils/project.ts

@@ -1,5 +1,7 @@
 import { devices } from '@playwright/test'
 import { getAvailableDevices } from './device'
+import { getValue } from './config'
+import { BRAVE_MACOS_PATH, BRAVE_UBUNTU_PATH } from '../constants/browsers'
 
 const availableDevices = getAvailableDevices()
 
@@ -9,16 +11,35 @@ const PERMUTATIONS = availableDevices.flatMap(device =>
   LIBRARIES.map(library => ({ device, library }))
 )
 
+interface UseOptions {
+  launchOptions: {
+    executablePath: string
+  }
+}
+
 interface CustomProperties {
   testIgnore?: string
   testMatch?: string
+  useOptions?: UseOptions
 }
 
 export type CustomProjectProperties = {
   [T in string]: CustomProperties
 }
 
+const braveOptions: UseOptions = {
+  launchOptions: {
+    executablePath: getValue(BRAVE_UBUNTU_PATH, BRAVE_MACOS_PATH)
+  }
+}
+
 const customProjectProperties: CustomProjectProperties = {
+  'Desktop Brave/wagmi': {
+    useOptions: braveOptions
+  },
+  'Desktop Brave/ethers': {
+    useOptions: braveOptions
+  },
   'Desktop Chrome/wagmi': {
     testIgnore: 'email.spec.ts'
   },
@@ -37,13 +58,17 @@ export interface Permutation {
 
 export function getProjects() {
   return PERMUTATIONS.map(({ device, library }) => {
+    const deviceName = device === 'Desktop Brave' ? 'Desktop Chrome' : device
     let project = {
       name: `${device}/${library}`,
-      use: { ...devices[device], library }
+      use: { ...devices[deviceName], library }
     }
     const props = customProjectProperties[project.name]
     if (props) {
       project = { ...project, ...props }
+      if (props.useOptions) {
+        project.use = { ...project.use, ...props.useOptions }
+      }
     }
 
     return project

apps/laboratory/tests/shared/validators/WalletValidator.ts

@@ -17,7 +17,10 @@ export class WalletValidator {
   }
 
   async expectConnected() {
-    await expect(this.gotoSessions).toBeVisible()
+    await expect(
+      this.gotoSessions,
+      'Approve screen should be closed and sessions tab visible'
+    ).toBeVisible()
     await this.gotoSessions.click()
     await this.expectSessionCard()
   }