add new rhdh-playwright skill

[christoph-jerolimov]

Skill to 'chat' with your agent about a running RHDH instance. It logins, navigate, can make screenshots etc. and understands the basics of RHDH/Backstage testing.

It depends on a local installed playwright-cli. More about playwright-cli:

https://playwright.dev/agent-cli/introduction
https://github.com/microsoft/playwright-cli

Example 1

 ▐▛███▜▌   Claude Code v2.1.190
▝▜█████▛▘  Opus 4.6 with high effort · Google Vertex AI
  ▘▘ ▝▝    ~/git/rhd/rhdh-skill

❯ @skills/rhdh-playwright/SKILL.md

  RHDH is running at <removed url>

  Which sidebar items are available and how many catalog entities are visible?

details...

  ⎿  Read skills/rhdh-playwright/SKILL.md (235 lines)

  Thought for 7s (ctrl+o to expand)

● I'll open the RHDH instance and check the sidebar and catalog.

● Bash(playwright-cli open "<removed url>"
      --browser chromium 2>&1)
  ⎿  ### Browser `default` opened with pid 1458747.
     ### Ran Playwright code
     ```js
     … +7 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot --depth 4 2>&1)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: RHDH 1.10 loadtest | Select a sign-in method | RHDH 1.10 loadtest
     … +15 lines (ctrl+o to expand)

● Login page detected. Let me find the guest sign-in option and click it.

● Bash(playwright-cli snapshot --depth 8 2>&1)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: RHDH 1.10 loadtest | Select a sign-in method | RHDH 1.10 loadtest
     … +24 lines (ctrl+o to expand)

● Bash(playwright-cli click "e25" 2>&1)
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('button', { name: 'Enter' }).click();
     … +9 lines (ctrl+o to expand)

● Logged in. Now let me get the sidebar items and then navigate to the catalog.

● Bash(playwright-cli snapshot --depth 5 2>&1)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: Welcome back! | RHDH 1.10 loadtest
     … +68 lines (ctrl+o to expand)

● I need a deeper snapshot of the sidebar nav to see all items.

● Bash(playwright-cli snapshot --target "e92" --depth 10 2>&1)
  ⎿  Error: Exit code 1
     Unknown option: --target

     playwright-cli snapshot [target]

     Capture page snapshot to obtain element ref

     Arguments:
       [target]                    element reference from the previous page snapshot, or a unique element selector for the root element to
     capture a partial snapshot instead of the whole page
     Options:
     … +3 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "e92" --depth 10 2>&1)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: Welcome back! | RHDH 1.10 loadtest
     … +143 lines (ctrl+o to expand)

● Good, I have the full sidebar. Now let me navigate to the catalog to count entities.

● Bash(playwright-cli click "e115" 2>&1)
  ⎿  ### Ran Playwright code
     ```js
     await page.getByTestId('sidebar-root').getByRole('link', { name: 'Catalog' }).click();
     … +8 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot --depth 6 2>&1)
  ⎿  ### Page
     - Page URL: <removed url>/catalog?filters%5Bkind%5D=component&limit=20
     … +96 lines (ctrl+o to expand)

● I need to look deeper into the catalog table area to see the entities.

● Bash(playwright-cli snapshot "e730" --depth 10 2>&1)
  ⎿  ### Page
     - Page URL: <removed url>/catalog?filters%5Bkind%5D=component&limit=20
     … +607 lines (ctrl+o to expand)

● I have all the information needed. Let me also check the filter area to confirm the Kind filter state.

● Bash(playwright-cli snapshot "e638" --depth 8 2>&1)
  ⎿  ### Error
     Error: Ref e638 not found in the current page snapshot. Try capturing new snapshot.

● No matter — I already have the key info. Let me close the browser.

● Bash(playwright-cli close 2>&1)
  ⎿  Browser 'default' closed

● Here's what I found on the RHDH 1.10 loadtest instance:
 
  Sidebar Items

  Main navigation (above separator):
  1. Home
  2. My Group
  3. Catalog
  4. APIs
  5. Learning Paths

  Below separator (plugins):
  6. Docs
  7. Page 1 through Page 25 (25 dynamic pages)
  8. Bulk import

  Bottom section:
  9. Administration

  Top bar also includes: Search, Self-service, Your starred items, Application launcher, Help, and a Lightspeed button.

  Catalog Entities

  The catalog shows 1,000 components (heading reads "All Components (1000)"), displayed in a table with columns: Name, System, Owner, Type,
  Lifecycle, Description, Tags, Created At, and Actions. The default view shows 20 per page with the Kind filter set to "Component".

✻ Cooked for 59s

Example 2

 ▐▛███▜▌   Claude Code v2.1.190
▝▜█████▛▘  Opus 4.6 with high effort · Google Vertex AI
  ▘▘ ▝▝    ~/git/rhd/rhdh-skill


❯ @skills/rhdh-playwright/SKILL.md

  RHDH is running at <removed url>

  open all sidebar items and ensure that there is no alert, warning or error displayed. make a screenshot of each page.

details...

  ⎿  Read skills/rhdh-playwright/SKILL.md (236 lines)

● I'll use the rhdh-playwright skill to navigate through all sidebar items, check for errors, and take screenshots.

● Skill(rhdh-playwright)
  ⎿  Initializing…
  ⎿  Error: Unknown skill: rhdh-playwright

  Thought for 5s (ctrl+o to expand)

● The skill content is already loaded. Let me open the RHDH instance and work through all sidebar items.
  
