skills.rest
Opentrons
OpentronsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

components-testing

Tests ProtocolDeck with built packages and Playwright snapshots.

515|208|Updated Jul 6, 2015
Search Tags:#testing#pnpm#playwright#component-testing#protocol-deck#build-packages#visual-snapshots
One-click install
npx skills add https://github.com/Opentrons/opentrons --skill components-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: components-testing
Source: https://github.com/Opentrons/opentrons/tree/main/.cursor/skills/components-testing
Command: npx skills add https://github.com/Opentrons/opentrons --skill components-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ProtocolDeck component testing environment that validates built packages and Playwright visual snapshots, enabling reliable integration tests and UI verification during development.

Core Features & Use Cases

  • Tests the ProtocolDeck component against built packages of @opentrons/components and @opentrons/shared-data.
  • Verifies CSS bundling, component exports, and dependency packaging using real protocol analysis data.
  • Use Case: when developing ProtocolDeck, run visual regression tests to detect unintended UI changes and ensure compatibility with linked local packages.

Quick Start

Start the components-testing workflow by setting up the local environment and running the Playwright tests to produce baseline snapshots.

Frequently Asked Questions about components-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run visual regression tests for ProtocolDeck components using Playwright?▼

Visual regression testing for ProtocolDeck components uses Playwright snapshots to detect unintended UI changes against built packages. It validates CSS bundling, component exports, and dependency packaging using real protocol analysis data.

Why do I need to pack and link local packages for component integration testing?▼

Packing and linking local packages is required for component integration testing to ensure deterministic builds. The components-testing setup verifies @opentrons/components and @opentrons/shared-data against real protocol data.

Can I use pnpm workflows to test component exports and CSS bundling locally?▼

Yes, pnpm workflows support local component testing. Using pnpm install, pack, and link commands, the dedicated components-testing setup validates component exports, CSS bundling, and dependency packaging deterministically.

What's the best way to validate linked local packages during ProtocolDeck development?▼

The best way to validate linked local packages during ProtocolDeck development is running the dedicated components-testing workflow. It produces baseline Playwright snapshots and verifies compatibility with built @opentrons packages.

Do I need built packages of @opentrons/shared-data to run component visual snapshot tests?▼

Yes, built packages of @opentrons/shared-data and @opentrons/components are required. The visual snapshot tests run deterministically only when these built dependencies are linked through the pnpm workflow.

Why are my Playwright visual snapshots failing after linking local packages?▼

Playwright visual snapshots may fail if @opentrons/components and @opentrons/shared-data are not properly built and packed before linking. The components-testing setup requires these built packages to execute deterministic UI verification.

Related Skills

Explore More Software Engineering Skills→
kojikoji
1

opentrons-dev-setup

Configure an Opentrons development environment from source on macOS and Linux.

Community
Advanced
ValyayValyay

visual-diff

Compare baseline and current UI screenshots to report visual discrepancies.

Community
Intermediate
AskTinNguyenAskTinNguyen

vesper-electron-testing

Coordinate layered Electron UI testing to detect renderer regressions in Vesper apps.

Community
Advanced
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate