feat: automated UI testing with Playwright #906
Conversation
- Set up Playwright with isolated JupyterLab instance (port 8889) - Expose DeckGL instance via React ref for programmatic access - Create test helpers for DeckGL canvas interactions (deckClick, deckHover, deckDrag) - Create notebook helpers for JupyterLab operations - Implement bbox selection test that verifies selected_bounds syncs to Python - Add test scripts: test:e2e, test:e2e:ui, jupyter:test DeckGL canvas interactions bypass DOM events and call handlers directly via deck.pickObject() and deck.props.onClick/onHover, enabling automated testing of map interactions.
vgeorge
changed the title
Add vitest configuration to exclude tests/e2e/** directory from vitest runs. This prevents vitest from attempting to execute Playwright test files, which was causing CI failures. The e2e tests should only be run via the dedicated test:e2e npm script which uses Playwright's test runner.
Resolved conflicts in package.json and package-lock.json by removing duplicate deck.gl dependency entries that were present in main.
|
Thanks for this! I'll write up some more thoughts, but first, could we split the playwright tests into a separate PR? I think that part is quite valuable on its own and will be relatively easy to merge while the globe view might take a little longer to architect. |
There was a problem hiding this comment.
Are these types not exported from a deck.gl module?
There was a problem hiding this comment.
They probably are, I'll check.
|
@kylebarron sounds good, I'll create a separated PR just for the playwright implementation. |
It's possible we may not need to use MapboxOverlay at all for globe view https://deck.gl/docs/whats-new#globe-view--maplibre |
|
See #908 for what I'm thinking of for the Python side, and then when that's serialized to the JS side, we'd switch on the |
|
The failing test is just a formatting lint to use double string quotes in your ipynb |
vgeorge
changed the title
|
@kylebarron I’ve updated the PR title and description, and addressed your comments. Some type definitions aren’t exposed by Deck.gl. I didn’t have time to look deeper, so I’d suggest we revisit that later. We should also document how to install the pre-commit checks for Python. Regarding the CI checks, that’s definitely a must but not sure about complexity. Let’s track it in a separate ticket. |
Summary
This PR introduces the initial Playwright setup for automated UI testing.
Changes introduced
test:e2ecommandv9.1.15for compatibilityDescription
This sets up the foundation for end-to-end testing using Playwright.
The current configuration includes a basic test that validates bounding box selection. This will help ensure UI stability and make it easier to expand automated test coverage over time.
How to review
npm run test:e2e, all tests should passtests/e2e/Follow-ups