skills.rest
Arize-ai
Arize-aiOFFICIAL
Explore all skills by this author →
Website𝕏@arizeaiGitHub

phoenix-playwright-tests

Write Playwright end-to-end tests for the Phoenix AI observability platform UI.

11.3k|1.1k|Updated Nov 9, 2022
Search Tags:#playwright#ui testing#Browser Automation#E2E Testing#Phoenix#test selectors#Flaky tests
One-click install
npx skills add https://github.com/Arize-ai/phoenix --skill phoenix-playwright-tests
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: phoenix-playwright-tests
Source: https://github.com/Arize-ai/phoenix/tree/main/.agents/skills/phoenix-playwright-tests
Command: npx skills add https://github.com/Arize-ai/phoenix --skill phoenix-playwright-tests

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test.

What problem does it solve?

Writing reliable end-to-end tests for the Phoenix web UI requires knowing its page structure, selector conventions, test credentials, and common flakiness pitfalls, which are otherwise scattered across the codebase.

Core Features & Use Cases

  • Selector and interaction patterns: Provides prioritized selector guidance (role, label, text, test IDs, CSS) plus patterns for dialogs, tables, tabs, dropdowns, nested submenus, and CodeMirror editors.
  • Complete test examples: Includes ready-to-adapt examples for CRUD flows, user management, serial tests with shared state, role-based access control, and playground integration.
  • Flakiness debugging guidance: Documents anti-patterns like waitForTimeout, state-based wait strategies, and CI-safe test execution with non-interactive reporters.
  • Use Case: When asked to add E2E coverage for a new Phoenix feature, generate a spec file in js/app/tests/ that logs in as admin, navigates to the feature page, and asserts the workflow using stable role selectors.

Quick Start

Write a Playwright test for Phoenix that creates a new dataset and verifies it appears in the datasets table.

Frequently Asked Questions about phoenix-playwright-tests

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

FAQPage Schema
How do I write Playwright E2E tests for the Phoenix UI?▼

Create a spec file in js/app/tests/ using test.describe with a beforeEach that logs in via the /login page with admin@localhost credentials. Use role-based selectors like getByRole and getByLabel, and follow the examples in EXAMPLES.md for CRUD and serial test patterns.

What selectors should I use in Playwright tests for Phoenix?▼

Prefer role selectors like getByRole("button", { name: "Save" }) first, then label selectors, text selectors, and data-testid attributes. Use CSS locators only as a last resort since they are brittle against UI changes.

Why are my Playwright tests flaky in CI?▼

Flakiness usually comes from page.waitForTimeout calls racing against rendering, or using getByText for submenu items instead of getByRole("menuitem"). Replace arbitrary timeouts with state-based waits like waitFor({ state: "visible" }) and waitForURL.

How do I run Phoenix Playwright tests without the interactive report server?▼

Pass --reporter=list or --reporter=dot to the playwright test command, or set CI=1 before running. This prevents Playwright from serving the HTML report and waiting for Ctrl+C, so the command exits cleanly after tests finish.

How do I test nested dropdown submenus in Playwright?▼

Click the trigger button, hover or click the parent menuitem, then click the submenu item using getByRole("menuitem", { name: /pattern/i }). Playwright's auto-waiting handles submenu timing, so avoid getByText which is flaky in CI.

Related Skills

Explore More Software Engineering Skills→
UiPathUiPath
18

apollo-install

Clone the apollo-ui repository, install dependencies, build packages, and start Storybook on port 6006.

Official
Intermediate
YuriNakayamaYuriNakayama

E2E Fix

Diagnose and fix failing Playwright E2E tests in GitHub Actions CI.

Community
Advanced
t0labt0lab
2

playwright

Automate browser interactions and UI verification via Playwright CLI snapshots.

Official
Intermediate
flutterflutter
2.8k

flutter-add-widget-test

Write Flutter widget tests using the WidgetTester API to verify UI rendering and interactions.

Official
Intermediate