Run, create, and debug Playwright e2e tests for the web app. ALWAYS invoke this skill using the SlashCommand tool (i.e., `/web-e2e`) BEFORE attempting to run any e2e tests, playwright tests, anvil tests, or debug test failures. DO NOT run `bun playwright test` or other e2e commands directly - you must invoke this skill first to learn the correct commands and test architecture.
Display name: test0 (the Unitag associated with this address)
Connection: Happens automatically via wagmiAutoConnect.ts when in Playwright environment
This means:
Tests start with a wallet already connected
You can immediately test wallet-dependent features
The wallet button will show "test0" instead of "Connect wallet"
When using Playwright MCP: To enable automatic wallet connection when browsing via MCP tools, set the environment variable REACT_APP_IS_PLAYWRIGHT_ENV=true before starting the dev server. This makes the app behave identically to how it does in automated tests, with the test wallet auto-connected.
Custom Fixtures
The web app uses custom Playwright fixtures and mocks that extend base Playwright functionality.
They are located in apps/web/src/playwright/fixtures/* and apps/web/src/playwright/mocks/*.
Import Pattern
import { expect, getTest } from 'playwright/fixtures'
// For regular tests (no blockchain)
const test = getTest()
// For anvil tests (with blockchain)
const test = getTest({ withAnvil: true })
Use Mocks Helper - Import mock paths from playwright/mocks/mocks.ts
import { Mocks } from 'playwright/mocks/mocks'
await graphql.intercept('Token', Mocks.Token.uni_token)
Test Constants - Use constants from the codebase
import { USDT, DAI } from 'uniswap/src/constants/tokens'
import { TEST_WALLET_ADDRESS } from 'playwright/fixtures/wallets'
// TEST_WALLET_ADDRESS is the automatically connected wallet
// It displays as "test0" in the UI
Anvil State Management - Set up blockchain state properly
// Always set token balances before testing swaps
await anvil.setErc20Balance({
address: assume0xAddress(USDT.address),
balance: 100_000_000n
})
Running Tests
The following commands must be run from the apps/web/ folder.
⚠️ PREREQUISITE: Playwright tests require the Vite preview server to be running at http://localhost:3000 BEFORE tests start. The bun e2e commands handle this automatically, but if running tests directly you must start the server first.
Development Commands
The e2e commands handle all requisite setup tasks for the playwright tests. These include building the app for production and running the Vite preview server.
# Run all e2e tests (starts anvil, builds, and runs tests)
bun e2e
# Run only non-anvil tests (faster, no blockchain required)
bun e2e:no-anvil
# Run only anvil tests (blockchain tests only)
bun e2e:anvil
# Run specific test file
bun e2e TokenSelector.e2e.test
Direct Playwright Commands
In some cases it may be helpful to run the commands more directly with the different tasks in different terminals.
# Step 1: Build the web app for e2e
bun build:e2e
# Step 2: Start the Vite preview server (REQUIRED - must be running before tests)
bun preview:e2e
# Wait for "Local: http://localhost:3000" message
# (Optional) Step 3: Start Anvil (note, Anvil tests can start this themselves)
bun anvil:mainnet
# Wait for "Listening on 127.0.0.1:8545" message
# Step 4: Run the playwright tests (only after servers are ready)
bun playwright:test
Test Modes
# Headed mode (see browser)
bun playwright test --headed
# Debug mode with Playwright Inspector
bun playwright test --debug
# UI mode (interactive)
bun playwright test --ui
