Puppeteer와 Playwright 비교 및 VSCode에서의 브라우저 컨트롤 방법

Puppeteer와 Playwright는 현재 웹 자동화 분야에서 가장 인기 있는 Node.js 라이브러리입니다[1]. Google에서 개발한 Puppeteer가 2017년에 출시된 후, Microsoft는 2020년에 Playwright를 출시했습니다[1][2]. 흥미롭게도 Playwright는 원래 Puppeteer 팀의 개발자들이 Microsoft로 이직한 후 개발된 도구입니다[1][3].

주요 차이점 비교

브라우저 지원

특징	Puppeteer	Playwright
지원 브라우저	Chrome/Chromium (Firefox 실험적 지원)	Chromium, Firefox, WebKit
크로스 브라우저 테스팅	제한적	완전 지원

Playwright는 크로스 브라우저 지원에서 명확한 우위를 보입니다[1][4]. Puppeteer가 주로 Chrome/Chromium에 집중하는 반면, Playwright는 Firefox, WebKit(Safari 엔진)까지 동등한 수준으로 지원합니다[5].

언어 지원

• Puppeteer: JavaScript/TypeScript만 지원[1][3]
• Playwright: JavaScript/TypeScript, Python, Java, C#, .NET 지원[1][4]

Playwright의 다중 언어 지원은 다양한 개발 팀에서 활용할 수 있는 큰 장점입니다[1][6].

성능

성능 면에서는 Puppeteer가 약간 우위를 보입니다. 동일한 테스트 시나리오에서 Puppeteer가 평균 6.7초, Playwright가 평균 7.3초로 측정되었습니다[3].

주요 기능 비교

특징	Puppeteer	Playwright
자동 대기 기능	기본적	강력함[1]
모바일 앱 테스팅	제한적	네이티브 지원[4]
테스트 러너	외부 도구 필요	내장된 Playwright Test[1]
네트워크 인터셉션	기본적	고급 기능[5]
커뮤니티 지원	광범위	성장 중[1]

VSCode에서 Puppeteer 사용하기

설치 및 설정

1. 프로젝트 초기화

mkdir puppeteer-project
cd puppeteer-project
npm init -y
npm install puppeteer

2. VSCode에서 기본 브라우저 컨트롤

// index.js
const puppeteer = require('puppeteer');

(async () => {
  // 브라우저 실행 (headless: false로 브라우저 창 표시)
  const browser = await puppeteer.launch({ 
    headless: false,
    devtools: true // 개발자 도구 자동 열기
  });
  
  const page = await browser.newPage();
  
  // 페이지 이동
  await page.goto('https://example.com');
  
  // 스크린샷 촬영
  await page.screenshot({ path: 'example.png' });
  
  // 브라우저 종료
  await browser.close();
})();

3. VSCode 확장 프로그램 활용

Puppeteer Snippets 확장 프로그램을 설치하면 코드 자동완성과 스니펫을 활용할 수 있습니다[7].

디버깅 방법

1. Headless 모드 비활성화

const browser = await puppeteer.launch({
  headless: false,  // 브라우저 창 표시
  slowMo: 250,      // 동작 속도 늦추기
  devtools: true    // 개발자 도구 열기
});

2. VSCode 디버거 통합

.vscode/launch.json 파일을 생성하여 Node.js 디버거를 설정할 수 있습니다[8]:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Puppeteer",
      "program": "${workspaceFolder}/index.js",
      "console": "integratedTerminal"
    }
  ]
}

3. 콘솔 로그 캡처

page.on('console', msg => console.log('PAGE LOG:', msg.text()));

VSCode에서 Playwright 사용하기

설치 및 설정

1. VSCode 확장 프로그램 설치

Playwright Test for VSCode 확장 프로그램을 설치합니다[9][10].

2. 명령 팔레트를 통한 설치

Ctrl+Shift+P를 눌러 명령 팔레트를 열고 **"Install Playwright"**를 입력합니다[10][11].

3. 자동 설정

Playwright는 다음 항목들을 자동으로 설정합니다[6]:

• 테스트 디렉토리 생성
• 샘플 테스트 파일 생성
• Playwright 설정 파일 생성
• 선택한 브라우저 설치

테스트 기록 및 실행

1. 테스트 자동 기록

VSCode의 테스트 사이드바에서 "Record new" 버튼을 클릭하여 사용자 액션을 자동으로 기록할 수 있습니다[9][12]:

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

