E2E: Playwright price chart smoke (/charts, /trade strict, fullscreen) #228
Labels
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:implement
agent:implement
agent:open_issues
agent:ready
agent:research
agent:security_audit
agent:verify
architecture
backend
blocker:hybrid
blocker:launch
blocker:limit-orders
blocker:v2
block:log_only
block:security
bug
ci
contracts
correctness
deploy
dev
devops
docs
documentation
duplicate
e2e
enhancement
epic
feature
frontend
functional-completion
gas
good first issue
governance
help wanted
high-risk
hooks
hybrid
indexer
infra
infrastructure
integrators
invalid
launch-blocker
limit-orders
localnet
localterra
low priority
missing-implementation
needs-design
ops
performance
priority
high
priority
medium
product
qa
QA
question
ready
ready
research
scripts
security
security-hardening
smartcontracts
tech-debt
testing
ux
UX
v2
verification
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
code/cl8y-dex-terraclassic#228
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
Add Playwright coverage for chart behavior in the real browser:
/chartshappy path with indexer up, fullscreen control (mocked APIs), and/tradechart smoke under strict E2E (indexer + LCD). Today Playwright only covers layout bounding boxes, outage copy, and a11y shells — not canvas presence after successful candle fetch.Bundled scope:
/chartshappy path · fullscreen aria/handler ·/tradestrict E2E chart smokeCurrent codebase
frontend-dapp/playwright.config.ts— 5 workers (repo rule)frontend-dapp/e2e/trade-page-responsive.spec.ts— column geometry onlye2e/trade-indexer-outage.spec.ts,e2e/charts-indexer-outage.spec.tse2e/a11y-critical-routes.spec.ts— waits for region / loading / outage; excludes canvas from axePriceChart.tsx—data-testid="price-chart-fullscreen",requestFullscreen/exitFullscreendata-testid="price-chart-lightweight-canvas".github/workflows/test.yml,skills/AGENTS_E2E_STRICT_CHAIN.md)/chartsintegration Vitest (ChartsPage.integration.test.tsx) hits HTTP only — no canvas render assertion in browser.Why this is needed
/tradeand/chartsare primary chart surfaces; CI should detect “indexer up but canvas missing” regressions.Constraints and guardrails
.cursor/rules/playwright-workers.mdc).data-testid, canvas element count, visible region.element.requestFullscreen/document.exitFullscreenin jsdom-like browser context; assert aria-label toggles onfullscreenchange./tradetest runs only in chain+indexer job — tag with existing strict env pattern; skip gracefully in smoke (PLAYWRIGHT_SKIP_CHAIN=1) if required.waitForon chart test ids; avoidnetworkidle-only assertions.Relevant files
frontend-dapp/e2e/trade-page-responsive.spec.tsfrontend-dapp/e2e/trade-indexer-outage.spec.tsfrontend-dapp/e2e/charts-indexer-outage.spec.tsfrontend-dapp/e2e/a11y-critical-routes.spec.tsfrontend-dapp/e2e/fixtures/dev-wallet.tsfrontend-dapp/src/components/charts/PriceChart.tsxfrontend-dapp/src/pages/ChartsPage.tsxfrontend-dapp/playwright.config.ts.github/workflows/test.ymldocs/testing.md,skills/AGENTS_FRONTEND_PRICE_CHART.md,skills/AGENTS_E2E_STRICT_CHAIN.mdRecommended direction
e2e/price-chart-smoke.spec.ts(or extend existing):/charts: With indexer up, wait forprice-chart-lightweight-canvasand childcanvasOR stable loading → canvas transition; assert nottrade-chart-unavailable./trade, clickprice-chart-fullscreenwith mocked fullscreen API; assert aria-label “Exit…” / “Expand…”./tradestrict: In strict job, goto/trade(or seeded pair URL); assert canvas visible; optional interval click (1h→1d) without canvas disappearing.docs/testing.mdmatrix: which chart paths are Playwright vs Vitest.Acceptance criteria
/chartsproves canvas mounts when indexer returns candles (strict or mocked route)./tradechart canvas under strict E2E (or documented skip env).docs/testing.md+skills/AGENTS_FRONTEND_PRICE_CHART.mdupdated.Test plan — functional paths
/chartsloadprice-chart-lightweight-canvas+ canvas/chartsoutageE2E_INDEXER_OUTAGE=1/tradeloadtrade-chart-unavailableTest plan — attack vectors
getCandlesVerification criteria
npx playwright test e2e/price-chart-smoke.spec.ts(or chosen path) locally with stack up.Related issues
marked as related to #211
marked as related to #113
marked as related to #165
marked as related to #148
marked as related to #214
Implementation summary (pushed to
main@997e519)Added Playwright coverage for lightweight-charts retail chart surfaces (#228):
frontend-dapp/e2e/price-chart-smoke.spec.ts—/chartscanvas mount,/tradecanvas + interval1h→1d, read-only chart without wallet, fullscreen enter/exit/double-click/denied (mocked Fullscreen API)frontend-dapp/e2e/helpers/price-chart.ts— shared waits (price-chart-lightweight-canvas+ childcanvas), fullscreen mock, trade toolbar waitscripts/e2e-start-indexer.sh— indexer up before strict Playwright; wired in CIe2ejob (Postgres + build + start indexer)skills/AGENTS_FRONTEND_PRICE_CHART.md,skills/AGENTS_E2E_STRICT_CHAIN.md,frontend-dapp/e2e/README.mdEntire spec skips when
PLAYWRIGHT_SKIP_CHAIN=1(UI-only smoke). Strict CI/local uses indexer + deploy like other trade E2E.@brouie — please verify when you have a local/CI stack:
Verification checklist
bash scripts/e2e-start-indexer.shafterdeploy-dex-local.sh— indexer/api/v1/overviewreturns 200bash scripts/with-node.sh --cwd frontend-dapp -- npx playwright test e2e/price-chart-smoke.spec.ts --project=e2e-smoke— 9 passed (strict, indexer up)PLAYWRIGHT_SKIP_CHAIN=1same command — 9 skipped (no false failures)/charts—price-chart-lightweight-canvasvisible with childcanvas; nocharts-market-data-outage-banner/trade/{pair}— canvas visible; notrade-chart-unavailable; interval 1d click keeps canvasaria-pressedtoggle (mocked API)e2e/*-indexer-outage.spec.tsunchanged (make test-e2e-indexer-outage)e2ejob green (indexer start step + fullnpm run test:e2e)Leaving issue open until QA sign-off.
mentioned in commit
997e5194eementioned in commit
6a74bb69c0Verification complete (@ main
6a74bb6)Verified GitLab #228 on local strict stack (LocalTerra + indexer + deploy). Implementation from
997e519meets all acceptance criteria; added QA §5.1 ↔ Playwright crosswalk in this verification pass.What was verified
npx playwright test e2e/price-chart-smoke.spec.ts --project=e2e-smoke(strict)PLAYWRIGHT_SKIP_CHAIN=1/chartscanvas mountprice-chart-lightweight-canvas+ childcanvas/tradecanvas + interval 1h→1dtrade-chart-unavailablearia-pressed127.0.0.1:3000/trade)docs/testing.md/QA_TEMPLATE.md§5.1.github/workflows/test.ymlindexer start +npm run test:e2e)Note: Manual dev on ports outside
indexer/.envCORS_ORIGINS(e.g.:3002) shows indexer outage — use:3000/:5173.Outage regression (
make test-e2e-indexer-outage) not re-run to avoid stopping the shared indexer.Verification checklist (for future regressions)
bash scripts/e2e-start-indexer.shafter deploy —/api/v1/overview200bash scripts/with-node.sh --cwd frontend-dapp -- npx playwright test e2e/price-chart-smoke.spec.ts --project=e2e-smoke— 9 passedPLAYWRIGHT_SKIP_CHAIN=1same command — 9 skipped/charts— canvas visible; nocharts-market-data-outage-banner/trade/{pair}— canvas + interval 1d keeps canvasmake test-e2e-indexer-outage— outage banners unchangede2ejob greenClosing — all issue acceptance criteria and verification criteria satisfied.
mentioned in issue #705