E2E testing with Rstest, Playwright and 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
• Run Rstest CLI commands and inspect .rstest/ artifacts 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:variant console  # OSS E2E
bun run e2e-test:variant console-enterprise  # Requires ENTERPRISE_BACKEND_DIR
bun run e2e-test:variant console --watch  # Rstest watcher
bun run e2e-test:variant console topics/topic-creation.spec.ts
bun run e2e-test  # All four variants, including enterprise

Test Architecture

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

File location: tests/test-variant-<variant>/<feature>/*.spec.ts. Import test/expect from tests/shared/e2e.ts or the variant fixtures. See runner contracts.

Selector Priority

1. getByRole() - Best for accessibility
2. getByLabel() - For form inputs
3. getByText() - For content verification
4. getByTestId() - When semantic selectors aren't clear
5. 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 and CLI debugging

Output

After completing work:

1. Confirm frontend build succeeded
2. Verify all E2E tests pass
3. Note any new test IDs added to components
4. Mention cleanup of test containers