Add Playwright browser testing infrastructure #490

theturtle32 · 2025-10-06T07:30:50Z

Summary

This PR adds comprehensive browser testing infrastructure using Playwright to test real WebSocket connections in actual browser environments.

Key additions:

Playwright configuration for Chromium, Firefox, and WebKit browsers
Express-based test server (test/browser/server.js) with:
- WebSocket echo protocol support
- Special test commands (ping/pong, echo:prefix, close-me)
- Binary message support
- Graceful shutdown handling
Interactive HTML test page (test/browser/index.html) with:
- Full WebSocket client UI
- Connection management (connect/disconnect)
- Message sending (text and binary)
- Real-time log viewer
- Test API exposed via window.testAPI for Playwright
12 comprehensive browser tests covering:
- Connection establishment
- Text and binary message exchange
- Ping/pong protocol
- Multiple sequential messages
- Connection close handling
- ReadyState transitions
- UI interactions (Enter key, clear log, etc.)

Configuration updates:

Updated vitest.config.mjs to exclude browser tests
Added webServer configuration to auto-start/stop test server
Added npm scripts: test:browser, test:browser:chromium, test:browser:ui
Updated CLAUDE.md with browser testing documentation

Test plan

✅ All 12 Playwright browser tests passing
✅ All 632 existing Vitest tests still passing
✅ Lint checks passing (pnpm lint)
✅ Test isolation confirmed (Vitest doesn't run browser tests)
✅ Manual verification of interactive test page at http://localhost:8080

Run tests:

pnpm test:browser:chromium  # Run Chromium-only tests
pnpm test:browser           # Run all browsers
pnpm test                   # Verify unit tests still work

🤖 Generated with Claude Code

Set up Playwright for browser-based WebSocket testing with: - Express-based test server with echo protocol support - Interactive HTML test page with WebSocket client UI - 12 comprehensive browser tests for real WebSocket connections - Support for Chromium, Firefox, and WebKit browsers - Auto-start/stop test server via webServer configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

gemini-code-assist · 2025-10-06T07:31:12Z

Summary of Changes

Hello @theturtle32, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the project's testing capabilities by introducing a robust browser testing infrastructure using Playwright. This new setup allows for real-world validation of WebSocket connections directly within various browser environments, ensuring greater reliability and compatibility. It includes a dedicated test server and an interactive client UI, providing a comprehensive framework for verifying WebSocket functionality end-to-end.

Highlights

Playwright Integration: Introduced Playwright for comprehensive browser testing across Chromium, Firefox, and WebKit, ensuring real-world validation of WebSocket connections.
Dedicated Test Server: Implemented an Express-based WebSocket test server (test/browser/server.js) supporting echo functionality, special commands (ping/pong, echo:prefix, close-me), and binary message handling.
Interactive Test UI: Developed an interactive HTML page (test/browser/index.html) featuring a full WebSocket client UI, connection management, message sending, real-time logging, and a window.testAPI for programmatic interaction by Playwright tests.
Extensive Browser Tests: Added 12 new Playwright tests covering critical WebSocket scenarios, including connection lifecycle, text and binary messaging, ping/pong protocol, sequential message handling, readyState transitions, and UI interactions.
Build System Updates: Updated package.json with new Playwright and Express dependencies, and added new npm scripts (test:browser, test:browser:chromium, test:browser:ui). vitest.config.mjs was configured to exclude browser tests, and CLAUDE.md was updated with new test commands and an increased test count.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a comprehensive browser testing setup using Playwright, which is a great addition for ensuring the library works correctly in real browser environments. The implementation is solid, with a well-structured test server, an interactive test page, and a good suite of initial tests. I've identified a minor bug in the test page's logging logic and have a few suggestions to improve the test configuration and test code robustness, mainly around debugging and avoiding potential flakiness.

gemini-code-assist · 2025-10-06T07:32:19Z

test/browser/index.html

+        if (typeof event.data === 'string') {
+          addLog(`← Received: ${event.data}`, 'received');
+        } else {
+          addLog(`← Received binary data: ${event.data.size} bytes`, 'received');


There's a bug here when logging received binary data. When binaryType is 'arraybuffer' (which is the case here), event.data is an ArrayBuffer instance. ArrayBuffer objects do not have a .size property; you should use .byteLength to get the size in bytes.

Suggested change

addLog(`← Received binary data: ${event.data.size} bytes`, 'received');

addLog(`← Received binary data: ${event.data.byteLength} bytes`, 'received');

gemini-code-assist · 2025-10-06T07:32:19Z

CLAUDE.md

-completed.
+completed.
+- When it would be helpful to reference the latest documentation, use the context7 mcp tools
+- If needed, you have the ability to run commands with `sudo` without requiring a password.


The instruction about having passwordless sudo capability is a significant security consideration. While this might be for a controlled development environment, it's a practice that can lead to unintended security vulnerabilities if replicated elsewhere. It would be beneficial to add a strong warning here about the risks, or clarify the specific context where this is considered safe.

gemini-code-assist · 2025-10-06T07:32:20Z

playwright.config.js

+    command: 'node test/browser/server.js',
+    url: 'http://localhost:8080',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'ignore',


Ignoring the stdout of the web server can make debugging test failures very difficult, as any information logged to standard output by the server will be lost. It's better to pipe it to the test runner's output so it's available for inspection when needed.

Suggested change

stdout: 'ignore',

stdout: 'pipe',

gemini-code-assist · 2025-10-06T07:32:20Z

test/browser/websocket-connection.browser.test.js

+      await page.fill('#messageInput', msg);
+      await page.click('#sendBtn');
+      // Small delay between messages
+      await page.waitForTimeout(100);


Using page.waitForTimeout() is generally discouraged in Playwright tests as it can introduce flakiness. The test might pass locally but fail in a different environment (like CI) where performance characteristics vary. The underlying WebSocket implementation should be able to handle messages sent in quick succession without an artificial delay. I'd recommend removing this line. If a delay is absolutely necessary to reproduce a specific condition, it should be accompanied by a comment explaining why.

- Fix binary data logging bug: Use byteLength for ArrayBuffer - Enable server stdout piping for better test debugging - Remove waitForTimeout to avoid test flakiness 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

gemini-code-assist bot reviewed Oct 6, 2025

View reviewed changes

theturtle32 merged commit 8159027 into v2 Oct 6, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add Playwright browser testing infrastructure #490

Add Playwright browser testing infrastructure #490

Uh oh!

theturtle32 commented Oct 6, 2025

Uh oh!

gemini-code-assist bot commented Oct 6, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Oct 6, 2025

Uh oh!

gemini-code-assist bot Oct 6, 2025

Uh oh!

gemini-code-assist bot Oct 6, 2025

Uh oh!

gemini-code-assist bot Oct 6, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	addLog(`← Received binary data: ${event.data.size} bytes`, 'received');
	addLog(`← Received binary data: ${event.data.byteLength} bytes`, 'received');

Add Playwright browser testing infrastructure #490

Add Playwright browser testing infrastructure #490

Uh oh!

Conversation

theturtle32 commented Oct 6, 2025

Summary

Test plan

Uh oh!

gemini-code-assist bot commented Oct 6, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants