playwright

KO | EN

gitlite — search

#typescript #llm #golang #android #java #windows #awesome #cli #vue #awesome-list #pytorch #mcp #openai #open-source

(★ 94,588)

Playwright는 웹 테스트 및 자동화를 위한 프레임워크입니다. 단일 API로 Chromium, Firefox, WebKit을 테스트할 수 있습니다.

playwright 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🎭 Playwright

[![npm version](https://img.shields.io/npm/v/playwright.svg)](https://www.npmjs.com/package/playwright) [![Chromium version](https://img.shields.io/badge/chromium-152.0.7977.8-blue.svg?logo=google-chrome)](https://www.chromium.org/Home) [![Firefox version](https://img.shields.io/badge/firefox-153.0-blue.svg?logo=firefoxbrowser)](https://www.mozilla.org/en-US/firefox/new/) [![WebKit version](https://img.shields.io/badge/webkit-26.5-blue.svg?logo=safari)](https://webkit.org/) [![Join Discord](https://img.shields.io/badge/join-discord-informational)](https://aka.ms/playwright/discord)

## [문서(Documentation)](https://playwright.dev) | [API 레퍼런스(API reference)](https://playwright.dev/docs/api/class-playwright)

Playwright는 웹 자동화 및 테스트를 위한 프레임워크입니다. 테스트, 스크립트, 그리고 AI 에이전트의 도구로서 단일 API를 통해 Chromium, Firefox, WebKit을 구동합니다.

## 시작하기 (Get Started)

작업 흐름에 맞는 경로를 선택하세요:

| | 용도 추천 | 설치 |
|---|---|---|
| **[Playwright Test](#playwright-test)** | 엔드투엔드(End-to-end) 테스트 | `npm init playwright@latest` |
| **[Playwright CLI](#playwright-cli)** | 코딩 에이전트 (Claude Code, Copilot) | `npm i -g @playwright/cli@latest` |
| **[Playwright MCP](#playwright-mcp)** | AI 에이전트 및 LLM 기반 자동화 | `npx @playwright/mcp@latest` |
| **[Playwright Library](#playwright-library)** | 브라우저 자동화 스크립트 | `npm i playwright` |
| **[VS Code Extension](#vs-code-extension)** | VS Code에서의 테스트 작성 및 디버깅 | [마켓플레이스에서 설치](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) |

---

## Playwright Test

Playwright Test는 엔드투엔드 테스트를 위해 빌드된 모든 기능을 갖춘 테스트 러너입니다. 완전한 브라우저 격리(isolation), 자동 대기(auto-waiting), 웹 우선 어설션(web-first assertions) 기능을 통해 Chromium, Firefox, WebKit 전반에서 테스트를 실행합니다.

### 설치

```bash
npm init playwright@latest
```

또는 수동으로 추가:

```bash
npm i -D @playwright/test
npx playwright install
```

### 테스트 작성

```TypeScript
import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
```

### 테스트 실행

```bash
npx playwright test
```

테스트는 설정된 모든 브라우저에서 병렬로 실행되며, 기본적으로 헤드리스(headless) 모드로 동작합니다. 각 테스트는 거의 추가 부하 없이 완벽하게 격리된 신선한 브라우저 컨텍스트를 제공받습니다.

### 주요 기능

**자동 대기 및 웹 우선 어설션.** 인위적인 타임아웃이 필요 없습니다. Playwright는 요소가 상호작용 가능한 상태가 될 때까지 기다리며, 조건이 충족될 때까지 어설션이 자동으로 재시도됩니다.

**로케이터(Locators).** 사용자가 페이지를 보는 방식을 반영하는 복원력 있는 로케이터로 요소를 찾으세요:

```TypeScript
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')
```

**테스트 격리.** 각 테스트는 고유한 브라우저 컨텍스트에서 실행됩니다 — 새로운 브라우저 프로필과 동일합니다. 인증 상태를 한 번 저장하고 테스트 전반에 재사용하세요:

```TypeScript
// 로그인 후 상태 저장
await page.context().storageState({ path: 'auth.json' });

// 다른 테스트에서 재사용
test.use({ storageState: 'auth.json' });
```

**추적(Tracing).** 실패 시 실행 추적, 스크린샷, 비디오를 캡처합니다. [Trace Viewer](https://playwright.dev/docs/trace-viewer)에서 모든 액션, DOM 스냅샷, 네트워크 요청, 콘솔 메시지를 검사하세요:

```TypeScript
// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',
  },
});
```

```bash
npx playwright show-trace trace.zip
```

**병렬 처리.** 설정된 모든 브라우저에서 기본적으로 테스트가 병렬로 실행됩니다.

[전체 테스트 문서](https://playwright.dev/docs/intro)

---

## Playwright CLI

[Playwright CLI](https://github.com/microsoft/playwright-cli)는 코딩 에이전트를 위해 설계된 브라우저 자동화용 명령줄 인터페이스입니다. MCP보다 토큰 효율적입니다. 명령어들이 대규모 도구 스키마나 접근성 트리를 모델 컨텍스트에 로드하는 것을 방지합니다.

### 설치

```bash
npm install -g @playwright/cli@latest
```

더 풍부한 에이전트 통합을 위해 선택적으로 스킬을 설치하세요:

```bash
playwright-cli install --skills
```

### 사용법

코딩 에이전트에 작업을 지정하세요:

```
Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Take screenshots for all successful and failing scenarios.
```

또는 직접 명령어를 실행하세요:

```bash
playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot
```

### 세션 모니터링

`playwright-cli show`를 사용하여 실행 중인 모든 브라우저 세션의 라이브 스크린캐스트 미리보기가 포함된 시각적 대시보드를 엽니다. 세션을 클릭하여 확대하고 원격 제어를 수행할 수 있습니다.

```bash
playwright-cli show
```

[전체 CLI 문서](https://playwright.dev/agent-cli/introduction) | [GitHub](https://github.com/microsoft/playwright-cli)

---

## Playwright MCP

[Playwright MCP 서버](https://github.com/microsoft/playwright-mcp)는 [Model Context Protocol](https://modelcontextprotocol.io)을 통해 AI 에이전트에게 완전한 브라우저 제어 권한을 부여합니다. 에이전트는 비전 모델이나 스크린샷 없이 구조화된 접근성 스냅샷을 사용하여 페이지와 상호작용합니다.

### 설정

MCP 클라이언트(VS Code, Cursor, Claude Desktop, Windsurf 등)에 추가하세요:

```json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}
```

**VS Code 원클릭 설치:**

[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20MCP%20Server&color=0098FF" alt="Install in VS Code" />](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D)

**Claude Code용:**

```bash
claude mcp add playwright npx @playwright/mcp@latest
```

### 작동 방식

AI 어시스턴트에게 웹 페이지와의 상호작용을 요청하세요:

```
Navigate to https://demo.playwright.dev/todomvc and add a few todo items.
```

에이전트는 페이지를 구조화된 접근성 트리로 인식합니다:

```
- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
  - checkbox "Toggle Todo" [ref=e10]
  - text: "Buy groceries"
```

에이전트는 `e5` 및 `e10`과 같은 요소 참조를 사용하여 시각적 모호함 없이 결정론적으로 클릭, 입력 및 상호작용을 수행합니다. 도구는 탐색, 양식 작성, 스크린샷, 네트워크 모킹, 스토리지 관리 등을 지원합니다.

[전체 MCP 문서](https://playwright.dev/mcp/introduction) | [GitHub](https://github.com/microsoft/playwright-mcp)

---

## Playwright Library

웹 스크래핑, PDF 생성, 스크린샷 캡처 및 테스트 러너 없이 프로그래밍 방식으로 브라우저 제어가 필요한 모든 워크플로우를 위해 브라우저 자동화 스크립트 라이브러리로서 `playwright`를 사용하세요.

### 설치

```bash
npm i playwright
```

### 예제

**스크린샷 촬영:**

```TypeScript
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
```

**PDF 생성:**

```TypeScript
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.pdf({ path: 'page.pdf', format: 'A4' });
await browser.close();
```

**모바일 기기 에뮬레이트:**

```TypeScript
import { chromium, devices } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext(devices['iPhone 15']);
const page = await context.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'mobile.png' });
await browser.close();
```

**네트워크 요청 가로채기:**

```TypeScript
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://playwright.dev/');
await browser.close();
```

[라이브러리 문서](https://playwright.dev/docs/library) | [API 레퍼런스](https://playwright.dev/docs/api/class-playwright)

---

## VS Code Extension

[Playwright VS Code 확장 프로그램(extension)](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright)은 편집기 내에서 직접 테스트 실행, 디버깅, 코드 생성을 제공합니다.

단 한 번의 클릭으로 편집기에서 **테스트를 실행하고 디버깅**하세요. 중단점(breakpoint)을 설정하고, 변수를 검사하며, 라이브 브라우저 뷰와 함께 테스트 실행 단계를 거쳐갈 수 있습니다.

**CodeGen으로 테스트 생성.** "Record new"를 클릭하여 브라우저를 열고 Playwright가 테스트 코드를 작성하는 동안 앱을 탐색하고 상호작용하세요.

**로케이터 선택.** 브라우저의 모든 요소 위에 마우스를 올려 가장 적절한 로케이터를 확인한 후, 클릭하여 클립보드에 복사하세요.

**Trace Viewer 통합.** 사이드바에서 "Show Trace Viewer"를 활성화하여 각 테스트 실행 후 전체 실행 추적(DOM 스냅샷, 네트워크 요청, 콘솔 로그, 각 단계별 스크린샷)을 확인하세요.

[확장 프로그램 설치](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) | [VS Code 가이드](https://playwright.dev/docs/getting-started-vscode)

---

## 크로스 브라우저 지원 (Cross-Browser Support)

모든 플랫폼에서 헤드리스 및 헤디드(headed) 실행을 지원합니다. <sup>1</sup> 기본적으로 [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing)을 사용합니다.

## 기타 언어 (Other Languages)

Playwright는 [Python](https://playwright.dev/python/docs/intro), [.NET](https://playwright.dev/dotnet/docs/intro), [Java](https://playwright.dev/java/docs/intro)에서도 사용할 수 있습니다.

## 리소스 (Resources)

* [문서 (Documentation)](https://playwright.dev)
* [API 레퍼런스 (API reference)](https://playwright.dev/docs/api/class-playwright)
* [MCP 서버 (MCP server)](https://github.com/microsoft/playwright-mcp)
* [코딩 에이전트용 CLI (CLI for coding agents)](https://github.com/microsoft/playwright-cli)
* [VS Code 확장 프로그램 (VS Code extension)](https://github.com/microsoft/playwright-vscode)
* [기여 가이드 (Contribution guide)](CONTRIBUTING.md)
* [변경 로그 (Changelog)](https://github.com/microsoft/playwright/releases)
* [Discord](https://aka.ms/playwright/discord)

playwright

playwright 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

playwright

playwright 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README