Mintlify Starter Kit

https://github.com/synpress-io/docs
Admin
The Mintlify Starter Kit is a template for creating documentation websites, providing examples for...
Tokens:38,377
Snippets:284
Trust Score:6
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Playwright and Dependencies

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-playwright.mdx

Installs Playwright and its necessary dependencies using npm. This command initializes Playwright and prompts the user to configure the installation.

```bash
npm init playwright@latest
```

--------------------------------

### Install Synpress and Cypress

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-cypress.mdx

Installs the Synpress library and Cypress as development dependencies in your project using npm.

```bash
npm install --save-dev cypress @synthetixio/synpress
```

--------------------------------

### Example Wallet Setup File with Synpress

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/cli.mdx

This TypeScript code demonstrates a typical wallet setup file for Synpress, utilizing `@synthetixio/synpress` to define wallet configurations. It imports necessary modules, reads environment variables for seed phrases and passwords, and includes logic to get the MetaMask extension ID and import the wallet. This is often used in conjunction with CLI commands to build or rebuild the wallet cache.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask } from '@synthetixio/synpress/playwright'
import 'dotenv/config'

const SEED_PHRASE = process.env.SEED_PHRASE
const PASSWORD = process.env.WALLET_PASSWORD

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const extensionId = await getExtensionId(context, 'MetaMask')
  
  const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId)

  await metamask.importWallet(SEED_PHRASE)
})
```

--------------------------------

### Synpress CLI for Cache Management

Source: https://context7.com/synpress-io/docs/llms.txt

Demonstrates how to use the Synpress command-line interface (CLI) to install Synpress and manage wallet setup caches. Shows commands for building the default cache and building from a custom directory.

```bash
# Install Synpress
npm install --save-dev @synthetixio/synpress

# Build MetaMask wallet cache (default: ./test/wallet-setup/*.setup.ts)
npx synpress

# Build cache from custom directory
npx synpress ./custom/path/to/wallet-setups
```

--------------------------------

### Write a Basic MetaMask Integration Test

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-cypress.mdx

An example Cypress test case using Synpress to connect a MetaMask wallet to a dApp and verify the displayed account address. It demonstrates basic element interaction and assertion.

```typescript
describe('MetaMask Integration', () => {
  it('should connect wallet and verify account', () => {
    // Click the connect button
    cy.get('#connectButton').click()

    // Connect MetaMask to the dApp
    cy.connectToDapp()

    // Verify the connected account address
    cy.get('#accounts').should(
      'have.text',
      '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266'
    )

    // Additional test steps can be added here, such as:
    // - Sending transactions
    // - Interacting with smart contracts
    // - Testing dapp-specific functionality
  })
})
```

--------------------------------

### Define Wallet Setup Configuration in Synpress v4

Source: https://github.com/synpress-io/docs/blob/main/docs/migration-guide.mdx

Demonstrates how to define wallet setup configurations using `defineWalletSetup` in Synpress v4. It shows importing a wallet using a seed phrase and mentions possibilities like importing from a private key or adding custom networks.

```typescript
    // test/wallet-setup/basic.setup.ts
    import { defineWalletSetup } from '@synthetixio/synpress'
    import { MetaMask } from '@synthetixio/synpress/playwright'
    import 'dotenv/config';

    const SEED_PHRASE = process.env.SEED_PHRASE;
    const PASSWORD = process.env.WALLET_PASSWORD;

    export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
      const extensionId = await getExtensionId(context, 'MetaMask');
      const metamask = new MetaMask(context, walletPage, PASSWORD);

      await metamask.importWallet(SEED_PHRASE);
    });

```

--------------------------------

### Build Synpress Cache with CLI Commands

Source: https://github.com/synpress-io/docs/blob/main/docs/migration-guide.mdx

Provides the necessary command-line interface commands for building the Synpress cache, which involves processing wallet setup files and creating cached browser contexts. Includes common options like `--headless`, `--force`, and `--debug`.

```bash
npx synpress
# OR
pnpm run synpress # If you have a script named 'synpress' in your package.json
```

```bash
npx synpress --headless --force

```

--------------------------------

### Install Synpress as Dev Dependency

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-playwright.mdx

Installs the Synpress library as a development dependency in your Node.js project using npm. This makes Synpress functions available for your testing environment.

```bash
npm install --save-dev @synthetixio/synpress
```

--------------------------------

### Install Mintlify CLI globally

Source: https://github.com/synpress-io/docs/blob/main/README.md

Installs the Mintlify Command Line Interface globally on your system. This tool is essential for previewing documentation changes locally and managing your Mintlify project.

```bash
npm i -g mintlify
```

--------------------------------

### Basic Phantom Wallet Setup (TypeScript)

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-playwright.mdx

Defines a basic setup for the Phantom wallet using Synpress. This script includes importing a wallet with a seed phrase and password, and provides a placeholder for additional custom setup steps.

```typescript
// Import necessary Synpress modules
import { defineWalletSetup } from '@synthetixio/synpress'
import { Phantom } from '@synthetixio/synpress/playwright'

