test: add data-testid to top-level chrome elements

[mscolnick]

Add some more data-testid

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	May 16, 2026 4:06pm

[cubic-dev-ai]

No issues found across 6 files

Architecture diagram

sequenceDiagram
    participant Test as Test Framework
    participant C as Chrome Components
    participant DOM as DOM Tree

    Note over Test,DOM: Runtime data-testid structure for testing

    Test->>C: queryByTestId("chrome-wrapper")
    C->>DOM: PanelsWrapper renders with data-testid="chrome-wrapper"
    DOM-->>Test: Element found

    Test->>C: queryByTestId("chrome-body")
    C->>DOM: AppChrome renders Panel with data-testid="chrome-body"
    DOM-->>Test: Element found

    Test->>C: queryByTestId("chrome-sidebar")
    C->>DOM: Sidebar renders with data-testid="chrome-sidebar"
    DOM-->>Test: Element found

    Test->>C: queryByTestId("chrome-footer")
    C->>DOM: Footer renders with data-testid="chrome-footer"
    DOM-->>Test: Element found

    Test->>C: queryByTestId("chrome-context-aware-panel")
    C->>DOM: ContextAwarePanel renders Panel with data-testid="chrome-context-aware-panel"
    DOM-->>Test: Element found

    alt Presenting mode off
        Test->>C: queryByTestId("chrome-controls-top-right")
        C->>DOM: Controls renders top-right div with data-testid="chrome-controls-top-right"
        DOM-->>Test: Element found
    else Presenting mode on
        Note over Test,C: Controls always renders
    end

    Test->>C: queryByTestId("chrome-controls-bottom-right")
    C->>DOM: Controls renders bottom-right div with data-testid="chrome-controls-bottom-right"
    DOM-->>Test: Element found

    Note over Test,DOM: All top-level chrome elements have stable test IDs for automated testing

Loading

_{Re-trigger cubic}

[Copilot]

Pull request overview

Adds stable data-testid hooks to top-level “chrome” UI elements in the editor to make UI tests less brittle and less dependent on styling/classnames.

Changes:

• Added data-testid attributes to the editor controls containers (top-right and bottom-right).
• Added data-testid attributes to core chrome layout wrappers: sidebar, footer, wrapper, and body panel.
• Added a data-testid to the context-aware panel in both pinned and floating render modes.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
frontend/src/components/editor/controls/Controls.tsx	Adds test IDs for the top-right and bottom-right control groups.
frontend/src/components/editor/chrome/wrapper/sidebar.tsx	Adds a test ID to the chrome sidebar root container.
frontend/src/components/editor/chrome/wrapper/panels.tsx	Adds a test ID to the overall chrome wrapper container.
frontend/src/components/editor/chrome/wrapper/footer.tsx	Adds a test ID to the chrome footer root element.
frontend/src/components/editor/chrome/wrapper/app-chrome.tsx	Adds a test ID to the main chrome body panel.
frontend/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx	Adds a test ID to the context-aware panel root in both render paths.

[github-actions]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.23.7-dev29