Community생산성 & 협업github.com

microsoft/playwright-dev

Playwright 개발 방법을 설명합니다 - API, MCP 도구, CLI 명령어 및 벤더 종속성 추가하기.

playwright-dev란 무엇인가요?

이 스킬은 Playwright 오픈 소스 프로젝트의 개발 기여자를 위한 상세 가이드입니다. Playwright 코어에 새로운 API를 추가하거나, MCP(Model Context Protocol) 도구를 통합하거나, CLI 명령어를 확장하고, 외부 벤더 종속성을 처리하는 방법을 단계별로 설명합니다. 주로 Node.js와 TypeScript 환경에서 개발되며, GitHub Actions CI/CD 파이프라인을 통해 테스트와 릴리스가 관리됩니다. 이 스킬을 통해 개발자는 기존 코드베이스의 구조를 이해하고, 변경 사항을 안전하게 적용하며, 일관된 코딩 컨벤션을 유지할 수 있습니다. 마크다운 문서에는 실제 예제, 설정 파일, API 설계 원칙 및 디버깅 팁이 포함되어 있어 Playwright 개발 워크플로우에 즉시 활용할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/microsoft/playwright/tree/main/skills/playwright-dev

Installed? Explore more 생산성 & 협업 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

playwright-dev은(는) 무엇을 하나요?

Playwright 개발 방법을 설명합니다 - API, MCP 도구, CLI 명령어 및 벤더 종속성 추가하기.

개요

이 문서는 Playwright 프로젝트에 기여하는 개발자를 위한 안내서입니다. 다음 주제를 다룹니다:

  • 새로운 API 추가
  • MCP 도구 통합
  • CLI 명령어 확장
  • 벤더 종속성 관리

시작하기

개발 환경을 설정하려면 다음 단계를 따르세요:

  1. 저장소를 클론합니다:
git clone https://github.com/microsoft/playwright.git
cd playwright
  1. 종속성을 설치합니다:
npm install
npm run build
  1. 테스트를 실행합니다:
npm run test

API 추가

새로운 API를 추가하려면 src/ 디렉토리에서 적절한 모듈을 찾으세요. 예를 들어, Page 클래스에 새 메서드를 추가하려면 src/page/Page.ts 파일을 수정합니다.

예제: page.screenshot()

// src/page/Page.ts
async screenshot(options?: ScreenshotOptions): Promise<Buffer> {
  // 구현
}

MCP 도구

MCP(Model Context Protocol) 도구를 통합하려면 tools/ 디렉토리를 참조하세요. 각 도구는 자체 설정 파일과 핸들러를 가집니다.

CLI 명령어

CLI 명령어는 src/cli/ 디렉토리에서 관리됩니다. 새 명령어를 추가하려면 commander를 사용합니다:

// 예제
program
  .command('my-command')
  .description('내 명령어 설명')
  .action(async () => {
    // 구현
  });

벤더 종속성

외부 벤더 종속성은 vendor/ 디렉토리에 배치합니다. 각 벤더 패키지에 대한 라이선스 파일을 포함해야 합니다.

기여

기여하기 전에 CONTRIBUTING.md를 읽어주세요. 모든 풀 리퀘스트는 자동 CI 체크를 통과해야 합니다.

참고 자료

관련 스킬