● Bash(playwright-cli open "<removed url>"
      --browser chromium)
  ⎿  ### Browser `default` opened with pid 1471279.
     ### Ran Playwright code
     ```js
     … +7 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot --depth 4)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: RHDH 1.10 loadtest
     … +8 lines (ctrl+o to expand)

  Thought for 3s (ctrl+o to expand)

● Page is still loading. Let me wait for it to finish.

● Bash(playwright-cli wait --text "Sign in" --timeout 15000 2>/dev/null || playwright-cli wait --text "Home" --timeout 15000 2>/dev/null;
      playwright-cli snapshot --dep…)
  ⎿  Usage: playwright-cli <command> [args] [options]
     Usage: playwright-cli -s=<session> <command> [args] [options]
     … +245 lines (ctrl+o to expand)

  Thought for 2s (ctrl+o to expand)

● Login page detected. Let me find the guest sign-in option.

● Bash(playwright-cli snapshot --depth 8)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: RHDH 1.10 loadtest | Select a sign-in method | RHDH 1.10 loadtest
     … +24 lines (ctrl+o to expand)

● I can see the Guest login option. Let me sign in as guest.

● Bash(playwright-cli click "e29")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('button', { name: 'Enter' }).click();
     … +9 lines (ctrl+o to expand)
  ⎿  (timeout 15s)

● Logged in successfully. Let me create tasks to track progress and get the sidebar items.

● Bash(playwright-cli snapshot --depth 5)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: Welcome back! | RHDH 1.10 loadtest
     … +68 lines (ctrl+o to expand)

  Thought for 2s (ctrl+o to expand)

● Let me get the sidebar items in detail.

● Bash(playwright-cli snapshot "e96" --depth 8)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: Welcome back! | RHDH 1.10 loadtest
     … +143 lines (ctrl+o to expand)

  Thought for 6s (ctrl+o to expand)

● Found the sidebar items. There are quite a few: Home, My Group, Catalog, APIs, Learning Paths, Docs, Page 1-25, Bulk import, and
  Administration. Let me dismiss the onboarding wizard first, then work through them. I'll start with the core items.

● Bash(playwright-cli click "e627")
  ⎿  ### Error
     Error: Ref e627 not found in the current page snapshot. Try capturing new snapshot.

● Bash(playwright-cli snapshot --depth 3)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: Welcome back! | RHDH 1.10 loadtest
     … +21 lines (ctrl+o to expand)

● Bash(playwright-cli click "getByRole('button', { name: 'Hide' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('button', { name: 'Hide' }).click();
     … +7 lines (ctrl+o to expand)

● Good, wizard dismissed. Now let me start navigating each sidebar item. I'll work through them systematically — screenshot each page and check
  for alerts/warnings/errors in the UI.

  1. Home page (already on it):

● Bash(playwright-cli snapshot --depth 4)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: Welcome back! | RHDH 1.10 loadtest
     … +20 lines (ctrl+o to expand)

  Thought for 3s (ctrl+o to expand)

● I see an informational alert on the Home page. Let me take a screenshot and check the main content area.

● Bash(playwright-cli snapshot "e404" --depth 6)
  ⎿  ### Page
     - Page URL: <removed url>
     - Page Title: Welcome back! | RHDH 1.10 loadtest
     … +47 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename home.png)
  ⎿  ### Result
     - [Screenshot of viewport](./home.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● Home page looks clean — just the informational quick start alert. Now 2. My Group:

● Bash(playwright-cli click "getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'My Group' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'My Group' }).click();
     … +8 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "main" --depth 5)
  ⎿  ### Page
     - Page URL: <removed url>/catalog/development/Group/guests
     … +71 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename my-group.png)
  ⎿  ### Result
     - [Screenshot of viewport](./my-group.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● My Group page looks clean — no alerts/errors. Now 3. Catalog:

● Bash(playwright-cli click "getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'Catalog' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'Catalog' }).click();
     … +8 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "main" --depth 4)
  ⎿  ### Page
     - Page URL: <removed url>/catalog?filters%5Bkind%5D=component&limit=20
     … +27 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename catalog.png)
  ⎿  ### Result
     - [Screenshot of viewport](./catalog.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● Catalog looks clean. Now 4. APIs:

● Bash(playwright-cli click "getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'APIs' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'APIs' }).click();
     … +8 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "main" --depth 4)
  ⎿  ### Page
     - Page URL: <removed url>/api-docs?filters%5Bkind%5D=api&filters%5Buser%5D=all
     … +25 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename apis.png)
  ⎿  ### Result
     - [Screenshot of viewport](./apis.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● APIs page clean. Now 5. Learning Paths:

● Bash(playwright-cli click "getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'Learning Paths' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'Learning Paths' }).click();
     … +10 lines (ctrl+o to expand)
  ⎿  (timeout 15s)

● Console errors increased from 1 to 2. Let me check the page and console.

● Bash(playwright-cli snapshot "main" --depth 5)
  ⎿  ### Page
     - Page URL: <removed url>/learning-paths
     … +253 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename learning-paths.png)
  ⎿  ### Result
     - [Screenshot of viewport](./learning-paths.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● Learning Paths page looks clean — no UI alerts/warnings visible. Now 6. Docs:

● Bash(playwright-cli click "getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'Docs' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'Docs' }).click();
     … +8 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "main" --depth 4)
  ⎿  ### Page
     - Page URL: <removed url>/docs?filters%5Buser%5D=all
     … +21 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename docs.png)
  ⎿  ### Result
     - [Screenshot of viewport](./docs.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● Docs page looks clean. Now I need to go through Pages 1-25 and Bulk import. Given the volume, let me write a script to iterate through them
  efficiently using goto for each page URL.

● Bash(BASE_URL="<removed url>"…)
  ⎿  Waiting…

● Navigating sidebar items… (2m 28s · ↓ 4.2k tokens)
  ⎿  === Page 1 ===
     ### Ran Playwright code
 ─   ```js
     … +146 lines (ctrl+o to expand)
  ⎿  (timeout 2m)
     
  Thought for 4s (ctrl+o to expand)

● Pages 1-5 don't have a main element. Let me check what they actually show, then continue with the remaining pages.

