test(e2e): spec market-orders

apps/cowswap-e2e-tests/README.md

@@ -55,12 +55,13 @@ For scenarios that just need *a connected wallet that signs*, import the
 mock-wallet entrypoint instead of the Synpress one:
 
 ```ts
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
+
 import { test, expect } from '../fixtures/mockWallet'
-import { CHAIN_IDS } from '../support/constants'
 
 test('my scenario', async ({ wallet, page }) => {
   wallet.stubRpc('wallet_getCapabilities', () => ({ '0xaa36a7': { atomic: { status: 'supported' } } }))
-  await wallet.openApp({ chainId: CHAIN_IDS.SEPOLIA }) // boots already connected
+  await wallet.openApp({ chainId: SupportedChainId.SEPOLIA }) // boots already connected
   // …
   expect(wallet.rpcCalls('wallet_getCapabilities').length).toBeGreaterThan(0)
 })
@@ -197,10 +198,10 @@ normally configures allowances at runtime instead:
 
 ```ts
 test('[MO-XX] approval', async ({ wallet, mocks, swapPage }) => {
-  mocks.allowances.set(wallet.address, CHAIN_IDS.SEPOLIA, {
+  mocks.allowances.set(wallet.address, SupportedChainId.SEPOLIA, {
     '0xfff9976782d46cc05630d1f6ebab18b2324d6b14': '5000000',
   })
-  await wallet.openApp({ chainId: CHAIN_IDS.SEPOLIA })
+  await wallet.openApp({ chainId: SupportedChainId.SEPOLIA })
   // ...
   expect(mocks.allowances.reads().length).toBeGreaterThan(0)
 })

apps/cowswap-e2e-tests/package.json

@@ -8,7 +8,8 @@
   "dependencies": {
     "viem": "2.48.8",
     "@cowprotocol/cow-sdk": "9.2.6",
-    "@cowprotocol/sdk-order-book": "4.0.2"
+    "@cowprotocol/sdk-order-book": "4.0.2",
+    "@cowprotocol/test-ids": "workspace:*"
   },
   "devDependencies": {
     "@playwright/test": "1.49.1",

apps/cowswap-e2e-tests/src/fixtures/mockWallet.ts

@@ -1,13 +1,14 @@
 import { toHex, type Hex } from 'viem'
 
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
+
 import { expect, test as base, type BrowserContext, type Page } from '@playwright/test'
 
 import { sharedFixtures, type SharedFixtures } from './shared'
 
 import { E2E_WALLET_INFO, injectedShim } from '../mockWallet/injectedShim'
 import { seedAutoConnect } from '../mockWallet/seedAutoConnect'
 import { createWalletEngine, type RpcCallRecord, type RpcStub, type WalletEngine } from '../mockWallet/walletEngine'
-import { CHAIN_IDS, type SupportedChainId } from '../support/constants'
 
 export interface MockWalletApi {
   readonly address: string
@@ -106,7 +107,7 @@ export const test = base.extend<MockWalletFixtures & MockWalletOptions>({
     async ({ context, page, mockWalletKey, mockWalletAutoConnect }, use) => {
       const engine = createWalletEngine({
         privateKey: resolvePrivateKey(mockWalletKey),
-        chainId: CHAIN_IDS.SEPOLIA,
+        chainId: SupportedChainId.SEPOLIA,
         emit: (event, payload) => {
           page
             .evaluate(
@@ -124,12 +125,12 @@ export const test = base.extend<MockWalletFixtures & MockWalletOptions>({
       await context.addInitScript(injectedShim, {
         ...E2E_WALLET_INFO,
         address: engine.address,
-        chainIdHex: toHex(CHAIN_IDS.SEPOLIA),
+        chainIdHex: toHex(SupportedChainId.SEPOLIA),
       })
       if (mockWalletAutoConnect) {
         await context.addInitScript(seedAutoConnect, {
           rdns: E2E_WALLET_INFO.rdns,
-          defaultChainId: CHAIN_IDS.SEPOLIA,
+          defaultChainId: SupportedChainId.SEPOLIA,
         })
       }
 

apps/cowswap-e2e-tests/src/fixtures/wallet.ts

@@ -1,15 +1,15 @@
-import { CHAIN_IDS, type SupportedChainId } from '../support/constants'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 
 import type { Page } from '@playwright/test'
 import type { MetaMask } from '@synthetixio/synpress/playwright'
 
-const CHAIN_NAME_BY_ID: Record<SupportedChainId, string> = {
-  [CHAIN_IDS.MAINNET]: 'Mainnet',
-  [CHAIN_IDS.ARBITRUM]: 'Arbitrum',
-  [CHAIN_IDS.BASE]: 'Base',
-  [CHAIN_IDS.BNB]: 'BNB',
-  [CHAIN_IDS.GNOSIS]: 'Gnosis',
-  [CHAIN_IDS.SEPOLIA]: 'Sepolia',
+const CHAIN_NAME_BY_ID: Partial<Record<SupportedChainId, string>> = {
+  [SupportedChainId.MAINNET]: 'Mainnet',
+  [SupportedChainId.ARBITRUM_ONE]: 'Arbitrum',
+  [SupportedChainId.BASE]: 'Base',
+  [SupportedChainId.BNB]: 'BNB',
+  [SupportedChainId.GNOSIS_CHAIN]: 'Gnosis',
+  [SupportedChainId.SEPOLIA]: 'Sepolia',
 }
 
 export interface WalletApi {

apps/cowswap-e2e-tests/src/pages/AccountModal.ts

@@ -1,21 +1,25 @@
 import type { Page, Locator } from '@playwright/test'
 
 /**
- * The wallet-details side panel opened from the header's connected-wallet button. It has no
- * `role="dialog"` and no dedicated close button locator (the panel's own `X` has no accessible
- * name) — `#web3-status-connected` is a toggle, so clicking it again is the panel's close action
- * too.
+ * The wallet-details panel opened from the header's connected-wallet button. Since the
+ * Dialog/surfaces refactor (`AccountModal.container.tsx`'s `<Dialog>`) it's a real modal with its
+ * own backdrop and `role="dialog"` — the backdrop now covers `#web3-status-connected`, so clicking
+ * the toggle button again no longer closes it (the click is intercepted by the dialog's own
+ * overlay). Closing goes through the dialog's `ModalHeader` close button instead, which the shared
+ * `CloseIconButton` primitive gives an accessible `aria-label="Close"`.
  */
 export class AccountModal {
   readonly page: Page
   readonly toggleButton: Locator
+  readonly closeButton: Locator
   readonly activitiesList: Locator
   /** Confirms cancellation in `RequestCancellationModal`, opened via an activity row's "Cancel order" link. */
   readonly requestCancellationButton: Locator
 
   constructor(page: Page) {
     this.page = page
     this.toggleButton = page.locator('#web3-status-connected')
+    this.closeButton = page.getByRole('dialog').getByRole('button', { name: 'Close' })
     this.activitiesList = page.locator('#account-activities-list')
     this.requestCancellationButton = page.getByRole('button', { name: 'Request cancellation' })
   }
@@ -26,7 +30,7 @@ export class AccountModal {
   }
 
   async close(): Promise<void> {
-    await this.toggleButton.click()
+    await this.closeButton.click()
     await this.activitiesList.waitFor({ state: 'hidden' })
   }
 }

apps/cowswap-e2e-tests/src/pages/BridgeRoutePanel.ts

@@ -1,3 +1,5 @@
+import { TEST_IDS } from '@cowprotocol/test-ids'
+
 import type { Page, Locator } from '@playwright/test'
 
 /**
@@ -20,12 +22,10 @@ export class BridgeRoutePanel {
 
   constructor(page: Page) {
     this.page = page
-    // Scoped by class substring (babel-plugin-styled-components names it after its own export,
-    // `SummaryClickable`), not just `[aria-expanded]` — the app header's nav dropdown also renders
-    // `aria-expanded`, and an unscoped `.first()` would resolve to whichever renders first in DOM
-    // order.
-    this.expandToggle = page.locator('.trade-details-accordion-toggle').first()
-    this.bridgeQuoteDetails = page.locator('.collapsible-bridge-route').first()
+    // Not just `[aria-expanded]` — the app header's nav dropdown also renders `aria-expanded`, and
+    // an unscoped `.first()` would resolve to whichever renders first in DOM order.
+    this.expandToggle = page.locator(`[data-testid="${TEST_IDS.tradeDetailsAccordionToggle}"]`).first()
+    this.bridgeQuoteDetails = page.locator(`[data-testid="${TEST_IDS.collapsibleBridgeRoute}"]`).first()
     // Not an exact match: `BridgeRouteTitle` renders "Swap on" and "CoW Protocol" either side of a
     // protocol icon, which can add whitespace/alt text into the element's normalized text content.
     this.swapStopTitle = page.getByText(/Swap on.*CoW Protocol/)

apps/cowswap-e2e-tests/src/pages/ConfirmModal.ts

@@ -1,3 +1,5 @@
+import { TEST_IDS } from '@cowprotocol/test-ids'
+
 import { Page, Locator, expect } from '@playwright/test'
 
 export class ConfirmModal {
@@ -18,8 +20,8 @@ export class ConfirmModal {
     await this.confirmButton.click()
   }
 
-  /** One of the modal's labeled `.confirm-order-amount` rows (e.g. "Maximum sent", "Expected to receive", "Minimum receive"). */
+  /** One of the modal's labeled `confirmOrderAmount` rows (e.g. "Maximum sent", "Expected to receive", "Minimum receive"). */
   amountRow(label: string): Locator {
-    return this.page.locator('.confirm-order-amount', { hasText: label })
+    return this.page.locator(`[data-testid="${TEST_IDS.confirmOrderAmount}"]`, { hasText: label })
   }
 }

apps/cowswap-e2e-tests/src/pages/HeaderPage.ts

@@ -1,3 +1,5 @@
+import { TEST_IDS } from '@cowprotocol/test-ids'
+
 import type { Page, Locator } from '@playwright/test'
 
 /** The app-wide header (network selector, wallet status) — present on every route, not just Swap. */
@@ -11,7 +13,7 @@ export class HeaderPage {
     this.page = page
     this.header = page.locator('#cowswap-app-header')
     this.networkDialog = page.getByRole('dialog')
-    this.snackbarPopup = page.locator('.snackbar-popup').first()
+    this.snackbarPopup = page.locator(`[data-testid="${TEST_IDS.snackbarPopup}"]`).first()
   }
 
   /**

apps/cowswap-e2e-tests/src/pages/LimitPage.ts

@@ -1,3 +1,5 @@
+import { TEST_IDS } from '@cowprotocol/test-ids'
+
 import { expect } from '@playwright/test'
 
 import type { TradePage } from './TradePage'
@@ -19,17 +21,17 @@ export class LimitPage implements TradePage {
 
   constructor(page: Page) {
     this.page = page
-    this.inputAmount = page.locator('#input-currency-input .token-amount-input')
+    this.inputAmount = page.locator(`#input-currency-input [data-testid="${TEST_IDS.tokenAmountInput}"]`)
     this.limitPriceInput = page.locator('#rate-limit-amount-input')
     this.placeOrderButton = page.locator('#do-trade-button')
     this.unlockButton = page.locator('#unlock-limit-orders-btn')
     this.arrowSeparator = page.locator('#currency-arrow-separator')
     this.orderSubmittedHeading = page.getByRole('heading', { name: 'Order Submitted' })
     this.continueButton = page.getByRole('button', { name: /continue/i })
     this.myOrdersButton = page.getByRole('button', { name: 'My orders' })
-    this.openOrdersTab = page.locator('.orders-table_tab', { hasText: 'Open' })
+    this.openOrdersTab = page.locator(`[data-testid="${TEST_IDS.ordersTableTab}"]`, { hasText: 'Open' })
     this.ordersTable = page.locator('#orders-table')
-    this.tradeFormActionButton = page.locator('.trade-form-blank-button')
+    this.tradeFormActionButton = page.locator(`[data-testid="${TEST_IDS.tradeFormBlankButton}"]`)
   }
 
   async goto(opts: { chainId: number; sell?: string; buy?: string }): Promise<void> {

apps/cowswap-e2e-tests/src/pages/SwapPage.ts

@@ -1,3 +1,5 @@
+import { TEST_IDS } from '@cowprotocol/test-ids'
+
 import { expect } from '@playwright/test'
 
 import { BridgeRoutePanel } from './BridgeRoutePanel'
@@ -42,7 +44,7 @@ export class SwapPage implements TradePage {
   readonly routePanel: BridgeRoutePanel
   /** `AddressInputPanel`'s wrapping `ReceiverPanel` — `id="recipient"` set by `SetRecipient`. */
   readonly recipientPanel: Locator
-  /** `AddressInputPanel.tsx`'s default className on the `<input>` itself. */
+  /** `ReceiverPanelBody.container.tsx`'s `data-testid` on the `<input>` itself. */
   readonly recipientInput: Locator
   readonly recipientPasteButton: Locator
   /** Hardcoded id on `ReceiverConfirmationRow.pure.tsx`'s "confirm this is the right chain" checkbox. */
@@ -66,58 +68,56 @@ export class SwapPage implements TradePage {
 
   constructor(page: Page) {
     this.page = page
-    this.inputAmount = page.locator('#input-currency-input .token-amount-input')
-    this.outputAmount = page.locator('#output-currency-input .token-amount-input')
+    this.inputAmount = page.locator(`#input-currency-input [data-testid="${TEST_IDS.tokenAmountInput}"]`)
+    this.outputAmount = page.locator(`#output-currency-input [data-testid="${TEST_IDS.tokenAmountInput}"]`)
     // `CurrencySelectButton` sets `aria-label="Selected token: <symbol>"`, which is a more
     // reliable read of the selected currency than the (truncatable) rendered symbol text.
+    // `.open-currency-select-button` is a real styled-components class (also targeted by
+    // `ReceiptModal.styled.ts`'s CSS), not a bare test hook — kept as a class per the "used in
+    // CSS" rule instead of converting it to a `data-testid`.
     this.sellTokenSelect = page.locator('#input-currency-input .open-currency-select-button')
     this.buyTokenSelect = page.locator('#output-currency-input .open-currency-select-button')
     // The wallet balance shown under each amount field: `TokenAmount` sets the
     // exact-precision value + symbol (e.g. "0.5 WETH") as the `title` attribute,
     // which is the only titled element in either panel outside USD-values mode.
-    this.sellBalance = page.locator('#input-currency-input .currency-balance-text > span')
-    this.buyBalance = page.locator('#output-currency-input .currency-balance-text > span')
-    this.sellFiatAmount = page.locator('#input-currency-input [data-testid="fiat-amount"]')
-    this.buyFiatAmount = page.locator('#output-currency-input [data-testid="fiat-amount"]')
+    this.sellBalance = page.locator(`#input-currency-input [data-testid="${TEST_IDS.currencyBalanceText}"] > span`)
+    this.buyBalance = page.locator(`#output-currency-input [data-testid="${TEST_IDS.currencyBalanceText}"] > span`)
+    this.sellFiatAmount = page.locator(`#input-currency-input [data-testid="${TEST_IDS.fiatAmount}"]`)
+    this.buyFiatAmount = page.locator(`#output-currency-input [data-testid="${TEST_IDS.fiatAmount}"]`)
     // Only the output panel receives `priceImpactParams` (`TradeWidgetForm`), so price impact
     // only ever renders next to the buy-side USD estimation.
-    this.priceImpact = page.locator('#output-currency-input [data-testid="price-impact"]')
+    this.priceImpact = page.locator(`#output-currency-input [data-testid="${TEST_IDS.priceImpact}"]`)
     // `HoverTooltip`'s mouseenter/mouseleave handlers sit on the innermost wrapper div around the
     // "(X%)" text, not on the outer `[data-testid]` span — hovering the outer span can land the
     // pointer outside that inner div's box and never open the tooltip.
     this.priceImpactTooltipTrigger = this.priceImpact.locator('div div')
-    // `ReceiveAmount` renders as a sibling of `#output-currency-input`, not inside it — its
-    // "Receive (incl. fees)" label and the `HelpTooltip` icon next to it are the label's next
-    // sibling. That sibling is `HelpTooltip`'s outer `HelpTooltipContainer` span, one level above
-    // the real `HoverTooltip` hitbox div (same quirk as `priceImpactTooltipTrigger` above, but
-    // nested one div deeper here: `ReferenceElement` div > listener div > icon-wrapper div) —
-    // `div div` matches both the listener div and the icon-wrapper div nested inside it, so take
-    // the first (outermost, document-order-first) match to land on the listener div itself.
-    this.receiveAmountLabel = page.getByText('Receive (incl. fees)', { exact: true })
-    this.receiveAmountTooltipTrigger = this.receiveAmountLabel
-      .locator('xpath=following-sibling::*[1]')
-      .locator('div div')
-      .first()
-    // The exact "<amount> <symbol>" value lives in `ReceiveAmountValue`'s own `title`, one level
-    // above `TokenAmount`'s inner titled span — same convention as `sellBalance`/`buyBalance`.
-    this.receiveAmountValue = this.receiveAmountLabel.locator('xpath=../..').locator('[title]').first()
+    // `ReceiveAmount` wraps its label + `HelpTooltip` icon in its own `[data-testid]` div — no more
+    // sibling/ancestor traversal needed to reach the tooltip's real `HoverTooltip` hitbox div.
+    this.receiveAmountLabel = page.locator(`[data-testid="${TEST_IDS.receiveAmountLabel}"]`)
+    // `div div` matches both the listener div and the icon-wrapper div nested inside it (same
+    // quirk as `priceImpactTooltipTrigger` above), so take the first (outermost) match to land on
+    // the listener div itself.
+    this.receiveAmountTooltipTrigger = this.receiveAmountLabel.locator('div div').first()
+    // The exact "<amount> <symbol>" value lives directly on `ReceiveAmountValue`'s own `title` +
+    // `data-testid`.
+    this.receiveAmountValue = page.locator(`[data-testid="${TEST_IDS.receiveAmountValue}"]`)
     this.swapButton = page.locator('#do-trade-button')
     this.approveButton = page.locator('#approve-trade-button')
     this.primaryActionButton = page.locator('#do-trade-button, #approve-trade-button')
     this.arrowSeparator = page.locator('#currency-arrow-separator')
     this.maxButton = page.getByRole('button', { name: /^max$/i })
-    this.openOrders = page.locator('[data-testid="open-orders-list"]')
+    this.openOrders = page.locator(`[data-testid="${TEST_IDS.openOrdersList}"]`)
     this.unlockButton = page.locator('#unlock-cross-chain-swap-btn')
     this.orderProgressBarModal = page.locator('#order-progress-bar-modal')
     this.tokens = new TokenSelector(page)
     this.routePanel = new BridgeRoutePanel(page)
     this.recipientPanel = page.locator('#recipient')
-    this.recipientInput = page.locator('input.recipient-address-input')
+    this.recipientInput = page.locator(`input[data-testid="${TEST_IDS.recipientAddressInput}"]`)
     this.recipientPasteButton = this.recipientPanel.getByText('Paste', { exact: true })
     this.recipientConfirmationCheckbox = page.locator('#receiver-confirmation')
-    this.approveModeSelector = page.locator('.approve-mode-selector')
+    this.approveModeSelector = page.locator(`[data-testid="${TEST_IDS.approveModeSelector}"]`)
     this.settingsDialogButton = page.locator('#open-settings-dialog-button')
-    this.tradeFormActionButton = page.locator('.trade-form-blank-button')
+    this.tradeFormActionButton = page.locator(`[data-testid="${TEST_IDS.tradeFormBlankButton}"]`)
     this.slippageInput = page.locator('#slippage-input')
     this.wrapButton = page.getByRole('button', { name: 'Wrap', exact: true })
     this.unwrapButton = page.getByRole('button', { name: 'Unwrap', exact: true })

apps/cowswap-e2e-tests/src/pages/TwapPage.ts

@@ -1,3 +1,5 @@
+import { TEST_IDS } from '@cowprotocol/test-ids'
+
 import { expect } from '@playwright/test'
 
 import type { TradePage } from './TradePage'
@@ -15,13 +17,13 @@ export class TwapPage implements TradePage {
 
   constructor(page: Page) {
     this.page = page
-    this.inputAmount = page.locator('#input-currency-input .token-amount-input')
-    this.partsInput = page.locator('[data-testid="twap-parts-input"]')
-    this.durationInput = page.locator('[data-testid="twap-duration-input"]')
+    this.inputAmount = page.locator(`#input-currency-input [data-testid="${TEST_IDS.tokenAmountInput}"]`)
+    this.partsInput = page.locator(`[data-testid="${TEST_IDS.twapPartsInput}"]`)
+    this.durationInput = page.locator(`[data-testid="${TEST_IDS.twapDurationInput}"]`)
     this.placeOrderButton = page.locator('#do-trade-button')
     this.unlockButton = page.locator('#unlock-advanced-orders-btn')
     this.arrowSeparator = page.locator('#currency-arrow-separator')
-    this.tradeFormActionButton = page.locator('.trade-form-blank-button')
+    this.tradeFormActionButton = page.locator(`[data-testid="${TEST_IDS.tradeFormBlankButton}"]`)
   }
 
   async goto(opts: { chainId: number; sell?: string; buy?: string }): Promise<void> {

apps/cowswap-e2e-tests/src/support/constants.ts

@@ -1,14 +1,3 @@
-export const CHAIN_IDS = {
-  MAINNET: 1,
-  GNOSIS: 100,
-  BNB: 56,
-  ARBITRUM: 42161,
-  BASE: 8453,
-  SEPOLIA: 11155111,
-} as const
-
-export type SupportedChainId = (typeof CHAIN_IDS)[keyof typeof CHAIN_IDS]
-
 export const RPC_PROXY_PORT_ENV = 'E2E_RPC_PROXY_PORT'
 
 // The port is baked into the cached MetaMask profile at cache-build time (the wallet