feat: add Globe View and 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 probable 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 |
Contributes to #886
Related work
MapboxOverlayfor handling Maplibre interaction? #437)Changes introduced
v9.1.15GlobeMap), rendered whenprojection="globe"is setDescription
This PR takes a first, minimal step toward supporting the Globe View by introducing the Mapbox overlay approach.
Playwright testing is added to validate key UI interactions and prevent regressions. The current setup includes a test that verifies bounding box selection on the flat map. We can expand it later to cover other existing features once the testing framework stabilizes.
How to review
npm run test:e2e, all tests should passprojection="globe", the map should render data using the Globe View (bbox selection is not yet supported)Preview
Follow-ups
@kylebarron this is ready for a first review.