Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Coverage matrix

What each piece of the playground UI verifies, and which Playwright test guards it.

The single Playwright spec is at example/e2e/smoke.spec.ts. It runs in CI on every PR that touches example/** or src/**.

SDK surface ↔ playground UI

SDK surfaceWhere it appearsPlaywright assertion
createApyxClient (read-only)Reconstructed every chain switch / RPC change“renders the header title” — implies factory ran cleanly.
createApyxClient (with account)Set after wallet connect“Connect Wallet button is present” / “No wallet found” — both labels accepted because Chromium has no default window.ethereum.
apxUSD.balanceOf, apyUSD.balanceOfAccount panel“Account panel shows empty-state when no wallet is connected” guard.
apyUSD.exchangeRate, apyUSD.totalAssetsRate panel — “exchange rate” + “total assets” cards“Rate panel renders all four stat cards” — checks both labels visible.
apyUSDRateView.apy, apyUSDRateView.annualizedYieldRate panel — APY / annualized cards (Ethereum only)Same spec accepts either apy or apy / annualized yield depending on chain.
Exported ApxUSDAbi / ApyUSDAbi / ApyUSDRateViewAbiRaw Read Console“Raw Read Console is reachable” — element exists in DOM.
Default public RPC fallbackRPC bar placeholder“RPC bar shows the default public RPC as placeholder” — checks eth.llamarpc.com + the word default are in the placeholder text.
Per-chain RPC override + persistenceRPC bar localStorage key“RPC bar remembers per-chain overrides across reloads” — fills, reloads, asserts value persists.
UnsupportedChainErrorChain selector“chain selector lists Ethereum and Base” — limited to the two supported chains.

What’s not covered by the smoke spec

Hot-path writes (approve, deposit, redeem) need a real wallet provider. The smoke spec runs in headless Chromium with no window.ethereum, so it stops at “Connect Wallet button visible”. Write coverage is provided by the CLI fork e2e suite — same SDK, same writes, same anvil mainnet fork. See E2E testing for the breakdown.

flowchart TB
  subgraph Browser
    PW[Playwright Chromium] --> SMOKE[smoke.spec.ts]
    SMOKE --> RP[Read paths<br/>+ chain selector + RPC bar]
  end
  subgraph Node
    VTE[vitest e2e config] --> CLI[cli/* specs<br/>SDK + CLI writes via anvil]
    VTE --> SDK[sdk/* fork specs<br/>SDK contract modules]
  end
  RP -.together they cover.-> ALL[every public surface]
  CLI -.together they cover.-> ALL
  SDK -.together they cover.-> ALL

Running the spec locally

The Playwright config builds the playground first, then serves it on http://127.0.0.1:5173:

pnpm --filter @apyx-labs/sdk-playground build
pnpm --filter @apyx-labs/sdk-playground exec playwright install chromium
pnpm --filter @apyx-labs/sdk-playground test:e2e

Or if you only want to debug interactively:

pnpm --filter @apyx-labs/sdk-playground exec playwright test --ui

Adding new coverage

A new SDK feature surfaces in the playground typically means:

  1. Add a panel / control in example/src/**.
  2. Wire it through to the live apyx client.
  3. Add a test('...') block to example/e2e/smoke.spec.ts that asserts the new element is present (read paths) or that the appropriate disconnected-state copy is present (write paths that need a wallet).

Coverage parity is a soft rule: every public SDK surface should be reachable somewhere in either the playground or the CLI fork suite. The Playground Overview “What it exercises” table should be the audit checklist when this is in doubt.