studio-e2e-tests

A guide for writing and running Playwright end-to-end tests for Supabase Studio, a web interface for managing Supabase projects. It covers test commands, selectors, waiting, helpers, and local versus CI runs.

In plain words
What is it for?
Use it to create, run, debug, and stabilize browser tests for Studio features, including individual test files or filtered test cases.
Why use it?
It helps avoid unreliable tests caused by timing issues, incorrect selectors, or differences between local and automated environments.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/supabase/supabase/studio-e2e-tests
Any agent
npx skills add supabase/supabase --skill studio-e2e-tests
Clone the repo
git clone --depth 1 https://github.com/supabase/supabase

Made for: Claude Code, Codex.

Per session 74 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,765 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00074 $0.02765
Opus 5 $0.00037 $0.01383
Sonnet 5 $0.00015 $0.00553
Haiku 4.5 $0.00007 $0.00277

Measured 2d ago against content hash a309c1918832, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

studio-e2e-tests scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/studio-e2e-tests/SKILL.md · 436 lines

How it starts

The opening of the file, as written. The whole thing — 436 lines — stays where its author put it; the contents beside it link to each section on GitHub.

E2E Studio Tests

Run Playwright end-to-end tests for the Studio application.

Running Tests

Tests must be run from the e2e/studio directory:

cd e2e/studio && pnpm run e2e

Run specific file

cd e2e/studio && pnpm run e2e -- features/cron-jobs.spec.ts

Run with grep filter

cd e2e/studio && pnpm run e2e -- --grep "test name pattern"

UI mode for debugging

cd e2e/studio && pnpm run e2e -- --ui

Environment Setup

  • Tests auto-start Supabase local containers via web server config
  • Self-hosted mode (IS_PLATFORM=false) runs tests in parallel (3 workers)
  • No manual setup needed for self-hosted tests

Test File Structure

  • Tests are in e2e/studio/features/*.spec.ts
  • Use custom test utility: import { test } from '../utils/test.js'
  • Test fixtures provide page, ref, and other helpers

Common Patterns

Wait for elements with generous timeouts:

await expect(locator).toBeVisible({ timeout: 30000 })

Add messages to expects for debugging:

await expect(locator).toBeVisible({ timeout: 30000 }, 'Element should be visible after page load')

Use serial mode for tests sharing database state:

test.describe.configure({ mode: 'serial' })

Writing Robust Selectors

Selector priority (best to worst)

  1. getByRole with accessible name - Most robust, tests accessibility

    page.getByRole('button', { name: 'Save' })
    page.getByRole('button', { name: 'Configure API privileges' })
    
  2. getByTestId - Stable, explicit test hooks

    page.getByTestId('table-editor-side-panel')
    
  3. getByText with exact match - Good for unique text

    page.getByText('Data API access', { exact: true })
    
  4. locator with CSS - Use sparingly, more fragile

    page.locator('[data-state="open"]')
    

Patterns to avoid

  • XPath selectors - Fragile to DOM changes

Read the full file on GitHub · 436 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 436 lines · 74 tokens per session scan A a309c1918832

Subscribe to this mod's changes

studio-e2e-tests is a skill published in the GitHub repository supabase/supabase (108,698 stars, last pushed today), licensed Apache-2.0. It adds 74 tokens to every session and 2,765 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

supabase

Use when doing ANY task involving Supabase: Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues, supabase-js, @supabase/ssr, RLS, schema migrations, CLI, MCP server. Includes security checklist.

martineserios/thebrana · 58 tokens

supabase-skill

Core Supabase — DB, Auth, Realtime, Storage, RLS, Edge Functions. Triggers on ANY Supabase task.

martineserios/thebrana · 32 tokens

sql-database-support

Guides classifying, gap-analyzing, and scaffolding support for a new SQL database in pREST (wire-compatible variants like TimescaleDB or new dialects). Use when adding database support, creating integration/ /, DIFFERENCES.md, adapters/ , per-DB docker-compose or GitHub workflows, or planning where config/app wiring…

prest/prest · 79 tokens

prest-integration-tests

Guides writing and reviewing pREST Docker/network integration tests under integration/ so each request is human-readable via step comments or table-driven descriptions. Use when adding or editing integration//test.go, HTTP controller E2E coverage, make test-integration, test-integration-postgres…

prest/prest · 78 tokens

docs-svg-kit

Author SVG figures for Grida docs — diff-able, version-controlled vector diagrams embedded in doc pages instead of screenshots. Provides reusable primitives (selection chrome, size badges, anchor pins, resize cursors, click ripples), color/typography tokens, a starter template, and finished examples to crib from.…

gridaco/grida · 145 tokens

editor-perf

Guides performance investigation, benchmarking, and optimization of the Grida Canvas web editor (TypeScript reducer, Immer, React hooks). Use when profiling reducer dispatch cost, diagnosing slow interactions (drag, resize, color change), writing or running editor benchmarks, instrumenting with PerfObserver, or…

gridaco/grida · 69 tokens