test('example test', async ({ page }) => {
  await page.goto('https://example.com');
  await page.click('button[type="submit"]');
  await expect(page.locator('h1')).toContainText('Success');
});

2. 브라우저 선택 실행

VSCode 확장 프로그램을 통해 특정 브라우저에서 테스트를 실행할 수 있습니다[13][14]:

• Chrome/Chromium
• Firefox
• WebKit (Safari)

디버깅 기능

1. 실시간 디버깅

"Show browser" 옵션을 체크하면 브라우저 창이 열려 테스트 실행을 시각적으로 확인할 수 있습니다[15][16].

2. 로케이터 선택 도구

"Pick locator" 버튼을 사용하여 웹 요소의 선택자를 쉽게 생성할 수 있습니다[12][17].

3. 단위별 디버깅

VSCode에서 중단점을 설정하고 단계별로 테스트를 실행할 수 있습니다[15][18].

실제 사용 예제

Puppeteer 예제: 웹 스크래핑

const puppeteer = require('puppeteer');

async function scrapeData() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // 데이터 추출
  const data = await page.evaluate(() => {
    return document.querySelector('h1').textContent;
  });
  
  console.log('추출된 데이터:', data);
  await browser.close();
}

scrapeData();

Playwright 예제: E2E 테스트

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

test('로그인 테스트', async ({ page }) => {
  await page.goto('https://example.com/login');
  
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'testpass');
  await page.click('#login-button');
  
  await expect(page.locator('.welcome-message')).toBeVisible();
});

선택 가이드

Puppeteer를 선택해야 하는 경우

• Chrome/Chromium 중심의 프로젝트
• JavaScript/TypeScript만 사용하는 팀
• 단순한 웹 스크래핑이나 PDF 생성 작업
• 빠른 실행 속도가 중요한 경우[3]

Playwright를 선택해야 하는 경우

• 크로스 브라우저 테스팅이 필요한 경우
• 다중 언어 지원이 필요한 팀
• 복잡한 E2E 테스트를 구축하는 경우
• 모바일 앱 테스팅까지 고려하는 경우[1][4]

결론

Puppeteer는 성숙하고 안정적인 도구로 Chrome 기반 자동화에 특화되어 있으며, Playwright는 현대적이고 포괄적인 솔루션으로 다양한 브라우저와 언어를 지원합니다[1][2]. VSCode와의 통합 측면에서는 Playwright가 더 우수한 개발자 경험을 제공하며, 특히 테스트 자동화 분야에서 뛰어난 기능을 보여줍니다[6][9].

프로젝트의 요구사항과 팀의 기술 스택을 고려하여 적절한 도구를 선택하는 것이 중요하며, 두 도구 모두 VSCode에서 효과적으로 활용할 수 있는 강력한 브라우저 자동화 솔루션입니다.

참고자료

[펼치기]