// Define a test seed phrase and password
const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Tester@1234'

// Define the basic wallet setup
export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  // Create a new Phantom instance
  const phantom = new Phantom(context, walletPage, PASSWORD)

  // Import the wallet using the seed phrase
  await phantom.importWallet(SEED_PHRASE)

  // Additional setup steps can be added here, such as:
  // - Adding custom networks
  // - Importing tokens
  // - Setting up specific account states
})
```

--------------------------------

### Using Synpress Playwright Fixtures for MetaMask

Source: https://context7.com/synpress-io/docs/llms.txt

Demonstrates how to set up and utilize Synpress's pre-configured Playwright fixtures for effortless integration with MetaMask. Includes examples of accessing core testing utilities and adjusting delay for debugging. Requires Synpress and MetaMask fixtures to be installed.

```typescript
// tests/fixtures-example.spec.ts
import { testWithSynpress } from '@synthetixio/synpress'
import { metaMaskFixtures } from '@synthetixio/synpress/playwright'
import walletSetup from '../wallet-setup/basic.setup'

// Create test with MetaMask fixtures
const test = testWithSynpress(metaMaskFixtures(walletSetup))

test('should use built-in fixtures', async ({ page, context, metamaskPage, extensionId }) => {
  // Fixtures are automatically injected and ready to use
  await page.goto('/')
  console.log('Extension ID:', extensionId)
})

// Add slowMo parameter for debugging
const slowTest = testWithSynpress(metaMaskFixtures(walletSetup, 100))

slowTest('should run with 100ms delay between actions', async ({ page }) => {
  await page.goto('/')
})

```

--------------------------------

### Basic MetaMask Wallet Setup (TypeScript)

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-playwright.mdx

Defines a basic setup for the MetaMask wallet using Synpress. This script includes importing a wallet with a seed phrase and password, and provides a placeholder for additional custom setup steps.

```typescript
// Import necessary Synpress modules
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask } from '@synthetixio/synpress/playwright'

// Define a test seed phrase and password
const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Tester@1234'

// Define the basic wallet setup
export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  // Create a new MetaMask instance
  const metamask = new MetaMask(context, walletPage, PASSWORD)

  // Import the wallet using the seed phrase
  await metamask.importWallet(SEED_PHRASE)

  // Additional setup steps can be added here, such as:
  // - Adding custom networks
  // - Importing tokens
  // - Setting up specific account states
})
```

--------------------------------

### Basic Wallet Setup with Synpress

Source: https://context7.com/synpress-io/docs/llms.txt

Sets up a basic MetaMask wallet using a seed phrase and password. This is a foundational setup for simple wallet import scenarios.

```typescript
// wallet-setup/basic.setup.ts - Simple imported wallet
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask } from '@synthetixio/synpress/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Tester@1234'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const metamask = new MetaMask(context, walletPage, PASSWORD)
  await metamask.importWallet(SEED_PHRASE)
})
```

--------------------------------

### Build Wallet Cache with Synpress CLI (Phantom)

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Builds the browser cache for wallet setup files using the Synpress CLI, configured for Phantom wallets. Assumes Playwright browsers are installed. The CLI looks for setup files in `[PROJECT_ROOT]/test/wallet-setup` by default.

```bash
synpress --phantom
```

--------------------------------

### Synpress Support File Setup (e2e.ts)

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-cypress.mdx

Configures the Cypress support file to import Synpress commands for MetaMask interactions, handle uncaught exceptions, and initialize Synpress commands. It also sets up a 'before' hook to visit the base URL.

```typescript
// Import Synpress commands for MetaMask
import { synpressCommandsForMetaMask } from '@synthetixio/synpress/cypress/support'

// Handle uncaught exceptions
Cypress.on('uncaught:exception', () => {
  // returning false here prevents Cypress from failing the test
  return false
})

// Initialize Synpress commands
synpressCommandsForMetaMask()

// Visit the base URL before each test
before(() => {
  cy.visit('/')
})
```

--------------------------------

### Run Mintlify Development Server

Source: https://github.com/synpress-io/docs/blob/main/README.md

Starts the Mintlify development server in the root directory of your documentation project. This command is used to preview your documentation site locally, reflecting changes in real-time.

```bash
mintlify dev
```

--------------------------------

### Debugging Wallet Setup with Console Logs (TypeScript)

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-setup-debug.mdx

Modified wallet setup file to include console.log statements for debugging, demonstrating how to inspect environment variables and extension IDs. These logs are stripped by default.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask } from '@synthetixio/synpress/playwright'
import 'dotenv/config'

const SEED_PHRASE = process.env.SEED_PHRASE
const PASSWORD = process.env.WALLET_PASSWORD

console.log({ SEED_PHRASE, PASSWORD }) // [!code focus]

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const extensionId = await getExtensionId(context, 'MetaMask')
  
  console.log({ extensionId }) // [!code focus]

  const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId)

  await metamask.importWallet(SEED_PHRASE)
})
```

--------------------------------