● Bash(playwright-cli snapshot --depth 5)
  ⎿  ### Page
     - Page URL: <removed url>/page-5
     - Page Title: Welcome to page-5! | Plugin title | RHDH 1.10 loadtest
     … +42 lines (ctrl+o to expand)

  Thought for 4s (ctrl+o to expand)

● 20 console errors on Page 5! Let me check the content and console errors, then continue with the remaining pages.
     
● Bash(playwright-cli snapshot "e387" --depth 6)
  ⎿  ### Page
     - Page URL: <removed url>/page-5
     - Page Title: Welcome to page-5! | Plugin title | RHDH 1.10 loadtest
     … +121 lines (ctrl+o to expand)

● Bash(playwright-cli console error)
  ⎿  ### Result
     Total messages: 24 (Errors: 20, Warnings: 4)
     Returning 20 messages for level "error"
     … +79 lines (ctrl+o to expand)

  Thought for 9s (ctrl+o to expand)

● The console errors are all CSP violations for dicebear avatar images — not UI-visible alerts. All Page 1-5 pages are identical test plugin
  pages. Let me continue with Pages 6-25.
   
● Bash(BASE_URL="<removed url>"…)
  ⎿  Waiting…

● Nav- [Screenshot of viewport](./page-7.png)okens)
  ⎿  === Page 6 ===
     - Page Title: RHDH 1.10 loadtest
     - Console: 0 errors, 1 warnings
❯    … +56 lines (ctrl+o to expand)
  ⎿   timeout 3m)
* Navigating sidebar items… (3m 5s · ↓s5.3k tokens)gents                                                                     ● high · /effort
● Bash(BASE_URL="<removed url>"…)
     Waiting…
───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
● Nav- [Screenshot of viewport](./page-17.png)okens)
  ⎿  === Page 16 ===
     - Page Title: RHDH 1.10 loadtest
     - Console: 0 errors, 1 warnings
❯    … +56 lines (ctrl+o to expand)
  ⎿   timeout 3m)
· Navigating sidebar items… (3m 26s · ↓k5.7k tokens)ents                                                                     ● high · /effort
  Thought for 8s (ctrl+o to expand)

●─All 25 pages loaded without UI alerts/errors. Now let me check Bulk import and Administration.
     
