test: improve timeout handling and page navigation in e2e tests (#1852)

# Checklist

- [x] I've added error handling for all actions/requests, and verified
how this error will show on UI. (or there was no error handling)
- [x] I've reviewed all the copy changed/added in this PR, using AI if
needed. (or there was no copy changes)
- [x] I've included the reference to the issues being closed from Github
and/or Linear (or there was no issues)
- [x] I've changed the Docs to reflect my changes (or it was not needed)
- [x] I've put docs links where it may be helpful (or it was not needed)
- [x] I checked the resulting UI both in Light and Dark mode (or no UI
changes were made)
- [x] I **reviewed** the **entire PR** myself (preferably, on GH UI)

Author: arthurgeron

.changeset/cool-teachers-drive.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+test: improve timeout handling and page navigation in e2e tests

packages/app/playwright/commons/logout.ts

@@ -1,10 +1,14 @@
 import type { Page } from '@playwright/test';
 
+import { expect } from '@fuels/playwright-utils';
 import { getButtonByText } from './button';
 import { getByAriaLabel } from './locator';
 import { hasText } from './text';
 
 export const logout = async (page: Page) => {
+  await expect
+    .poll(async () => () => getByAriaLabel(page, 'Menu'), { timeout: 1000 })
+    .not.toThrow();
   await getByAriaLabel(page, 'Menu').click();
   await page.locator(`[data-key="settings"]`).click();
   await page.locator(`[data-key="logout"]`).click();

packages/app/playwright/crx/crx.test.ts

@@ -1,5 +1,5 @@
 import type { NetworkData, Account as WalletAccount } from '@fuel-wallet/types';
-import { type Locator, expect } from '@playwright/test';
+import { type Locator, Page, expect } from '@playwright/test';
 
 import {
   delay,
@@ -92,6 +92,7 @@ test.describe('FuelWallet Extension', () => {
     const popupPage = await context.newPage();
     const pagePromise = context.waitForEvent('page', {
       predicate: (page) => page.url().includes('sign-up'),
+      timeout: 10_000,
     });
     await popupPage.goto(`chrome-extension://${extensionId}/popup.html`);
     const page = await pagePromise;
@@ -298,6 +299,7 @@ test.describe('FuelWallet Extension', () => {
       });
       const connectPage = await context.waitForEvent('page', {
         predicate: (page) => page.url().includes(extensionId),
+        timeout: 10_000,
       });
 
       await expect
@@ -359,6 +361,7 @@ test.describe('FuelWallet Extension', () => {
         );
         const selectNetworkPage = await context.waitForEvent('page', {
           predicate: (page) => page.url().includes(extensionId),
+          timeout: 10_000,
         });
         await hasText(selectNetworkPage, 'Switching To');
         await hasText(selectNetworkPage, network.name);
@@ -386,6 +389,7 @@ test.describe('FuelWallet Extension', () => {
 
         const selectNetworkPage = await context.waitForEvent('page', {
           predicate: (page) => page.url().includes(extensionId),
+          timeout: 10_000,
         });
 
         await hasText(selectNetworkPage, 'Review the Network to be added:');
@@ -591,6 +595,7 @@ test.describe('FuelWallet Extension', () => {
         );
         const signMessageRequest = await context.waitForEvent('page', {
           predicate: (page) => page.url().includes(extensionId),
+          timeout: 10_000,
         });
         // Confirm signature
         await hasText(signMessageRequest, message);
@@ -686,6 +691,7 @@ test.describe('FuelWallet Extension', () => {
         // Wait for approve transaction page to show
         const approveTransactionPage = await context.waitForEvent('page', {
           predicate: (page) => page.url().includes(extensionId),
+          timeout: 10_000,
         });
 
         // Approve transaction
@@ -791,6 +797,7 @@ test.describe('FuelWallet Extension', () => {
 
       const addAssetPage = await context.waitForEvent('page', {
         predicate: (page) => page.url().includes(extensionId),
+        timeout: 10_000,
       });
       await hasText(addAssetPage, 'Review the Assets to be added:');
       await getButtonByText(addAssetPage, /add assets/i).click();
@@ -814,6 +821,7 @@ test.describe('FuelWallet Extension', () => {
 
       const addAssetPage = await context.waitForEvent('page', {
         predicate: (page) => page.url().includes(extensionId),
+        timeout: 10_000,
       });
       await hasText(addAssetPage, 'Review the Assets to be added:');
       await getButtonByText(addAssetPage, /add assets/i).click();

packages/app/playwright/crx/lock.test.ts

@@ -23,11 +23,12 @@ test.describe('Lock FuelWallet after inactivity', () => {
     extensionId,
   }) => {
     const popupPage = await context.newPage();
-    await popupPage.goto(`chrome-extension://${extensionId}/popup.html`);
-    const page = await context.waitForEvent('page', {
+    const pagePromise = context.waitForEvent('page', {
       predicate: (page) => page.url().includes('sign-up'),
+      timeout: 10_000,
     });
-    expect(page.url()).toContain('sign-up');
+    await popupPage.goto(`chrome-extension://${extensionId}/popup.html`);
+    expect((await pagePromise).url()).toContain('sign-up');
   });
 
   test('should lock the wallet after 1 minute of inactivity (config in .env file)', async ({