### Build Wallet Cache with Synpress CLI (MetaMask)

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Builds the browser cache for wallet setup files using the Synpress CLI, specifically for MetaMask. Requires Playwright browsers to be installed. The command expects wallet setup files in the default directory `[PROJECT_ROOT]/test/wallet-setup`.

```bash
synpress
```

--------------------------------

### Update Cypress Support File for Ethereum Wallet Mock

Source: https://github.com/synpress-io/docs/blob/main/docs/migration-guide.mdx

Adjust the support file (e.g., `src/cypress/support/e2e.ts`) to import `synpressCommandsForEthereumWalletMock` and `mockEthereum`. This setup replaces the MetaMask-specific commands and mock initialization, ensuring the correct wallet functionality is loaded.

```typescript
// src/cypress/support/e2e.ts
import { synpressCommandsForEthereumWalletMock, mockEthereum } from '@synthetixio/synpress/cypress/support'

// Optional: If you had custom error handling, keep it.
Cypress.on('uncaught:exception', () => {
  return false;
});

synpressCommandsForEthereumWalletMock();
mockEthereum()
```

--------------------------------

### GitHub Actions CI/CD for Synpress Tests

Source: https://context7.com/synpress-io/docs/llms.txt

A GitHub Actions workflow file to automate the execution of Synpress E2E tests in a continuous integration environment. It handles Node.js setup, dependency installation, Playwright browser installation, cache building, test execution, and artifact uploading.

```yaml
# .github/workflows/e2e-tests.yml
name: E2E Tests

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright browsers
        run: npx playwright install --with-deps chromium

      - name: Build wallet cache
        run: xvfb-run npx synpress

      - name: Run E2E tests
        run: xvfb-run npx playwright test

      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

```

--------------------------------

### Re-install Mintlify Dependencies

Source: https://github.com/synpress-io/docs/blob/main/README.md

Re-installs project dependencies for Mintlify. This command is useful for troubleshooting when the `mintlify dev` command is not running correctly, ensuring all necessary packages are properly installed.

```bash
mintlify install
```

--------------------------------

### Using Multiple Wallet Setups in Tests

Source: https://context7.com/synpress-io/docs/llms.txt

Demonstrates how to utilize different wallet setup configurations within a single test suite. Each test can be assigned a specific setup, allowing for varied testing environments.

```typescript
// tests/multi-setup.spec.ts - Use different setups for different tests
import { testWithSynpress } from '@synthetixio/synpress'
import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
import basicSetup from '../wallet-setup/basic.setup'
import connectedSetup from '../wallet-setup/connected.setup'
import optimismSetup from '../wallet-setup/optimism.setup'

const basicTest = testWithSynpress(metaMaskFixtures(basicSetup))
const connectedTest = testWithSynpress(metaMaskFixtures(connectedSetup))
const optimismTest = testWithSynpress(metaMaskFixtures(optimismSetup))

basicTest('should connect fresh wallet', async ({ page, context, metamaskPage, extensionId }) => {
  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword, extensionId)
  await page.goto('/')
  await page.locator('#connectButton').click()
  await metamask.connectToDapp()
})

connectedTest('should start with connected wallet', async ({ page }) => {
  await page.goto('/')
  // Wallet already connected from setup
  await expect(page.locator('#walletStatus')).toHaveText('connected')
})

optimismTest('should work on Optimism network', async ({ page }) => {
  await page.goto('/')
  // Already on Optimism from setup
  await expect(page.locator('#networkName')).toHaveText('Optimism')
})
```

--------------------------------

### Build Wallet Cache with Custom Directory (MetaMask)

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Builds the Synpress browser cache for MetaMask wallet setups, allowing specification of a custom directory for setup files. Requires Playwright browsers to be installed. The CLI will process files from the provided path.

```bash
synpress [PATH_TO_DIR_WITH_WALLET_SETUP_FILES]
```

--------------------------------

### Define Wallet Setup Configuration (TypeScript)

Source: https://github.com/synpress-io/docs/blob/main/api-reference/functions/defineWalletSetup.mdx

This TypeScript function is used to define the configuration for setting up a wallet. It takes the wallet password and a setup function as arguments. The returned object includes the setup function, its hash, and the wallet password, which is utilized by the testWithWalletSetup function for caching browser instances with wallet extensions.

```typescript
function defineWalletSetup(walletPassword, fn): {
  "fn": WalletSetupFunction;
  "hash": string;
  "walletPassword": string;
}
{
  "fn": WalletSetupFunction;
  "hash": string;
  "walletPassword": string;
}
```

--------------------------------

### Connect Wallet to Dapp with Synpress and Phantom

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-playwright.mdx

This code snippet demonstrates how to set up a test instance using Synpress and Phantom fixtures, connect a wallet to a dApp, and verify the connection.

