Lichtblick

Lichtblick uses Page Object Models (POMs) located in e2e/page-objects/ to encapsulate UI interactions. This allows tests to focus on behavior rather than brittle selectors.

When to use POMs: Use them for common, repeated interactions like dismissing dialogs, navigating sidebars, or controlling playback. When to use direct selectors: Use direct selectors only for one-off, test-specific elements that do not appear across multiple tests.

Available POMs

import { test, expect } from "../../../fixtures/electron";
import { DataSourceDialog, Sidebar, LayoutManager } from "../../../page-objects";

test("create a new layout", async ({ mainWindow }) => {
  const dialog = new DataSourceDialog(mainWindow);
  const sidebar = new Sidebar(mainWindow);
  const layout = new LayoutManager(mainWindow);

  // Given
  await dialog.close();
  await sidebar.openLayoutsTab();

  // When
  await layout.openDefaultLayout();
  await layout.createNewLayout();
  await layout.selectPanel("Diagnostics – Detail (ROS)");

  // Then
  await expect(mainWindow.getByText("Unnamed layout").nth(0)).toBeVisible();
});

The Lichtblick AI Agent System is designed to assist with development tasks via GitHub Copilot using a structured hierarchy of agents, skills, and instructions.

Core Abstractions

• Agents: Domain-specific specialists invoked by name (e.g., @lb-player). Each agent is defined in .github/agents/ using a .agent.md file containing YAML frontmatter with a description and tools field. They contain embedded domain knowledge and allowed tools.
• Skills: Deep-dive knowledge modules located in .github/skills/ (defined by SKILL.md). Agents load these on-demand by referencing them by name (e.g., "load player-internals skill") to access implementation details.
• Instructions: Coding conventions located in .github/instructions/ (defined by .instructions.md). These are applied automatically to any file matching their applyTo glob pattern, ensuring consistent code style without manual invocation.
• Prompts: Reusable workflow prompts located in .github/prompts/ (defined by .prompt.md).

Directory Structure

.github/
├── agents/          # Domain-specific agent definitions (.agent.md)
├── skills/          # Deep-dive knowledge modules (SKILL.md)
├── prompts/         # Reusable workflow prompts (.prompt.md)
└── instructions/    # Auto-applied coding conventions (.instructions.md)

<!-- Example of how an agent is invoked in a developer workflow -->
@lb-player help me implement a new data source lifecycle step

The useMessageReducer hook manages a state of type T using two primary lifecycle functions:

1. The restore function

• Initialization: Called with undefined when the panel first renders or when the user seeks to a different playback time (which clears state across all panels).
• Parameter Changes: Called with the previous state when the restore or addMessage/addMessages functions change. This allows you to reuse existing data when updating logic (e.g., changing a filter) instead of waiting for new messages to arrive.

2. The addMessages function

• Update: Called whenever new messages arrive on the subscribed topics.
• Batching: Unlike the deprecated addMessage, addMessages provides an array of all messages received since the last call, making it more efficient for high-frequency data.

Note: You must provide either addMessages or addMessage, but not both. Providing neither or both will result in an error.

The project integrates the Playwright MCP server to allow AI agents (like GitHub Copilot or Claude) to assist in E2E test development. The server provides structured accessibility snapshots (ARIA roles, names, test IDs) instead of screenshots, allowing LLMs to generate reliable selectors.

Workflow

1. Start the web app: yarn web:serve.
2. Open VS Code agent mode (Copilot Chat) and invoke @lb-e2e-test.
3. The MCP server starts and opens a Chromium browser.
4. Ask the agent to navigate to http://localhost:8080 and explore the UI.
5. Use the agent to capture accessibility snapshots and generate test scaffolds following project conventions.

Prerequisites

• VS Code with GitHub Copilot extension.
• Copilot agent mode enabled (VS Code 1.99+).
• The .mcp.json file at the repo root must be present.

Limitations

• The MCP server controls Chromium (web version), not Electron directly. Use it for selector discovery and scaffolding, but use custom fixtures for Electron-specific behavior.
• It is a development-time tool and does not affect CI/CD.