E2E(End to End) 테스트 프레임 워크인, Playwright 로 놀아보자! (feat. playwright mcp + claude desktop)

Q. Playwright 는 무엇인가요?

A. Playwright 는 Microsoft 에서 만든 오픈소스 E2E (End-to-End) 테스트 프레임워크이다.

여러 브라우저를 한 API 로 자동화할 수 있으며, 여러가지 특징을 가지고 있다.

• Chromium, Firefox, WebKit 지원
• Headless / Headful 모드 실행
• 여러 탭 및 컨텍스트 제어
• 네트워크 제어, 스크린 샷, 비디오 녹화 등 지원

다른 도구들과의 비교 (vs Selenium, Cypress)

Playwright 는 최신 브라우저 자동화 프레임워크로, 자동 대기, 빠른 실행 속도, 다양한 브라우저 지원 등에서 다른 도구들에 비해서 개발자 친화적인 경험을 제공한다.

Playwright 는 actionability check(실제로 동작 가능한 상태인지 확인 검사)를 수행해서, 사용자 액션 등을 시뮬레이션 할 때, 자동 대기 기능을 기본적으로 제공한다.

Playwright 는 요소가 DOM 에 로드되고, 표시되어 활성화 된 상태까지 자동으로 기다린 다음에 액션을 수행하게 된다.

그렇기 때문에 테스트 코드가 더 간결해지고, 실수할 여지가 줄어들며 테스트 실행 속도가 향상된다.

반면에, Selenium 은 개발자가 WebDriverWait 등으로 명시적으로 조건을 설정해야 하므로,

코드가 복잡해지고, 속도가 느려지는 문제가 발생하게 된다.

아래 예시에서 Playwright 의 코드가 Selenium 보다 간결하다는 것을 알 수 있다.

// playwright
page.click("button#submit"); // 요소가 로드되고 활성화될 때까지 자동으로 기다린다.

// Selenium
// 최대 10초 동안 기다릴 수 있는 WebDriverWait 객체 생성
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
// id 가 submit 인 버튼이 클릭 가능할 때 까지 대기 (요소가 DOM 에 존재하고, 활성화되어 있는 상태)
WebElement submitBtn = wait.until(ExpectedConditions.elementToBeClickable(By.id("submit")));
submitBtn.click();

Playwright 를 직접 써보자!

Playwright 의 자동 대기, 다중 브라우저 지원 등은 직접 코드를 실행시켜보면 확실하게 느낄 수 있다.

다행스럽게도, Playwright 는 실제 브라우저에서 수행한 액션을 기반으로 테스트 코드를 자동 생성해주는 codegen 기능을 제공한다.

공식 문서에서는 다음과 같이 Maven 을 기준으로 안내하고 있다.

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen https://the-internet.herokuapp.com/login"

Playwright Java - Gradle 로 codegen 실행해보자!

이번에는 Gradle(Groovy DSL)을 사용하여 codegen 기능을 실행해보겠다.

1) 의존성 추가

먼저, build.gralde 에 Playwright Java 의존성을 추가한다.

dependencies {
	// ...
	implementation 'com.microsoft.playwright:playwright:1.54.0'
    // ...
}

2) 브라우저 설치 Task

playwright 는 실제 브라우저 바이너리가 있어야 동작하게 되는데, gradle 에서 installBrowsers Task 를 정의하면 CLI 로 브라우저를 설치할 수 있다.

// playwright - install Browsers
tasks.register("installBrowsers", JavaExec) {
	group = "playwright"
	description = "Installs Playwright browsers"
	classpath = sourceSets.main.runtimeClasspath
	mainClass.set("com.microsoft.playwright.CLI")
	args("install")
}

installBrowsers Task 를 실행시키면 아래와 같이 브라우저가 설치가 된다.

3) Codegen Task

브라우저 설치가 완료되면, 이제 실제 codegen Task 를 통해 브라우저 액션을 기록하고 코드로 변환할 수 있다.

// playwright - codegen
tasks.register("codegen", JavaExec) {
	group = "playwright"
	description = "Launches playwright codegen"
	classpath = sourceSets.main.runtimeClasspath
	mainClass.set("com.microsoft.playwright.CLI")
	args("codegen", "https://the-internet.herokuapp.com/login") // args 에는 실행시킬 URL 도 정의해준다.
}

codegen Task 를 실행시키면 Playwright Inspector 창이 뜨고, args 에 추가한 URL 이 Chromium 브라우저로 실행이 된다.

상단 메뉴에서 Record 를 클릭하게 되면 Chromium 브라우저의 액션이 코드상으로 기록된다.

Playwright Inspector 에서 Target 을 클릭하게 되면, Node.js, Python, .NET C#, Java 등으로 코드가 기록되고,

여기서는 Java - Junit 기반으로 기록을 해보았다.

테스트 자동화 연습용으로 널리 쓰이는 샘플 웹페이지인 https://the-internet.herokuapp.com/login 에서 간단하게 로그인하는 것을 기록하면,

사용자의 액션이 코드로 기록되는 것을 볼 수 있고, 다시 Playwright Inspector 상단 메뉴에서 Record 를 누르면 기록이 종료가 되고 복사가 가능한 상태가 된다.

Chromium 브라우저 상에도 상단 UI 가 생성되는데, 메뉴를 적절히 선택해서 사용할 수 있다.

테스트 코드 기반으로 작성할 경우 검증하는 부분을 추가하면 된다.

상단 UI 에 대한 설명은 공식 페이지에서 확인 가능하다.

최종 생성 된 코드는 아래와 같은데,

@UserPlaywright annotation 이 있으면 default 로 headless 상태로 실행되며, Playwright 인스턴스를 자동 생성해주고 (Playwright, Browser, BrowserContext, Page 등) 테스트 종료 후 browser.close() 등을 자동으로 수행해주는 annotation 이다.

import com.microsoft.playwright.Page;
import com.microsoft.playwright.junit.UsePlaywright;
import com.microsoft.playwright.options.AriaRole;
import org.junit.jupiter.api.Test;

import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

@UsePlaywright
class TestExample {

	@Test
	void test(Page page) {
		page.navigate("https://the-internet.herokuapp.com/login");
		page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("Username")).click();
		page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("Username")).fill("tomsmith");
		page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("Username")).press("Tab");
		page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("Password")).fill("SuperSecretPassword!");
		page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName(" Login")).click();
		assertThat(page.getByText("You logged into a secure area")).isVisible();
	}
}

headless 가 아닌 모드로 실행을 시키려면, -Dplaywright.launch.headless=false 이런식으로 옵션을 주고 실행시키거나,

Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false)); 와 함께,

@UsePlaywright 어노테이션이 하는 것을 직접 구현 하면 된다.

Playwright 는 AutoCloseable 을 구현하고 있어서 try-with-resources 구문으로 처리가 된다.

class PlaywrightTests {

	@Test
	void test() {
		try (Playwright playwright = Playwright.create()) {
			Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
			BrowserContext context = browser.newContext();
			Page page = context.newPage();

			page.navigate("https://the-internet.herokuapp.com/login");

			page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("Username")).fill("tomsmith");
			page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("Password"))
				.fill("SuperSecretPassword!");
			page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName(" Login")).click();

			assertThat(page.getByText("You logged into a secure area")).isVisible();
		}
	}
}

Claude Desktop + MCP 연동해보기

Playwright 는 MCP 도 지원하는데, 간단히 Claude Desktop 을 이용해서 MCP 연동해서 사용해보자.

설정은 생각보다 간단하다.

1) Claude Desktop 를 실행시키고, [좌측 메뉴] - [파일] - [설정] 메뉴에서

2) [개발자] - [구성 편집] 을 누르게 되면,

3) 아래와 같이, claude_desktop_config.json 을 열어주고,

4) playwright mcp server 를 추가해주고, Claude Desktop 앱을 다시 실행 시켜 주자.

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

5) Prompt 를 작성해주면 playwright mcp 를 실행시켜서 Prompt 내용대로 동작한다.

📚 Reference

• Playwright 공식 홈페이지
• Playwright for Java 공식 문서
• Playwright Test Generator (codegen)
• Playwright Actionability 설명
• Playwright MCP 프로젝트
• The Internet - Test Practice Site