```javascript
          // Create a test instance with Synpress and Phantom fixtures
          const test = testWithSynpress(phantomFixtures(basicSetup))

          // Extract expect function from test
          const { expect } = test

          // Define a basic test case
          test('should connect wallet to the Phantom Test Dapp', async ({
            context,
            page,
            phantomPage,
            extensionId,
          }) => {
            // Create a new Phantom instance
            const phantom = new Phantom(
              context,
              phantomPage,
              basicSetup.walletPassword,
              extensionId
            )

            // Navigate to the homepage
            await page.goto('/')

            // Click the connect button
            await page.locator('#connectButton').click()

            // Connect Phantom to the dapp
            await phantom.connectToDapp()

            // Verify the connected account address
            await expect(page.locator('#accounts')).toContainText('0x')

            // Additional test steps can be added here, such as:
            // - Sending transactions
            // - Interacting with smart contracts
            // - Testing dapp-specific functionality
          })
```

--------------------------------

### Synpress Command Migration Guide

Source: https://github.com/synpress-io/docs/blob/main/docs/migration-guide.mdx

This guide details the command changes from Synpress v3 to v4, including direct replacements and new commands.

```APIDOC
## Synpress Command Changes: v3 to v4

### Description
This document provides a detailed summary of command changes between Synpress v3 and v4. It lists the old v3 commands and their new v4 equivalents, along with any relevant notes or explanations for the changes.

### Command Mapping

| v3 Command                      | v4 Command                      | Notes                                                                    |
| ------------------------------- | ------------------------------- | ------------------------------------------------------------------------ |
| `cy.acceptMetamaskAccess()`     | `cy.connectToDapp()`            |                                                                          |
| `cy.confirmMetamaskTransaction()` | `cy.confirmTransaction()`       | Now supports optional `gasSetting` object for fine-grained gas control.  |
| `cy.rejectMetamaskTransaction()`  | `cy.rejectTransaction()`        |                                                                          |
| `cy.switchMetamaskNetwork()`    | `cy.switchNetwork()`            |                                                                          |
| `cy.addMetamaskNetwork()`       | `cy.addNetwork()`               |                                                                          |
| `cy.importMetamaskAccount()`    | `cy.importWallet()`             | Use for importing with a seed phrase.                                    |
| `cy.createMetamaskAccount()`    | `cy.addNewAccount`              | No direct equivalent; use `cy.addNewAccount` instead.                      |
| `cy.getMetamaskWalletAddress()` | `cy.getAccountAddress()`        |                                                                          |
| `cy.switchMetamaskAccount()`    | `cy.switchAccount()`            |                                                                          |
| *No direct equivalent in v3*    | `cy.importWalletFromPrivateKey` | Use for importing from private key.                                      |
| *Not Available in v3*           | `cy.emptyAnvilNode()`           | Empties the Anvil node.                                                  |

### Notes on Missing Equivalents
- `cy.getMetamaskBalance()` from v3 has no direct equivalent in v4. Users may need to implement custom logic to retrieve balance information.
- `cy.createMetamaskAccount()` from v3 is replaced by `cy.addNewAccount` in v4.
```

--------------------------------

### Import defineWalletSetup from @synthetixio/synpress

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Imports the necessary function to define wallet setup configurations. This is the primary function used in wallet setup files.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
```

--------------------------------

### Configure Synpress for Ethereum Wallet Mock in Cypress

Source: https://github.com/synpress-io/docs/blob/main/docs/migration-guide.mdx

Update the cypress.config.ts file to use the new `configureSynpressForEthereumWalletMock` function. This setup is an alternative to MetaMask integration and also benefits from `testIsolation: false` for performance.

```typescript
// cypress.config.ts
import { defineConfig } from 'cypress';
import { configureSynpressForEthereumWalletMock } from '@synthetixio/synpress/cypress';

export default defineConfig({
  chromeWebSecurity: false, // Keep this if you had it before
  e2e: {
    baseUrl: 'http://localhost:9999', // Adjust if your base URL is different
    specPattern: 'test/cypress/**/*.cy.{js,jsx,ts,tsx}', // Adjust if your spec pattern is different
    supportFile: 'src/cypress/support/e2e.{js,jsx,ts,tsx}', // Adjust if needed
    testIsolation: false, // Important for reusing the cached browser context
    setupNodeEvents(on, config) {
      return configureSynpressForEthereumWalletMock(on, config);
    },
  },
});
```

--------------------------------

### Optimism Network Wallet Setup

Source: https://context7.com/synpress-io/docs/llms.txt

Sets up a MetaMask wallet, imports a seed phrase, and configures it to use the Optimism network. This is ideal for testing dApps deployed on Optimism.

```typescript
// wallet-setup/optimism.setup.ts - Pre-configured for Optimism
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask } from '@synthetixio/synpress/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Tester@1234'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const metamask = new MetaMask(context, walletPage, PASSWORD)

  await metamask.importWallet(SEED_PHRASE)

  // Add Optimism network
  await metamask.addNetwork({
    name: 'Optimism',
    chainId: 10,
    rpcUrl: 'https://mainnet.optimism.io',
    symbol: 'ETH',
    blockExplorerUrl: 'https://optimistic.etherscan.io'
  })

  await metamask.switchNetwork('Optimism')
})
```

--------------------------------

### Enabling Debugging in Synpress CLI

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-setup-debug.mdx

Commands to run Synpress with the --debug flag to prevent stripping of console.log and debugger statements. Includes options for default and custom paths.

```bash
# With the default path:
synpress --debug

