E2e Flow Playwright

Name: E2e Flow Playwright
Author: ahnseungc

ahnseungc/webviewkit

1 installs
1 repo stars
Updated May 25, 2026
ahnseungc/webviewkit

e2e-flow-playwright is a Claude Code skill that writes and updates Playwright end-to-end tests for multi-step user flows, fixtures, and playwright.config.

About

e2e-flow-playwright is a Claude Code skill that automates user flows with Playwright end-to-end tests. It adds or updates e2e spec files, fixtures, and playwright.config, checks for prerequisites like a config file and test:e2e script, and gives a recommended order for writing flow tests including login handling via storageState. A developer uses it for multi-step flows, routing and auth-guard checks, and critical-path regression coverage in the browser.

Automates multi-step user flows with Playwright end-to-end tests
Adds or updates e2e/*.spec.ts, fixtures, and playwright.config with a recommended work order
Divides roles between RTL for component tests and Playwright for full-path E2E

E2e Flow Playwright by the numbers

1 all-time installs (skills.sh)
Ranked #1,750 of 2,153 Testing & QA skills by installs in the Skillselion catalog
Data as of Jul 7, 2026 (Skillselion catalog sync)

At a glance

e2e-flow-playwright capabilities & compatibility

Capabilities: e2e testing · playwright authoring · test fixtures · regression testing
Works with: playwright
Use cases: testing

From the docs

What e2e-flow-playwright says it does

Automate user flows with Playwright E2E: add or update e2e/*.spec.ts, fixtures, playwright.config.

SKILL.md

**E2E**: 실제 브라우저·세션·전체 경로.

SKILL.md

npx skills add https://github.com/ahnseungc/webviewkit --skill e2e-flow-playwright

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/ahnseungc/webviewkit/e2e-flow-playwright.svg)](https://skillselion.com/skills/ahnseungc/webviewkit/e2e-flow-playwright)

Installs	1
repo stars	★ 1
Last updated	May 25, 2026
Repository	ahnseungc/webviewkit ↗

What it does

Write Playwright end-to-end tests for multi-step user flows, routing guards, and critical-path regressions.

Who is it for?

Developers adding browser E2E coverage for critical multi-step user journeys.

Skip if: Component-level unit tests, which the skill defers to RTL.

When should I use this skill?

Multi-step flows (login, navigation, form submit), routing and auth-guard checks, or when the user asks for E2E, flow tests, or Playwright.

What you get

Playwright spec files, fixtures, and config for user flows

By the numbers

6 sections including setup checks and role split
default baseURL http://127.0.0.1:3010

Files

SKILL.mdMarkdownGitHub ↗

E2E 플로우 테스트 (Playwright)

규칙 원본: .cursor/rules/e2e-flow-testing.mdc, .cursor/rules/testing.mdc

1. 언제 적용하나

다단계 플로우: 로그인 → 화면 이동 → 폼 제출 → 완료 화면 등 RTL만으로는 부족한 경로.
라우팅·가드: 미인증 리다이렉트, 딥링크, middleware 영향.
사용자가 E2E, 플로우 테스트, Playwright, 시나리오 를 요청할 때.

2. 사전 확인

1. 루트에 `playwright.config.ts` 가 있는지 본다. 없으면 e2e-flow-testing.mdc §1에 따라 최소 설정을 추가하고, pnpm add -D @playwright/test 가 필요하면 제안한다. 2. `e2e/` 폴더가 없으면 생성하고, 도메인 하위 폴더로 스펙을 나눈다. 3. package.json에 test:e2e 스크립트가 없으면 추가한다.

3. 작업 순서 (권장)

1. 플로우를 문장으로 적는다 (시작 URL, 클릭 순서, 최종 기대 URL·문구). 2. `e2e/<도메인>/<이름>.spec.ts` 에 test.describe / test 로 옮긴다. 3. 로그인이 필요하면 `storageState` 또는 전용 test.beforeEach 로그인 헬퍼를 e2e/fixtures/ 또는 e2e/helpers/에 둔다. 4. 로컬 검증은 `pnpm run test:e2e`(Playwright UI 모드)로 실행·확인한다. 헤드리스 일괄 실행은 CI 전용 pnpm run test:e2e:ci만 사용한다.

4. 코드 스타일

import { test, expect } from '@playwright/test';
기본 컨텍스트: test.use({ baseURL: process.env.PLAYWRIGHT_BASE_URL ?? 'http://127.0.0.1:3010' }); 는 config 쪽에 한 번만 두는 것을 권장.
한 test 안에서 하나의 사용자 목표만 검증하고, 단계가 길면 주석으로 구역을 나눈다.