E2E Testing with Playwright & Testcontainers

Write end-to-end tests using Playwright against a full Redpanda Console stack running in Docker containers via testcontainers.

When to Use This Skill

• Testing 2+ step user journeys (login -> action -> verify)

• Multi-page workflows

• Browser automation with Playwright

NOT for: Component unit tests -> use testing

Critical Rules

ALWAYS:

• Run bun run build before running E2E tests (frontend assets required)

• Use testcontainers API for container management (never manual docker commands in tests)

• Use page.getByRole() and page.getByLabel() selectors (avoid CSS selectors)

• Add data-testid attributes when semantic selectors aren't available

• Use Task tool with MCP Playwright agents to analyze failures

• Clean up test data using afterEach to call cleanup API endpoints

NEVER:

• Test UI component rendering (use unit/integration tests)

• Use brittle CSS selectors like .class-name or #id

• Use force:true on .click() or waitForTimeout

• Hard-code wait times (use waitFor with conditions)

• Leave containers running after test failures

• Commit test screenshots to git

Commands

bun run build # Build frontend (REQUIRED first!) bun run e2e-test # Run OSS E2E tests bun run e2e-test-enterprise # Run Enterprise E2E tests bun run e2e-test:ui # Playwright UI mode (debugging) bun run e2e-test tests/topics/create-topic.spec.ts # Specific file

Test Architecture

OSS Mode (bun run e2e-test ): Redpanda + Backend + OwlShop containers Enterprise Mode (bun run e2e-test-enterprise ): Same + RBAC, SSO (requires console-enterprise repo)

File location: tests/<feature>/*.spec.ts

Selector Priority

• getByRole()

• Best for accessibility

• getByLabel()

• For form inputs

• getByText()

• For content verification

• getByTestId()

• When semantic selectors aren't clear

• CSS selectors - Avoid if possible

Test ID Naming

• kebab-case: data-testid="feature-action-element"

• Specific: include feature name + action + element type

• Dynamic: data-testid={
  item-delete-${id}}

References

• Container Setup — Testcontainer lifecycle, configs, CI setup

• Test Patterns — Multi-step workflows, forms, tables, API testing

• Failure Analysis — Error patterns, debugging, MCP Playwright agents

Output

After completing work:

• Confirm frontend build succeeded

• Verify all E2E tests pass

• Note any new test IDs added to components

• Mention cleanup of test containers