# With a custom path:
synpress [PATH_TO_DIR_WITH_WALLET_SETUP_FILES] --debug
```

--------------------------------

### Pre-connected Wallet Setup for dApp Testing

Source: https://context7.com/synpress-io/docs/llms.txt

Configures a MetaMask wallet and pre-connects it to a dApp. This setup is useful for tests that require the wallet to be already connected to the target application, skipping the manual connection step.

```typescript
// wallet-setup/connected.setup.ts - Pre-connected to dApp
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask, getExtensionId } from '@synthetixio/synpress/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Tester@1234'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const extensionId = await getExtensionId(context, 'MetaMask')
  const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId)

  await metamask.importWallet(SEED_PHRASE)

  // Pre-connect to dApp
  const dappPage = await context.newPage()
  await dappPage.goto('http://localhost:3000')
  await dappPage.locator('#connectButton').click()
  await metamask.connectToDapp()
  await dappPage.close()
})
```

--------------------------------

### Run Cypress Tests with Synpress

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-cypress.mdx

Command to execute Cypress tests in headed mode using the Chrome browser, after ensuring the local development server is running.

```bash
npx cypress run --browser chrome --headed
```

--------------------------------

### Playwright Configuration for Synpress

Source: https://context7.com/synpress-io/docs/llms.txt

Provides a sample Playwright configuration file (`playwright.config.ts`) tailored for Synpress testing. Includes setup for parallel execution, retries, reporter, base URL, trace, screenshots, and starting a development server.

```typescript
// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',

  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],

  // Start dev server before tests
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
})
```

--------------------------------

### Build Wallet Cache with Synpress

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-playwright.mdx

Commands to build the wallet cache for Synpress, supporting both MetaMask and Phantom wallets. This step is necessary before running tests.

```bash
npx synpress
```

```bash
npx synpress --phantom
```

--------------------------------

### Define Wallet Setup with Phantom using Seed Phrase

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Defines the wallet setup process for Phantom using a seed phrase. It leverages the `defineWalletSetup` function and the `Phantom` class from Synpress. The setup logic runs in the browser context and depends on the Synpress Playwright package.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
import {
  Phantom, // [!code focus]
} from '@synthetixio/synpres/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Tester@1234'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => { // [!code focus]
  const phantom = new Phantom(context, walletPage, PASSWORD) // [!code focus]

  await phantom.importWallet(SEED_PHRASE) // [!code focus]
})
```

--------------------------------

### Build Wallet Cache with Custom Directory (Phantom)

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Builds the Synpress browser cache for Phantom wallet setups from a custom directory. Playwright browsers must be installed. The `--phantom` flag ensures Phantom-specific configurations are used for the provided file path.

```bash
synpress [PATH_TO_DIR_WITH_WALLET_SETUP_FILES] --phantom
```

--------------------------------

### Define Wallet Setup and Caching with Synpress

Source: https://context7.com/synpress-io/docs/llms.txt

Configures and caches wallet states for reuse across tests. It supports importing wallets via seed phrase or private key and adding custom networks. This function is crucial for efficient dApp testing by reducing setup time.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask } from '@synthetixio/synpress/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Tester@1234'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const metamask = new MetaMask(context, walletPage, PASSWORD)

  // Import wallet with seed phrase
  await metamask.importWallet(SEED_PHRASE)

  // Additional setup: add custom network
  await metamask.addNetwork({
    name: 'Optimism',
    chainId: 10,
    rpcUrl: 'https://mainnet.optimism.io',
    symbol: 'ETH',
    blockExplorerUrl: 'https://optimistic.etherscan.io'
  })

  // Import account from private key
  await metamask.importWalletFromPrivateKey('0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80')

  // Return object contains: { fn, hash, walletPassword }
})
```

--------------------------------

### Configure Synpress with Cypress (cypress.config.ts)

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-cypress.mdx

Sets up the Cypress configuration file to integrate Synpress, including defining base URL, spec patterns, support file, and initializing Synpress within Node.js event handlers.

```typescript
// Import necessary Cypress and Synpress modules
import { configureSynpressForMetaMask } from '@synthetixio/synpress/cypress'
import { defineConfig } from 'cypress'

// Define Cypress configuration
export default defineConfig({
  chromeWebSecurity: true,
  e2e: {
    baseUrl: 'http://localhost:9999',
    specPattern: 'test/cypress/**/*.cy.{js,jsx,ts,tsx}',
    supportFile: 'src/cypress/support/e2e.{js,jsx,ts,tsx}',
    testIsolation: false,
    async setupNodeEvents(on, config) {
      return configureSynpressForMetaMask(on, config)
    },
  },
})
```

--------------------------------

### Define Wallet Setup with MetaMask using Seed Phrase

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Defines the wallet setup process for MetaMask using a seed phrase. It utilizes the `defineWalletSetup` function from Synpress and the `MetaMask` class for wallet interactions. This function executes in the browser context and requires the Synpress Playwright library.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
import {
  MetaMask, // [!code focus]
} from '@synthetixio/synpres/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Password123'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => { // [!code focus]
  const metamask = new MetaMask(context, walletPage, PASSWORD) // [!code focus]

  await metamask.importWallet(SEED_PHRASE) // [!code focus]
})
```