[1] https://oxylabs.io/blog/playwright-vs-puppeteer
[2] https://blog.apify.com/playwright-vs-puppeteer/
[3] https://www.zenrows.com/blog/playwright-vs-puppeteer
[4] https://bugbug.io/blog/testing-frameworks/playwright-vs-puppeteer/
[5] https://scrapingant.com/blog/playwright-vs-puppeteer
[6] https://betterstack.com/community/comparisons/playwright-vs-puppeteer/
[7] https://marketplace.visualstudio.com/items?itemName=nitayneeman.puppeteer-snippets
[8] https://www.browserstack.com/guide/how-to-start-with-puppeteer-debugging
[9] https://www.devturtleblog.com/playwright-vscode-integration/
[10] https://ray.run/videos/42-getting-started-with-playwright-and-vs-code
[11] https://www.youtube.com/watch?v=NPbS5cFBnDA
[12] https://www.lambdatest.com/blog/playwright-recorder/
[13] https://www.youtube.com/watch?v=Xz6lhEzgI5I
[14] https://stackoverflow.com/questions/74104846/where-can-i-configure-the-browser-behavior-of-playwright-in-vscode
[15] https://hackernoon.com/using-playwright-test-for-vscode-to-debug-your-code
[16] https://www.browserstack.com/guide/playwright-debugging
[17] https://playwright.dev/docs/codegen
[18] https://www.youtube.com/watch?v=tJF7UhA59Gc
[19] https://www.geeksforgeeks.org/blogs/top-web-automation-tools/
[20] https://moldstud.com/articles/p-top-10-essential-tools-for-effective-cross-browser-testing-in-2024
[21] https://careers.logixtek.com/top-5-most-popular-automation-test-tools-in-2024/
[22] https://testsigma.com/blog/playwright-vs-puppeteer/
[23] https://proxy-seller.com/ko/blog/playwright-vs-puppeteer-which-one-to-choose/
[24] https://testvox.com/top_5_automation_testing_tools_/
[25] https://autify.com/blog/playwright-vs-puppeteer
[26] https://www.browserstack.com/guide/free-cross-browser-testing-tools
[27] https://www.browserstack.com/guide/playwright-vs-puppeteer
[28] https://blog.skyvern.com/top-8-browser-automation-tools-in-2024/
[29] https://testgrid.io/blog/playwright-vs-puppeteer/
[30] https://www.browserstack.com/guide/automated-test-tools-comparison
[31] https://qa-subi.tistory.com/9
[32] https://www.leapwork.com/blog/web-automation
[33] https://www.browserstack.com/guide/puppeteer-framework-tutorial
[34] https://gist.github.com/jsoverson/6d3bbb8d8d7db37e1beacaccb295d801
[35] https://www.youtube.com/watch?v=CngYXf9aeg8
[36] https://blog.ramosly.com/puppeteer-getting-into-coding-with-browser-automation-6d4ad1364a75
[37] https://stackoverflow.com/questions/55998272/is-it-possible-to-automate-visual-studio-code-like-chrome-with-puppeteer
[38] https://www.youtube.com/watch?v=EIi35tjKWvc
[39] https://www.youtube.com/watch?v=pq20Gd4LXeI
[40] https://logicallaw.tistory.com/entry/MacOS-M1-puppeteer-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0Chrome-for-Testing-%EC%84%A4%EC%B9%98-VScode
[41] https://kim-oriental.tistory.com/27
[42] https://autify.com/blog/playwright-javascript
[43] https://www.tutorialspoint.com/puppeteer/puppeteer_vs_code_configuration.htm
[44] https://kim-oriental.tistory.com/17
[45] https://playwright.dev/docs/getting-started-vscode
[46] https://velog.io/@jinuku/Puppeteer%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9B%B9-%ED%81%AC%EB%A1%A4%EB%A7%81-%ED%95%B4%EB%B3%B4%EA%B8%B0-%EC%98%88%EC%A0%9C-1
[47] https://jiurinie.tistory.com/151
[48] https://www.browserstack.com/guide/playwright-tutorial
[49] https://visualpathblogs.com/playwright-automation/executing-javascript-in-vs-code-in-playwright-automation-training/
[50] https://playwright.dev/docs/debug
[51] https://www.youtube.com/watch?v=5XIZPqKkdBA
[52] https://dzone.com/articles/playwright-javascript-tutorial-a-complete-guide
[53] https://playwright.dev/docs/running-tests
[54] https://www.youtube.com/watch?v=-EccE9TXoVY
[55] https://playwright.dev/docs/browsers
[56] https://dev.to/playwright/debugging-tests-21ck
[57] https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
[58] https://testgrid.io/blog/playwright-debug/
[59] https://www.zenrows.com/blog/headless-browser-nodejs
[60] https://usescraper.com/blog/puppeteer-vs-playwright-which-is-best-for-browser-automation
[61] https://pptr.dev/guides/debugging
[62] https://www.browserstack.com/guide/puppeteer-headless
[63] https://www.devzery.com/post/puppeteer-show-guide-to-web-automation-and-debugging
[64] https://browsercloud.io/blog/puppeteer-vs-playwright-comparison-2024
[65] https://www.webshare.io/academy-article/puppeteer-debug
[66] https://code.visualstudio.com/docs/nodejs/browser-debugging
[67] https://thunderbit.com/blog/playwright-vs-puppeteer
[68] https://www.browserless.io/blog/new-live-debugger
[69] https://github.com/puppeteer/puppeteer
[70] https://testomat.io/blog/puppeteer-vs-playwright-choosing-the-best-library-for-browser-automation/
[71] https://stackoverflow.com/questions/46399299/debug-puppeteer
[72] https://latenode.com/blog/configuring-headless-mode-in-puppeteer-balancing-speed-and-functionality