Playwright e2e setup#888
Conversation
Bundle Stats — Frontend bundle size changeHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller
|
Greptile SummaryThis PR establishes the Playwright E2E test infrastructure for RSpace, adding browser tests (chromium/firefox/webkit) and API tests alongside a well-documented page-object and component model.
Confidence Score: 3/5The new E2E framework is well-structured and safe to merge as infrastructure, but two behavioural gaps need addressing before tests are relied upon in CI. The
|
| Filename | Overview |
|---|---|
| src/main/webapp/ui/src/tests/e2e/fixtures.ts | Central fixture hub merging UI, API, and sysadmin contexts — flowLogin hands off pageWorkspace without waiting for the workspace to finish loading, risking intermittent failures in any test that uses it as a precondition. |
| src/main/webapp/ui/src/tests/e2e/specs/api/documents.api.spec.ts | API smoke test for document create + retrieve; created document is never deleted, leaving orphaned records in the test environment on every run. |
| src/main/webapp/ui/playwright-e2e.config.ts | Well-structured Playwright config: separate browser and API projects, per-project seed users for parallel isolation, env-driven headless/logging/CI settings, and correct testIdAttribute override. |
| src/main/webapp/ui/src/tests/e2e/specs/apps/pubchem.e2e.ts | Serial PubChem integration spec; ignoreHTTPSErrors: true is applied to the manually created context for all browser types when only WebKit requires it, and a TODO comment ("creating a document should be via api") is not tracked anywhere. |
| src/main/webapp/ui/src/tests/e2e/pageObjects/WorkspacePage.ts | WorkspacePage is well-structured; createButton uses a raw CSS attribute selector instead of getByTestId(), inconsistent with the project convention. |
| src/main/webapp/ui/src/tests/e2e/pageObjects/DocumentEditorPage.ts | Solid editor page object; correctly derives TinyMCE editor IDs from DOM attributes rather than guessing, and composes DocumentToolbar and PubchemDialogComponent cleanly. |
| src/main/webapp/ui/.env.example | Useful template but missing RSPACE_TEST_USERNAME and RSPACE_TEST_PASSWORD, which are read by env.ts and documented in README.md. |
| src/main/webapp/ui/src/tests/e2e/README.md | Comprehensive README covering setup, running, and directory layout; two commands in the "Running locally" section are prefixed with ppnpm instead of pnpm. |
| src/main/webapp/ui/src/tests/e2e/components/pubchem/PubchemDialogComponent.ts | Thorough dialog component; correctly handles the MUI Portal listbox being outside the dialog root and uses semantic locators throughout. |
Sequence Diagram
%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
participant Spec as Test Spec
participant Fixtures as fixtures.ts
participant LP as LoginPage
participant WP as WorkspacePage
participant API as DocumentsClient
participant Backend as RSpace Backend
Note over Spec,Backend: flowLogin fixture (UI tests)
Spec->>Fixtures: request flowLogin
Fixtures->>LP: open() → goto /login
Fixtures->>LP: login(username, password)
LP->>Backend: POST /login
Fixtures->>WP: use(pageWorkspace) ⚠️ no isLoaded() wait
WP-->>Spec: WorkspacePage (may still be loading)
Note over Spec,Backend: API test fixture
Spec->>Fixtures: request clientDocuments
Fixtures->>API: new DocumentsClient(apiContext, apiKey)
API->>Backend: POST /api/v1/documents
Backend-->>API: ApiDocument
API-->>Spec: created doc (never deleted ⚠️)
Note over Spec,Backend: flowSysadminConfig fixture
Spec->>Fixtures: request flowSysadminConfig
Fixtures->>Backend: new browser context → login as sysadmin
Fixtures->>Backend: open /system/config
Fixtures-->>Spec: SystemConfigPage
Spec->>Backend: ensureSetting(chemistry.available, ALLOWED)
Fixtures->>Backend: ctx.close() (teardown)
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
participant Spec as Test Spec
participant Fixtures as fixtures.ts
participant LP as LoginPage
participant WP as WorkspacePage
participant API as DocumentsClient
participant Backend as RSpace Backend
Note over Spec,Backend: flowLogin fixture (UI tests)
Spec->>Fixtures: request flowLogin
Fixtures->>LP: open() → goto /login
Fixtures->>LP: login(username, password)
LP->>Backend: POST /login
Fixtures->>WP: use(pageWorkspace) ⚠️ no isLoaded() wait
WP-->>Spec: WorkspacePage (may still be loading)
Note over Spec,Backend: API test fixture
Spec->>Fixtures: request clientDocuments
Fixtures->>API: new DocumentsClient(apiContext, apiKey)
API->>Backend: POST /api/v1/documents
Backend-->>API: ApiDocument
API-->>Spec: created doc (never deleted ⚠️)
Note over Spec,Backend: flowSysadminConfig fixture
Spec->>Fixtures: request flowSysadminConfig
Fixtures->>Backend: new browser context → login as sysadmin
Fixtures->>Backend: open /system/config
Fixtures-->>Spec: SystemConfigPage
Spec->>Backend: ensureSetting(chemistry.available, ALLOWED)
Fixtures->>Backend: ctx.close() (teardown)
Comments Outside Diff (1)
-
src/main/webapp/ui/src/__tests__/e2e/fixtures.ts, line 1120-1124 (link)flowLoginhands offpageWorkspacebefore the page is readylogin()clicks the submit button and returns, but navigation to/workspaceis asynchronous.use(pageWorkspace)is called immediately afterward with no wait, so any test that usesflowLoginand then acts onpageWorkspace(e.g.createBasicDocument()) may find the workspace mid-redirect and fail intermittently. Addingawait pageWorkspace.isLoaded()beforeuse()gates delivery on the workspace being fully rendered.
Reviews (1): Last reviewed commit: "add pages and page components" | Re-trigger Greptile
There was a problem hiding this comment.
Pull request overview
Introduces a Playwright-based end-to-end (E2E) testing framework for the RSpace UI and REST API, plus GitHub Actions workflows to run it in mocked (PR-gating) and real (scheduled) integration modes.
Changes:
- Added a Playwright E2E harness (fixtures, page objects/components, API clients) and initial smoke/integration specs (login, documents API, PubChem).
- Added a lightweight Node mock HTTP server for backend-driven third-party integration calls (e.g., PubChem) and fixture data to support deterministic runs.
- Added reusable + calling GitHub Actions workflows to boot a full RSpace instance and execute the E2E suite; updated Vitest Browser Mode config to exclude the Playwright E2E directory.
Reviewed changes
Copilot reviewed 39 out of 40 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/main/webapp/ui/vitest.browser.config.ts | Excludes Playwright E2E specs from Vitest Browser Mode discovery. |
| src/main/webapp/ui/src/tests/e2e/users.ts | Defines seed users + sysadmin credential access via env. |
| src/main/webapp/ui/src/tests/e2e/tags.ts | Adds tag constants for Playwright title/grep filtering. |
| src/main/webapp/ui/src/tests/e2e/specs/auth/login.e2e.ts | Adds login UI smoke tests. |
| src/main/webapp/ui/src/tests/e2e/specs/apps/pubchemMock/handlers.mjs | Implements PubChem mock handlers for the mock server. |
| src/main/webapp/ui/src/tests/e2e/specs/apps/pubchemMock/fixtures/synonyms.json | Adds PubChem synonym fixture used by mocks/expectations. |
| src/main/webapp/ui/src/tests/e2e/specs/apps/pubchemMock/fixtures/search.json | Adds PubChem property-search fixture used by mocks/expectations. |
| src/main/webapp/ui/src/tests/e2e/specs/apps/pubchem.e2e.ts | Adds PubChem integration E2E tests (UI + backend interaction). |
| src/main/webapp/ui/src/tests/e2e/specs/api/documents.api.spec.ts | Adds Documents REST API smoke test using Playwright request context. |
| src/main/webapp/ui/src/tests/e2e/README.md | Documents E2E prerequisites/config and how to run locally/CI. |
| src/main/webapp/ui/src/tests/e2e/pageObjects/WorkspacePage.ts | Adds Workspace page object + “create basic document” flow. |
| src/main/webapp/ui/src/tests/e2e/pageObjects/SystemConfigPage.ts | Adds System Config page object for sysadmin settings. |
| src/main/webapp/ui/src/tests/e2e/pageObjects/LoginPage.ts | Adds Login page object and login helpers. |
| src/main/webapp/ui/src/tests/e2e/pageObjects/DocumentPage.ts | Adds view-mode structured document page object. |
| src/main/webapp/ui/src/tests/e2e/pageObjects/DocumentEditorPage.ts | Adds edit-mode document page object + PubChem toolbar/dialog hooks. |
| src/main/webapp/ui/src/tests/e2e/pageObjects/BasePage.ts | Introduces a minimal shared base class for page objects. |
| src/main/webapp/ui/src/tests/e2e/pageObjects/AppsPage.ts | Adds Apps page helper to enable/disable integrations. |
| src/main/webapp/ui/src/tests/e2e/mockServer.mjs | Adds real HTTP mock server for JVM-driven third-party calls. |
| src/main/webapp/ui/src/tests/e2e/integrationMode.ts | Adds mock/real integration mode resolution. |
| src/main/webapp/ui/src/tests/e2e/fixtures.ts | Defines Playwright fixtures/options for UI flows + API clients. |
| src/main/webapp/ui/src/tests/e2e/env.ts | Centralizes env var reading and required/optional semantics. |
| src/main/webapp/ui/src/tests/e2e/components/TinyMceEditor.ts | Adds TinyMCE editor handle for field interactions/assertions. |
| src/main/webapp/ui/src/tests/e2e/components/pubchem/PubchemDialogComponent.ts | Adds PubChem dialog component abstraction. |
| src/main/webapp/ui/src/tests/e2e/components/navigation/PublicNavComponent.ts | Adds public nav component abstraction for unauthenticated pages. |
| src/main/webapp/ui/src/tests/e2e/components/DocumentViewToolbar.ts | Adds view-mode document toolbar locators. |
| src/main/webapp/ui/src/tests/e2e/components/DocumentToolbar.ts | Adds edit-mode document toolbar actions (save/cancel). |
| src/main/webapp/ui/src/tests/e2e/components/DocumentHeader.ts | Adds document header fragment locators/helpers. |
| src/main/webapp/ui/src/tests/e2e/components/AttachmentsSection.ts | Adds attachments panel fragment locators/helpers. |
| src/main/webapp/ui/src/tests/e2e/CLAUDE.md | Adds agent guidance for authoring/running E2E specs in this folder. |
| src/main/webapp/ui/src/tests/e2e/api/models/document.ts | Adds TS types for Documents API payloads used by tests. |
| src/main/webapp/ui/src/tests/e2e/api/clients/DocumentsClient.ts | Adds API client for Documents endpoints. |
| src/main/webapp/ui/src/tests/e2e/api/clients/BaseApiClient.ts | Adds shared API client base (apiKey header + response assertions). |
| src/main/webapp/ui/src/tests/e2e/AGENTS.md | Adds (copied) agent guidance for the E2E suite. |
| src/main/webapp/ui/playwright-e2e.config.ts | Adds Playwright config (projects, reporters, webServer mock mode, etc.). |
| src/main/webapp/ui/.env.example | Adds env template for local runs. |
| package.json | Adds root npm scripts to run the Playwright E2E suite. |
| .gitignore | Ignores UI .env and Playwright MCP output directory. |
| .github/workflows/e2e.yml | Adds reusable workflow to build WAR + run E2E against booted instance. |
| .github/workflows/e2e-real.yml | Adds scheduled/live “real mode” E2E workflow. |
| .github/workflows/e2e-mocked.yml | Adds PR-gating “mocked mode” E2E workflow. |
04762f2 to
5719477
Compare
- add Playwright e2e runner: config, pnpm scripts, and gitignore rule - add e2e test infrastructure: fixtures, page objects, users, api clients and wire a test
dquote> - add e2e CI workflows with mock-mode gate and nightly real-mode drift check dquote> - add mock server add pubchem mock
…failure so the show the actual stack trace
Pin both Maven invocations to the same deterministic to ensure they produce the same WAR filename. Also add to skip WAR packaging and preserve the prebuilt artifact unchanged
…g to import and organize components and pages into dir
9832db8 to
ac461be
Compare
…rio helpers; fix Dataverse multi-connection ambiguity
# Conflicts: # package.json # pnpm-lock.yaml
# Conflicts: # AGENTS.md # CLAUDE.md # CLAUDE.md~HEAD # pnpm-lock.yaml
Description
REQUIRED
Design decisions
OPTIONAL
Testing notes
OPTIONAL