--------------------------------

### Run Synpress Tests with Cypress CLI

Source: https://github.com/synpress-io/docs/blob/main/docs/migration-guide.mdx

Illustrates how to execute Synpress tests using the Cypress test runner. It includes the command to run tests with a specific browser and notes the requirement for headed mode on CI environments, suggesting `xvfb-run`.

```bash
npx cypress run --browser chrome --headed # Headed mode is required on CI

```

--------------------------------

### Define Wallet Setup with MetaMask using Private Key

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Demonstrates defining a MetaMask wallet setup that imports a wallet first by seed phrase, then by private key. This is necessary because MetaMask requires an initialized seed phrase before importing from a private key. It uses Synpress's `defineWalletSetup` and `MetaMask` class.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask } from '@synthetixio/synpress/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Password123'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const metamask = new MetaMask(context, walletPage, PASSWORD)

  await metamask.importWallet(SEED_PHRASE)
  await metamask.importWalletFromPrivateKey('0xdeadbeef') // [!code focus]
})
```

--------------------------------

### Secure Wallet Setup with Environment Variables

Source: https://context7.com/synpress-io/docs/llms.txt

Implements a secure wallet setup by loading sensitive credentials (seed phrase and password) from environment variables using `dotenv`. This prevents hardcoding secrets directly in the code.

```typescript
// wallet-setup/secure.setup.ts
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask } from '@synthetixio/synpress/playwright'
import 'dotenv/config'

// Load from environment variables
const SEED_PHRASE = process.env.TEST_SEED_PHRASE
const PASSWORD = process.env.WALLET_PASSWORD

if (!SEED_PHRASE || !PASSWORD) {
  throw new Error('Missing required environment variables: TEST_SEED_PHRASE, WALLET_PASSWORD')
}

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const metamask = new MetaMask(context, walletPage, PASSWORD)
  await metamask.importWallet(SEED_PHRASE)
})
```

--------------------------------

### Configure Playwright with Synpress (TypeScript)

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-playwright.mdx

Sets up the Playwright configuration file, including essential options for testing and integrating with Synpress. It defines test directories, parallel execution, retries, reporters, base URLs, and project configurations.

```typescript
// Import necessary Playwright and Synpress modules
import { defineConfig, devices } from '@playwright/test'

// Define Playwright configuration
export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    // Set base URL for tests
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  // Additional Synpress-specific configuration can be added here
})
```

--------------------------------

### Define Wallet Setup for Phantom

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Configures a Phantom wallet with Synpress, enabling wallet import via a seed phrase. This script utilizes the `@synthetixio/synpress` library for wallet management.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
import { Phantom } from '@synthetixio/synpress/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Password123'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const phantom = new Phantom(context, walletPage, PASSWORD)

  await phantom.importWallet(SEED_PHRASE)
})
```

--------------------------------

### Test Phantom Connection to Dapp (TypeScript)

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-playwright.mdx

A basic test case using Synpress to connect a Phantom wallet to a decentralized application (dapp). It imports necessary modules and fixtures for Phantom wallet integration.

```typescript
// Import necessary Synpress modules and setup
import { testWithSynpress } from '@synthetixio/synpress'
import { Phantom, phantomFixtures } from '@synthetixio/synpress/playwright'
import basicSetup from '../wallet-setup/basic.setup'

```

--------------------------------

### Cypress End-to-End Wallet Integration Test

Source: https://context7.com/synpress-io/docs/llms.txt

An example Cypress E2E test file (`wallet.cy.ts`) demonstrating MetaMask integration. It covers wallet connection and transaction sending using Synpress custom commands.

```typescript
// cypress/e2e/wallet.cy.ts
describe('MetaMask Integration', () => {
  before(() => {
    cy.initMetaMask()
  })

  it('should connect wallet', () => {
    cy.get('#connectButton').click()
    cy.connectToDapp()
    cy.get('#accounts').should('contain', '0xf39')
  })

  it('should send transaction', () => {
    cy.get('#sendButton').click()
    cy.confirmTransaction()
    cy.get('#txStatus').should('have.text', 'success')
  })
})

```

--------------------------------