● Bash(playwright-cli click "getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'Bulk import' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('navigation', { name: 'sidebar nav' }).getByRole('link', { name: 'Bulk import' }).click();
     … +10 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "main" --depth 5)
  ⎿  ### Page
     - Page URL: <removed url>/bulk-import
     … +24 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename bulk-import.png)
  ⎿  ### Result
     - [Screenshot of viewport](./bulk-import.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● Bulk import shows a configuration issue: "Missing configurations — No GitHub or GitLab integrations are configured." This is an informational
  message, not an alert/error banner.

  Now Administration:

● Bash(playwright-cli click "getByRole('navigation', { name: 'sidebar nav' }).getByRole('button', { name: 'Administration' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('navigation', { name: 'sidebar nav' }).getByRole('button', { name: 'Administration' }).click();
     … +8 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "e358" --depth 6)
  ⎿  ### Page
     - Page URL: <removed url>/bulk-import
     … +28 lines (ctrl+o to expand)

● Administration expands to 3 sub-items: RBAC, Adoption Insights, and Extensions. Let me check each.

● Bash(playwright-cli click "getByRole('link', { name: 'RBAC' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('link', { name: 'RBAC' }).click();
     … +7 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "main" --depth 5)
  ⎿  ### Error
     Error: "main" does not match any elements.

● Bash(playwright-cli screenshot --filename rbac.png)
  ⎿  ### Result
     - [Screenshot of viewport](./rbac.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot --depth 5)
  ⎿  ### Page
     - Page URL: <removed url>/rbac
     - Page Title: Bulk import | RHDH 1.10 loadtest
     … +40 lines (ctrl+o to expand)

● RBAC shows an error: "ERROR 404: Enable the RBAC backend plugin to use this feature." and "To enable RBAC, set permission.enabled to true in
  the app-config file."

  Now let me check Adoption Insights and Extensions.

● Bash(playwright-cli click "getByRole('link', { name: 'Adoption Insights' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('link', { name: 'Adoption Insights' }).click();
     … +8 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "main" --depth 5)
  ⎿  ### Page
     - Page URL: <removed url>/adoption-insights
     … +61 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename adoption-insights.png)
  ⎿  ### Result
     - [Screenshot of viewport](./adoption-insights.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● Adoption Insights page looks clean — no errors. Now Extensions:

● Bash(playwright-cli click "getByRole('link', { name: 'Extensions' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('link', { name: 'Extensions' }).click();
     … +8 lines (ctrl+o to expand)

● Bash(playwright-cli snapshot "main" --depth 5)
  ⎿  ### Page
     - Page URL: <removed url>/extensions
     … +125 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename extensions.png)
  ⎿  ### Result
     - [Screenshot of viewport](./extensions.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● Extensions page has an alert: "Info: Plugin installation is disabled."

  Now let me also check the Self-service link from the top navigation (it was in the header bar).
  
● Bash(playwright-cli click "getByRole('link', { name: 'Self-service' })")
  ⎿  ### Ran Playwright code
     ```js
     await page.getByRole('link', { name: 'Self-service' }).click();
     … +8 lines (ctrl+o to expand)
  ⎿  (timeout 15s)

● Bash(playwright-cli snapshot "main" --depth 4)
  ⎿  ### Page
     - Page URL: <removed url>/create?filters%5Bkind%5D=template&filters%5Buser%5D=all
     … +27 lines (ctrl+o to expand)

● Bash(playwright-cli screenshot --filename self-service.png)
  ⎿  ### Result
     - [Screenshot of viewport](./self-service.png)
     ### Ran Playwright code
     … +8 lines (ctrl+o to expand)

● Self-service page looks clean. Let me now list all the screenshots taken and provide the final summary.

  Listed 1 directory (ctrl+o to expand)

● Bash(playwright-cli close)
  ⎿  Browser 'default' closed

● Summary

  Navigated all 36 sidebar items on the RHDH 1.10 loadtest instance and took screenshots of each. Here are the findings:

  Pages with issues:

  ┌────────────┬───────────────────────────────────────────────────────────────────────────────────────────┬──────────────────────────────┐
  │    Page    │                                           Issue                                           │           Severity           │
  ├────────────┼───────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────┤
  │ Home       │ Info alert: "Need help? Visit the Quick Start Guide..."                                   │ Informational                │
  ├────────────┼───────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────┤
  │ Bulk       │ "Missing configurations — No GitHub or GitLab integrations are configured"                │ Configuration warning        │
  │ import     │                                                                                           │                              │
  ├────────────┼───────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────┤
  │ RBAC       │ ERROR 404: "Enable the RBAC backend plugin to use this feature. Set permission.enabled to │ Error                        │
  │            │  true in app-config."                                                                     │                              │
  ├────────────┼───────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────┤
  │ Extensions │ Info alert: "Plugin installation is disabled."                                            │ Informational                │
  ├────────────┼───────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────┤
  │ Pages 1-25 │ Console-only: CSP violations blocking api.dicebear.com avatar images (no UI-visible       │ Console error (not visible   │
  │            │ error)                                                                                    │ in UI)                       │
  └────────────┴───────────────────────────────────────────────────────────────────────────────────────────┴──────────────────────────────┘

  Pages without issues:

  My Group, Catalog, APIs, Learning Paths, Docs, Adoption Insights, Self-service — all loaded cleanly with no alerts, warnings, or errors.

  Screenshots saved:

  36 PNG files in the current directory (home.png, my-group.png, catalog.png, apis.png, learning-paths.png, docs.png, page-1.png through
  page-25.png, bulk-import.png, rbac.png, adoption-insights.png, extensions.png, self-service.png).

✻ Cooked for 5m 12s