Make E2E tests pass with dev server

playwright/playwright.config.ts

@@ -1,6 +1,8 @@
 import type { PlaywrightTestConfig } from '@playwright/test'
 import { devices } from '@playwright/test'
 
+const doubleIfDev = (time: number) => (process.env.BASE_URL ? time : time * 2)
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -13,13 +15,13 @@ import { devices } from '@playwright/test'
 const config: PlaywrightTestConfig = {
   testDir: './tests',
   /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
+  timeout: doubleIfDev(30 * 1000),
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 8000,
+    timeout: doubleIfDev(8000),
   },
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -34,7 +36,7 @@ const config: PlaywrightTestConfig = {
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 3000,
+    actionTimeout: doubleIfDev(3000),
     /* Base URL to use in actions like `await page.goto('/')`. */
     /* Test dev server by default, but also allow testing `start:prod`. */
     baseURL: process.env.BASE_URL ?? 'http://localhost:3000',

playwright/tests/extension.spec.ts

@@ -75,7 +75,13 @@ test.describe('The extension popup should load', () => {
   })
 
   test('should allow embedded Transak widget', async ({ page, extensionId }) => {
-    await expectNoErrorsInConsole(page)
+    await expectNoErrorsInConsole(page, {
+      ignoreError: msg => {
+        // Odd errors inside Transak
+        if (msg.text().includes('responded with a status of 403')) return true
+        if (msg.text().includes('`sessionKey` is a required property')) return true
+      },
+    })
     await page.goto(`chrome-extension://${extensionId}/${popupFile}#/open-wallet/private-key`)
     await fillPrivateKeyWithoutPassword(page, {
       privateKey: privateKey,

playwright/tests/fiat.spec.ts

@@ -22,10 +22,15 @@ async function setup(page: Page) {
 }
 
 test.describe('Fiat on-ramp', () => {
-  test('Content-Security-Policy should allow embedded Transak widget', async ({ page, baseURL }) => {
-    expect(baseURL).toBe('http://localhost:5000')
+  test('Content-Security-Policy should allow embedded Transak widget', async ({ page }) => {
     expect((await page.request.head('/')).headers()).toHaveProperty('content-security-policy')
-    await expectNoErrorsInConsole(page)
+    await expectNoErrorsInConsole(page, {
+      ignoreError: msg => {
+        // Odd errors inside Transak
+        if (msg.text().includes('responded with a status of 403')) return true
+        if (msg.text().includes('`sessionKey` is a required property')) return true
+      },
+    })
     await setup(page)
     await page
       .getByText(
@@ -37,18 +42,12 @@ test.describe('Fiat on-ramp', () => {
     await expect(page.frameLocator('iframe')!.getByText('Please Enter Your Email')).toBeVisible()
   })
 
-  test('Content-Security-Policy should also allow Transak staging iframe', async ({ page, baseURL }) => {
-    expect(baseURL).toBe('http://localhost:5000')
+  test('Content-Security-Policy should also allow Transak staging iframe', async ({ page }) => {
     expect((await page.request.head('/')).headers()).toHaveProperty('content-security-policy')
     await expectNoErrorsInConsole(page)
     await setup(page)
-    await page.route('https://global.transak.com/*', route =>
-      route.fulfill({
-        status: 301,
-        headers: {
-          Location: 'https://global-stg.transak.com/',
-        },
-      }),
+    await page.route('https://*.transak.com/?*', route =>
+      route.fulfill({ status: 301, headers: { Location: 'https://global-stg.transak.com/' } }),
     )
 
     await page
@@ -58,19 +57,13 @@ test.describe('Fiat on-ramp', () => {
       .click()
   })
 
-  test('Content-Security-Policy should block unknown iframe and fail', async ({ page, baseURL }) => {
+  test('Content-Security-Policy should block unknown iframe and fail', async ({ page }) => {
     test.fail()
-    expect(baseURL).toBe('http://localhost:5000')
     expect((await page.request.head('/')).headers()).toHaveProperty('content-security-policy')
     // await expectNoErrorsInConsole(page) // TODO: revert when playwright doesn't skip other tests because of this
     await setup(page)
-    await page.route('https://global.transak.com/*', route =>
-      route.fulfill({
-        status: 301,
-        headers: {
-          Location: 'https://phishing-transak.com/',
-        },
-      }),
+    await page.route('https://*.transak.com/*', route =>
+      route.fulfill({ status: 301, headers: { Location: 'https://phishing-transak.com/' } }),
     )
     await page.route('https://phishing-transak.com/', route => route.fulfill({ body: `phishing` }))
 
@@ -84,11 +77,11 @@ test.describe('Fiat on-ramp', () => {
     ])
   })
 
-  test('Sandbox should block top-navigation from iframe and fail', async ({ page, baseURL }) => {
+  test('Sandbox should block top-navigation from iframe and fail', async ({ page }) => {
     test.fail()
     // await expectNoErrorsInConsole(page) // TODO: revert when playwright doesn't skip other tests because of this
     await setup(page)
-    await page.route('https://global.transak.com/*', route =>
+    await page.route('https://*.transak.com/*', route =>
       route.fulfill({
         body: `<script>window.top.location = 'https://phishing-wallet.com/';</script>`,
       }),
@@ -106,8 +99,7 @@ test.describe('Fiat on-ramp', () => {
     await expect(page).toHaveURL('https://phishing-wallet.com/')
   })
 
-  test('Permissions-Policy should contain Transak permissions', async ({ page, baseURL }) => {
-    expect(baseURL).toBe('http://localhost:5000')
+  test('Permissions-Policy should contain Transak permissions', async ({ page }) => {
     expect((await page.request.head('/')).headers()).toHaveProperty('permissions-policy')
     await expectNoErrorsInConsole(page)
     await setup(page)

playwright/tests/ledger.spec.ts

@@ -2,8 +2,7 @@ import { test, expect } from '@playwright/test'
 import { expectNoErrorsInConsole } from '../utils/expectNoErrorsInConsole'
 
 test.describe('Ledger', () => {
-  test('Permissions-Policy should allow USB', async ({ page, baseURL }) => {
-    expect(baseURL).toBe('http://localhost:5000')
+  test('Permissions-Policy should allow USB', async ({ page }) => {
     expect((await page.request.head('/')).headers()).toHaveProperty('permissions-policy')
     await expectNoErrorsInConsole(page)
 

playwright/tests/validators.spec.ts

@@ -28,8 +28,7 @@ test.beforeEach(async ({ page }) => {
 })
 
 test.describe('Validators', () => {
-  test('Content-Security-Policy should allow validator icons', async ({ page, baseURL }) => {
-    expect(baseURL).toBe('http://localhost:5000')
+  test('Content-Security-Policy should allow validator icons', async ({ page }) => {
     expect((await page.request.head('/')).headers()).toHaveProperty('content-security-policy')
 
     const someValidatorIconPromise = page.waitForResponse(