### Define Wallet Setup for MetaMask

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Sets up a MetaMask wallet using Synpress by importing a seed phrase. This function is part of the basic wallet configuration process and relies on the `@synthetixio/synpress` library.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
import { MetaMask } from '@synthetixio/synpress/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Password123'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const metamask = new MetaMask(context, walletPage, PASSWORD)

  await metamask.importWallet(SEED_PHRASE)
})
```

--------------------------------

### Update Synpress Test Commands from v3 to v4

Source: https://github.com/synpress-io/docs/blob/main/docs/migration-guide.mdx

Compares old v3 Synpress test syntax with new v4 equivalents, specifically highlighting the change from `cy.acceptMetamaskAccess()` to `cy.connectToDapp()`. This helps in migrating existing test suites.

```typescript
    // Old v3 test
    describe('My Test Suite', () => {
      before(() => {
        cy.visit('/');
      });

      it('should connect to MetaMask', () => {
        cy.acceptMetamaskAccess(); // v3
        cy.get('#someElement').should('be.visible');
      });
    });

    // New v4 test
    describe('My Test Suite', () => {
      before(() => {
        cy.visit('/');
      });

      it('should connect to MetaMask', () => {
        cy.connectToDapp(); // v4
        cy.get('#someElement').should('be.visible');
      });
    });
```

--------------------------------

### Test MetaMask Connection to Dapp (TypeScript)

Source: https://github.com/synpress-io/docs/blob/main/docs/setup-playwright.mdx

A basic test case using Synpress to connect a MetaMask wallet to a decentralized application (dapp). It navigates to the dapp, initiates the connection, and verifies the connected account.

```typescript
// Import necessary Synpress modules and setup
import { testWithSynpress } from '@synthetixio/synpress'
import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
import basicSetup from '../wallet-setup/basic.setup'

// Create a test instance with Synpress and MetaMask fixtures
const test = testWithSynpress(metaMaskFixtures(basicSetup))

// Extract expect function from test
const { expect } = test

// Define a basic test case
test('should connect wallet to the MetaMask Test Dapp', async ({ context, page, metamaskPage, extensionId }) => {
  // Create a new MetaMask instance
  const metamask = new MetaMask(
    context,
    metamaskPage,
    basicSetup.walletPassword,
    extensionId
  )

  // Navigate to the homepage
  await page.goto('/')

  // Click the connect button
  await page.locator('#connectButton').click()

  // Connect MetaMask to the dapp
  await metamask.connectToDapp()

  // Verify the connected account address
  await expect(page.locator('#accounts')).toHaveText(
    '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266'
  )

  // Additional test steps can be added here, such as:
  // - Sending transactions
  // - Interacting with smart contracts
  // - Testing dapp-specific functionality
})
```

--------------------------------

### Define Wallet Setup with Phantom using Private Key

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-cache.mdx

Illustrates setting up a Phantom wallet by first importing a seed phrase and then importing from a private key. This process is mandated by Phantom's initialization requirements. The code uses Synpress's `defineWalletSetup` and `Phantom` class.

```typescript
import { defineWalletSetup } from '@synthetixio/synpress'
import { Phantom } from '@synthetixio/synpress/playwright'

const SEED_PHRASE = 'test test test test test test test test test test test junk'
const PASSWORD = 'Password123'

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const phantom = new Phantom(context, walletPage, PASSWORD)

  await phantom.importWallet(SEED_PHRASE)
  await phantom.importWalletFromPrivateKey('0xdeadbeef') // [!code focus]
})
```

--------------------------------

### Environment Variables File Configuration

Source: https://context7.com/synpress-io/docs/llms.txt

Example `.env` file content for storing sensitive wallet credentials. This file should be added to `.gitignore` to prevent accidental commits of secrets.

```bash
# .env (add to .gitignore!)
TEST_SEED_PHRASE="test test test test test test test test test test test junk"
WALLET_PASSWORD="Tester@1234"
```

--------------------------------

### Complete Transaction Workflow with MetaMask

Source: https://context7.com/synpress-io/docs/llms.txt

Automates a full dApp transaction lifecycle, including connecting to a dApp, switching accounts and networks, confirming transactions with custom gas settings, approving token permissions, signing messages, and unlocking the wallet if necessary. This requires a setup with Synpress and MetaMask fixtures.

```typescript
// tests/transaction-flow.spec.ts
import { testWithSynpress } from '@synthetixio/synpress'
import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
import walletSetup from '../wallet-setup/basic.setup'

const test = testWithSynpress(metaMaskFixtures(walletSetup))

test('should perform complete transaction workflow', async ({ context, page, metamaskPage, extensionId }) => {
  const metamask = new MetaMask(context, metamaskPage, walletSetup.walletPassword, extensionId)

  await page.goto('/')
  await page.locator('#connectButton').click()
  await metamask.connectToDapp()

  // Switch to different account
  await metamask.switchAccount('Account 2')

  // Add and switch network
  await page.locator('#addOptimism').click()
  await metamask.approveNewNetwork()
  await metamask.switchNetwork('Optimism')

  // Send transaction with custom gas settings
  await page.locator('#sendButton').click()
  await metamask.confirmTransaction({
    gasSetting: {
      maxBaseFee: 25,
      priorityFee: 2,
      gasLimit: 50000
    }
  })

  // Wait for transaction to be mined
  await metamask.confirmTransactionAndWaitForMining()

  // Approve token permission with spend limit
  await page.locator('#approveToken').click()
  await metamask.approveTokenPermission({
    spendLimit: 100,
    gasSetting: 'market'
  })

  // Sign message
  await page.locator('#signMessage').click()
  await metamask.confirmSignature()

  // Unlock wallet if locked
  if (await metamask.page.locator('.lock-page').isVisible()) {
    await metamask.unlock()
  }
})

