Skip to content

Playwright e2e setup#888

Open
tchoi-rs wants to merge 65 commits into
mainfrom
playwright-e2e-setup
Open

Playwright e2e setup#888
tchoi-rs wants to merge 65 commits into
mainfrom
playwright-e2e-setup

Conversation

@tchoi-rs

Copy link
Copy Markdown
Contributor

Description

REQUIRED

  • brief description of the change
  • don't repeat too much information that's already included in the jira/github issue
  • if the change includes any UI updates, include screenshots or screen recordings if you think it adds value

Design decisions

OPTIONAL

  • if there were any particular design decisions made, list them here

Testing notes

OPTIONAL

  • if there are any particular pre-requisites or instructions for manual testing, list them here

@github-actions

github-actions Bot commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

Bundle Stats — Frontend bundle size change

Hey 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

Files count Total bundle size % Changed
507 30.19 MB → 30.19 MB (+700 B)
11.08 MB → 11.08 MB (gzip)
+0.00%
Changeset
File Δ Size
assets/graphics/SearchBarcode.tsx 🆕 +1022 B 0 B → 1022 B
rspace/other/index.ts 🆕 +262 B 0 B → 262 B
VersionLockPicker.tsx 📈 +152 B (+12.13%) 1.22 kB → 1.37 kB
src/components/TreeSort.tsx 📈 +122 B (+6.59%) 1.81 kB → 1.93 kB
ColumnFieldMapRow.tsx 📈 +97 B (+4.31%) 2.2 kB → 2.29 kB
UpdateField.tsx 📈 +54 B (+1.23%) 4.29 kB → 4.34 kB
AdvancedSearch.tsx 📈 +85 B (+1.11%) 7.49 kB → 7.58 kB
MainPanel.tsx 📈 +60 B (+0.31%) 19.01 kB → 19.06 kB
UiStore.ts 📈 +8 B (+0.25%) 3.16 kB → 3.16 kB
chunks/common-[hash].js 📈 +56 B (+0.15%) 36.23 kB → 36.29 kB
chunks/workspace-[hash].js 📈 +25 B (+0.10%) 24.1 kB → 24.13 kB
ToolbarCreateMenu.tsx 📉 -7 B (-0.20%) 3.34 kB → 3.33 kB
SearchBarcode.tsx 🔥 -1022 B (-100%) 1022 B → 0 B
assets/branding/rspace/other/index.ts 🔥 -262 B (-100%) 262 B → 0 B
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
inventoryEntry-[hash].js 356.66 kB → 357 kB (+351 B)
149.73 kB → 149.82 kB (gzip)
+0.10%
chunks/TreeSort-[hash].js 4.37 kB → 4.49 kB (+122 B)
2.15 kB → 2.18 kB (gzip)
+2.73%
workspaceToolbar-[hash].js 65.42 kB → 65.5 kB (+85 B)
25.27 kB → 25.28 kB (gzip)
+0.13%
chunks/Sidebar-[hash].js 165.28 kB → 165.34 kB (+60 B)
61.88 kB → 61.89 kB (gzip)
+0.04%
chunks/common-[hash].js 36.23 kB → 36.29 kB (+56 B)
12.39 kB → 12.41 kB (gzip)
+0.15%
chunks/workspace-[hash].js 24.1 kB → 24.13 kB (+25 B)
8.56 kB → 8.56 kB (gzip)
+0.10%
chunks/use-stores-[hash].js 252.96 kB → 252.97 kB (+8 B)
79.5 kB → 79.51 kB (gzip)
+0.00%

Smaller

Asset File Size % Changed
chunks/ToolbarCreateMenu-[hash].js 10.7 kB → 10.7 kB (-7 B)
5.16 kB → 5.15 kB (gzip)
-0.06%

@greptile-apps

greptile-apps Bot commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This 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.

  • Config & fixtures: playwright-e2e.config.ts sets up four projects (three browsers + an API-only Node project), per-project seed users for parallel isolation, and a merged fixture set covering UI page objects, API clients, and a sysadmin context. env.ts centralises all env-var reads with clear required/optional semantics.
  • Page objects & components: BasePage, LoginPage, WorkspacePage, DocumentPage, DocumentEditorPage, SystemConfigPage, AppsPage, plus reusable components (TinyMceEditor, PubchemDialogComponent, DocumentToolbar, etc.) follow the project's locator-priority guidelines.
  • Specs: Login smoke tests, a Documents API create/retrieve spec, and a serial PubChem integration spec are included as the first concrete test cases.

Confidence Score: 3/5

The 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 flowLogin fixture delivers pageWorkspace without confirming the workspace has finished loading — any test that uses this fixture as a precondition and then immediately acts on the workspace may fail intermittently on slower machines or CI runners. Separately, the API document test creates a record on every run but never deletes it, so the test environment accumulates orphaned documents over time.

fixtures.ts (flowLogin missing isLoaded() wait) and specs/api/documents.api.spec.ts (missing document cleanup) need attention before the suite is gate-kept in CI.

Important Files Changed

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)
Loading
%%{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)
Loading

Comments Outside Diff (1)

  1. src/main/webapp/ui/src/__tests__/e2e/fixtures.ts, line 1120-1124 (link)

    P1 flowLogin hands off pageWorkspace before the page is ready

    login() clicks the submit button and returns, but navigation to /workspace is asynchronous. use(pageWorkspace) is called immediately afterward with no wait, so any test that uses flowLogin and then acts on pageWorkspace (e.g. createBasicDocument()) may find the workspace mid-redirect and fail intermittently. Adding await pageWorkspace.isLoaded() before use() gates delivery on the workspace being fully rendered.

    Fix in Claude Code Fix in Codex

Fix All in Claude Code Fix All in Codex

Reviews (1): Last reviewed commit: "add pages and page components" | Re-trigger Greptile

Comment thread src/main/webapp/ui/src/__tests__/e2e/specs/apps/pubchem.e2e.ts Outdated
Comment thread src/main/webapp/ui/src/__tests__/e2e/pageObjects/WorkspacePage.ts Outdated
Comment thread src/main/webapp/ui/.env.example Outdated
Comment thread src/main/webapp/ui/src/__tests__/e2e/README.md Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/main/webapp/ui/src/__tests__/e2e/README.md Outdated
Comment thread src/main/webapp/ui/src/__tests__/e2e/CLAUDE.md Outdated
Comment thread src/main/webapp/ui/src/__tests__/e2e/mockServer.mjs Outdated
@nebay-abraha
nebay-abraha force-pushed the playwright-e2e-setup branch 2 times, most recently from 04762f2 to 5719477 Compare July 2, 2026 13:46
- 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
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
@nebay-abraha
nebay-abraha force-pushed the playwright-e2e-setup branch from 9832db8 to ac461be Compare July 6, 2026 17:08
nebay-abraha and others added 29 commits July 10, 2026 20:31
…rio helpers; fix Dataverse multi-connection ambiguity
# Conflicts:
#	package.json
#	pnpm-lock.yaml
# Conflicts:
#	AGENTS.md
#	CLAUDE.md
#	CLAUDE.md~HEAD
#	pnpm-lock.yaml
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants