test(e2e): Playwright suite for chat, mobile, and embed bundle#35
Open
PAMulligan wants to merge 1 commit into
Open
test(e2e): Playwright suite for chat, mobile, and embed bundle#35PAMulligan wants to merge 1 commit into
PAMulligan wants to merge 1 commit into
Conversation
- Add @playwright/test with widget/playwright.config.ts (Vite dev server
via webServer, chromium-desktop + chromium-mobile projects, build the
IIFE bundle once in globalSetup).
- e2e/chat.spec.ts: toggle open/close, send message + receive reply,
Escape closes + restores focus, focus trap, Retry-after-failure flow.
- e2e/mobile.spec.ts: bottom-sheet layout + scrim + drag handle, scrim
tap closes, send/receive on mobile viewport.
- e2e/embed.spec.ts: IIFE auto-init from window.ClaudiusConfig and the
<claudius-chat> web-component path. Bundle is loaded via
page.addScriptTag + addStyleTag from dist/.
- e2e/helpers.ts: mockChatApi() routes **/api/chat with CORS headers and
preflight handling so cross-origin fetch from :5173 → :8787 works.
- Vitest exclude updated to skip e2e/.
Bug fix surfaced by the embed test: vite.config.embed.ts was leaving
`process.env.NODE_ENV` in the IIFE bundle, which throws in browsers
("process is not defined"). Replace it at build time via `define`.
Closes #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Deploying chat-widget with
|
| Latest commit: |
55dca6d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://56ddd341.chat-widget-ejc.pages.dev |
| Branch Preview URL: | https://15-e2e-tests-playwright.chat-widget-ejc.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #15
Summary
widget/playwright.config.ts: Vite dev server viawebServer, two projects (chromium-desktop,chromium-mobile), and aglobalSetupthat builds the IIFE embed bundle once before tests run.e2e/chat.spec.ts— desktop: toggle open/close, send + receive (mocked), Escape closes + restores focus, focus trap, Retry-on-failure recovery.e2e/mobile.spec.ts— mobile (iPhone 13 viewport): bottom-sheet layout + scrim + drag handle, scrim tap closes, send/receive.e2e/embed.spec.ts— production IIFE coverage: auto-init fromwindow.ClaudiusConfigand the<claudius-chat>web component. Bundle injected viapage.addScriptTag({ path: dist/claudius-embed.iife.js }).e2e/helpers.ts—mockChatApi(page)routes**/api/chatwith CORS headers + OPTIONS preflight so the cross-origin fetch from:5173→:8787works without spinning up the worker.Bug fix surfaced by the embed test
vite.config.embed.tswas shippingprocess.env.NODE_ENVreferences to the browser, which throwsReferenceError: process is not definedwhen the IIFE is loaded via<script src>. Fixed viadefineso the IIFE is now actually usable in production embed scenarios — not just tests.Scripts
Test plan
pnpm e2e— 10/10 pass (chat: 5, mobile: 3, embed: 2)pnpm test— 184/184 unit + integration still greenpnpm exec tsc --noEmitcleanpnpm e2e:uiopens the Playwright UI🤖 Generated with Claude Code