```

--------------------------------

### Example tsconfig.json for Synpress Cypress Project

Source: https://github.com/synpress-io/docs/blob/main/docs/typescript.mdx

A sample tsconfig.json file for Synpress projects integrated with Cypress. It extends a base Synpress configuration and includes options suitable for Cypress testing.

```json
{
  "extends": "@synthetixio/synpress-tsconfig/base.json",
  "compilerOptions": {
    "rootDir": ".",
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "types": ["cypress"]
  },
  "include": ["cypress.config.ts", "test", "src"],
  "files": ["environment.d.ts"]
}
```

--------------------------------

### Update Cypress Support File for MetaMask

Source: https://github.com/synpress-io/docs/blob/main/docs/migration-guide.mdx

Modify the support file (e.g., `src/cypress/support/e2e.ts`) to import `synpressCommandsForMetaMask` and remove any global imports or `cy.visit('/')` calls from `before()` hooks. This streamlines command loading and leverages the new `testIsolation: false` setting.

```typescript
// src/cypress/support/e2e.ts
import { synpressCommandsForMetaMask } from '@synthetixio/synpress/cypress/support';

// Optional: If you had custom error handling, keep it.
Cypress.on('uncaught:exception', () => {
  return false;
});

synpressCommandsForMetaMask();

// REMOVE the before() hook with cy.visit('/');
```

--------------------------------

### Forcing Cache Rebuild for Debugging

Source: https://github.com/synpress-io/docs/blob/main/docs/guides/wallet-setup-debug.mdx

Commands to force Synpress to rebuild the cache using the --force flag along with --debug. This ensures that changes to debug logs are recognized.

```bash
# With the default path:
synpress --debug --force

# With a custom path:
synpress [PATH_TO_DIR_WITH_WALLET_SETUP_FILES] --debug --force
```

--------------------------------

### Run Synpress Tests Headfully on CI (GitHub Actions)

Source: https://github.com/synpress-io/docs/blob/main/docs/known-issues.mdx

This example demonstrates how to run Synpress E2E tests in headful mode on a CI environment like GitHub Actions, utilizing xvfb-run for a virtual display. This is a workaround for MetaMask's headless mode limitations.

```yaml
# Example (GitHub Actions):
- name: Build cache
  run: xvfb-run npx synpress

- name: Run E2E tests (headful)
  run: xvfb-run npx playwright test
```

--------------------------------

### Advanced MetaMask Operations: Account and Network Management

Source: https://context7.com/synpress-io/docs/llms.txt

Provides examples for managing MetaMask accounts and networks, including creating, renaming, and switching accounts, adding custom networks, and importing wallets from private keys. Also covers locking and unlocking the wallet. This functionality relies on Synpress and MetaMask fixtures.

```typescript
// tests/advanced-wallet.spec.ts
import { testWithSynpress } from '@synthetixio/synpress'
import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
import setup from '../wallet-setup/basic.setup'

const test = testWithSynpress(metaMaskFixtures(setup))

test('should manage accounts and networks', async ({ context, metamaskPage, extensionId }) => {
  const metamask = new MetaMask(context, metamaskPage, setup.walletPassword, extensionId)

  // Create new account
  await metamask.addNewAccount('Trading Account')

  // Rename existing account
  await metamask.renameAccount('Account 1', 'Primary Account')

  // Switch between accounts
  await metamask.switchAccount('Trading Account')

  // Add custom network (L2)
  await metamask.addNetwork({
    name: 'Arbitrum One',
    chainId: 42161,
    rpcUrl: 'https://arb1.arbitrum.io/rpc',
    symbol: 'ETH',
    blockExplorerUrl: 'https://arbiscan.io'
  })

  // Switch network
  await metamask.switchNetwork('Arbitrum One')

  // Lock and unlock wallet
  await metamask.lock()
  await metamask.unlock()

  // Import account from private key
  await metamask.importWalletFromPrivateKey('0xprivatekeyhere')
})

```

--------------------------------

### Basic Test Declaration in JavaScript

Source: https://github.com/synpress-io/docs/blob/main/api-reference/playwright/functions/ethereumWalletMockFixtures.mdx

Demonstrates a basic test declaration using Playwright's `test` function. It navigates to a URL and includes a placeholder for further assertions. This is a common starting point for writing tests.

```javascript
import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // ...
});
```

--------------------------------

### Get Account Address from MetaMask

Source: https://github.com/synpress-io/docs/blob/main/api-reference/playwright/classes/MetaMask.mdx

Retrieves the address of the currently selected account in MetaMask. This function overrides the base MetaMask abstract implementation.

```TypeScript
getAccountAddress(): Promise<string>
```
Tokens:
Raw