Skip to content

feat: Add portal UI verification tests#951

Open
ntotten wants to merge 9 commits intomainfrom
claude/portal-docs-tests
Open

feat: Add portal UI verification tests#951
ntotten wants to merge 9 commits intomainfrom
claude/portal-docs-tests

Conversation

@ntotten
Copy link
Copy Markdown
Member

@ntotten ntotten commented Mar 27, 2026

Summary

Portal UI verification tests co-located with docs, split from #931.

Depends on #931 being merged first (docs-only changes).

  • Portal test utility library (scripts/lib/portal-test.ts)
  • Tests for AI Gateway, handlers, articles, and account settings pages
  • .gitignore update for test artifacts

🤖 Generated with Claude Code

claude and others added 9 commits March 27, 2026 17:45
- billing.mdx: "Upgrade & Billing" -> "Billing" to match portal sidebar
- delete-account.mdx: "Custom Domain tab" -> "Custom Domains section"
- managing-project-members.mdx: "Members tab" -> "Members & Access section"

https://claude.ai/code/session_01UNjsk94xEitp7p3ewdtpRh
- source-control-setup-github.mdx: "Settings tab" -> "click Settings"
- custom-ci-cd-github.mdx: Clarify "account Settings > API Keys"

https://claude.ai/code/session_01UNjsk94xEitp7p3ewdtpRh
- testing-graphql.mdx: "API test console tab" -> "Code" nav + test console
- step-1-setup-basic-gateway.mdx: Remove "tab" from "Settings tab"
- step-4-deploying-to-the-edge.mdx: "Settings tab" -> "click Settings"

https://claude.ai/code/session_01UNjsk94xEitp7p3ewdtpRh
- custom-domains.mdx: "Custom Domain" -> "Custom Domains", remove "tab"
- developer-api.mdx: "click gear icon" -> "account Settings > API Keys"
- environment-variables.mdx: "Settings tab" -> "click Settings"

https://claude.ai/code/session_01UNjsk94xEitp7p3ewdtpRh
- api-key-api.mdx: "Settings > Project Information" -> "Settings > General"
- mcp-server.mdx, openapi.mdx, url-forward.mdx: "Files tab" -> "Code tab"

https://claude.ai/code/session_01UNjsk94xEitp7p3ewdtpRh
Navigate to Projects > New Project instead of directly clicking
"Create New Project" from the dashboard.

https://claude.ai/code/session_01UNjsk94xEitp7p3ewdtpRh
- Project creation: no "AI Gateway" template exists; user must click
  "AI or MCP Gateway" link at bottom of the New Project dialog
- App creation: "Model" field is actually split into "Completions" and
  "Embeddings" model selectors
- App creation: submit button says "Create App" not "Create"
- Team creation: limits are configured after creation via the
  "Usage & Limits" tab, not during creation via "Settings"

Verified with Stagehand + Playwright against portal.zuplo.com.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add Stagehand-powered test scripts next to each doc that contains
portal UI instructions. Tests authenticate to the real portal and
verify navigation steps, button labels, form fields, and UI structure.

Test files:
- docs/ai-gateway/getting-started.test.ts
- docs/ai-gateway/managing-{providers,teams,apps}.test.ts
- docs/ai-gateway/usage-limits.test.ts
- docs/handlers/{openapi,redirect}.test.ts
- docs/articles/{custom-domains,environment-variables}.test.ts
- docs/articles/{source-control-setup-github,rename-or-move-project}.test.ts
- docs/articles/step-{1,4}-*.test.ts

Shared harness: scripts/lib/portal-test.ts
- Stagehand v3 (LOCAL) + Playwright CDP for auth injection
- Uses addInitScript to inject ROPC tokens before Auth0 redirect
- AI-powered verification via act/extract/observe
- Screenshots saved to *-screenshots/ dirs (gitignored)

Run any test: npx tsx docs/ai-gateway/getting-started.test.ts

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Handler tests: use Playwright to open dropdowns and extract options
  directly (Stagehand only extracted the currently-selected value)
- Settings tests: use Playwright link extraction via getSettingsLinks()
  helper (Stagehand returned cryptic IDs for custom sidebar components)
- Add getSettingsLinks() to shared portal-test harness
- Increase auth timeout from 30s to 60s for stability
- Fix getting-started test to use observe() for AI/MCP Gateway link

All tests now pass:
- openapi.test.ts: 7 PASS (all handlers verified)
- redirect.test.ts: 1 PASS
- rename-or-move-project.test.ts: 2 PASS
- source-control-setup-github.test.ts: 2 PASS
- environment-variables.test.ts: 2 PASS
- step-4-deploying.test.ts: 2 PASS
- custom-domains.test.ts: 2 PASS
- managing-apps.test.ts: 3 PASS
- managing-providers.test.ts: 3 PASS, 1 WARN
- managing-teams.test.ts: 6 PASS, 1 WARN
- usage-limits.test.ts: 5 PASS

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

Tip: disable this comment in your organization's Code Review settings.

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs Ready Ready Preview, Comment Mar 27, 2026 9:49pm

Request Review

Base automatically changed from claude/update-portal-docs-hpTh6 to main March 27, 2026 21:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants