Puppeteer에서 Playwright로: 이 마이그레이션은 가치가 있을까요?

안녕하세요 여러분! Puppeteer에서 Playwright로 전환할지 고민하고 계신가요? 이 전환은 얼마나 쉽거나 어려울까요? 그리고 정말 그만한 가치가 있을까요? 코딩 수준에서 예상치 못한 변화는 무엇이 있을까요? Playwright는 어떤 새롭고 흥미로운 기능을 숨기고 있을까요? 걱정하지 마세요. 이 기사에서는 이러한 흥미로운 점에 대해 이야기할 것입니다.

Puppeteer와 Playwright의 현재 상황에 대한 큰 폭로

언뜻 보기에 이 두 도구는 많은 유사점을 가지고 있습니다. 그러나 지난 2년 동안 이들의 개발 속도는 서로 다른 마력을 가진 두 대의 스포츠카처럼 점차 멀어졌습니다. Playwright는 매우 활발하게 발전하여 Puppeteer를 능가했습니다. 이러한 강력한 추진력으로 인해 많은 사람들이 Playwright로 전환하게 되었습니다. 이 기사에서는 마이그레이션 방법과 이 변경 사항이 우리에게 가져다 줄 수 있는 멋진 새로운 기능에 대해 자세히 설명합니다. 기사는 약간 길지만 내용은 매우 간단하고 배우기 쉽습니다!

왜 마이그레이션해야 할까요?

이전에 Cypress, Selenium, Playwright 및 Puppeteer에 대한 비교 테스트를 수행했습니다(자세한 내용은 기사 링크 클릭). 간단히 요약하자면 다음과 같은 이유가 있습니다.

• Playwright는 매우 자주 업데이트되며 Puppeteer보다 훨씬 더 많은 새로운 기능이 있습니다!
• 실제 엔드 투 엔드(E2E) 테스트에서 Playwright는 뛰어난 성능을 보이며 매우 빠른 속도로 테스트 케이스를 실행합니다(자세한 내용은 기사 링크 참조)!
• Playwright는 신뢰할 수 있는 파트너처럼 더욱 안정적입니다.
• GitHub, Twitter 및 Slack과 같은 커뮤니티에서 Playwright는 상당히 인기가 있는 반면 Puppeteer 커뮤니티는 약간 황량해 보입니다.

변경 목록 비교

먼저 비교 테이블을 살펴보겠습니다. 몇 분 동안 훑어보고 나중에 자세히 살펴보겠습니다.

변경 세부 사항에 대한 큰 폭로

패키지 가져오기

Puppeteer에서 스크립트의 시작 부분은 다음과 같습니다.

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    //...

Playwright에서는 다음과 같습니다.

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    //...

Playwright는 매우 사려 깊으며 크로스 브라우저 지원이 함께 제공됩니다. const { webkit } = require('playwright');와 같이 실행할 브라우저를 자유롭게 선택할 수 있습니다. Puppeteer에서는 예를 들어 시작 인터페이스의 구성을 통해 이를 달성해야 합니다.

const browser = await puppeteer.launch({ product: 'firefox' })

브라우저 컨텍스트

Puppeteer에서 브라우저 컨텍스트는 다음과 같이 사용됩니다.

const browser = await puppeteer.launch();
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

Playwright에서 컨텍스트는 훨씬 더 중요하며 사용법이 약간 다릅니다.

const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

Puppeteer와 마찬가지로 기본 사용 또는 단일 페이지 흐름의 경우 기본 컨텍스트를 사용할 수 있습니다.

const browser = await chromium.launch();
const page = await browser.newPage();

대기

Playwright에는 강력한 자동 대기 메커니즘이 있으므로 항상 수동으로 대기할 필요가 없을 수 있습니다. 그러나 대기는 UI 자동화에서 가장 골치 아픈 부분 중 하나이며 스크립트가 하나 이상의 조건을 충족할 때까지 순종적으로 대기하도록 하는 방법을 알아야 합니다. 이와 관련하여 Playwright는 다음과 같은 변경 사항을 가져왔습니다.

• page.waitForNavigation 및 page.waitForSelector는 여전히 있지만 자동 대기 메커니즘을 사용하면 많은 경우에 항상 필요한 것은 아닙니다.
• page.waitForEvent가 추가되었습니다.
• Puppeteer의 page.waitForXPath는 page.waitForSelector에 통합되었으며 XPath 표현식을 자동으로 인식할 수 있습니다.
• page.waitForFileChooser가 제거되었습니다. 새로운 사용법은 파일 업로드, E2E 계정 설정을 참조하세요.
• page.waitForNetworkIdle은 page.waitForLoadState에 통합되었습니다.
• page.waitForUrl이 추가되어 페이지의 메인 프레임에서 URL이 로드될 때까지 기다릴 수 있습니다.
• page.waitFor(timeout)은 page.waitForTimeout(timeout)이 됩니다. page.waitForTimeout은 공식 제품에서 사용해서는 안 됩니다. 이 하드 대기는 테스트에만 적합합니다.

뷰포트 설정

Puppeteer의 page.setViewport는 Playwright에서 page.setViewportSize가 됩니다.

입력

Puppeteer의 page.type은 여전히 사용할 수 있습니다. 세분화된 키보드 이벤트를 제어하려면 여전히 좋은 도우미입니다. 게다가 Playwright는 양식을 채우고 지우는 데 매우 편리한 page.fill을 추가했습니다.

쿠키

Puppeteer를 사용할 때 쿠키는 페이지 수준에서 처리됩니다. Playwright에서는 BrowserContext 수준에서 조작할 수 있습니다. 이전:

page.cookies([...urls])
page.deleteCookie(...cookies)
page.setCookie(...cookies)

현재:

browserContext.cookies([urls])
browserContext.clearCookies()
browserContext.addCookies(cookies)

이러한 메서드 간에 약간의 차이점이 있으므로 쿠키를 전달할 때 주의하세요.

XPath 선택기

Playwright는 // 또는 ..로 시작하는 XPath 선택기를 자동으로 인식할 수 있지만 Puppeteer에는 별도의 인터페이스가 있습니다.

장치 에뮬레이션

Playwright의 장치 에뮬레이션은 다음과 같이 브라우저 컨텍스트 수준에서 수행할 수 있습니다.

const pixel2 = devices['Pixel 2'];
const context = await browser.newContext({
...pixel2,
});

또한 권한, 위치 및 기타 장치 매개변수를 제어할 수 있습니다. 멋지죠?

파일 다운로드

헤드리스 모드에서 파일을 다운로드하는 것은 Puppeteer에서는 매우 번거롭지만 Playwright에서는 훨씬 간단합니다.

const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.click('#orders > ul > li:nth-child(1) > a')
])

const path = await download.path();

이것은 완전한 예입니다.

파일 업로드

Puppeteer의 elementHandle.uploadFile은 elementHandle.setInputFiles가 됩니다. 자세한 내용은 파일 업로드 예제를 참조하세요.

요청 가로채기

Puppeteer에서 요청 가로채기는 다음과 같이 수행됩니다.

await page.setRequestInterception(true)

page.on('request', (request) => {
    if (request.resourceType() === 'image') request.abort()
    else request.continue()
})

Playwright에서는 page.route를 통해 지정된 패턴의 URL을 가로챌 수 있습니다.

await page.route('**/*', (route) => {
  return route.request().resourceType() === 'image'
? route.abort()
    : route.continue()
})

전체 예제는 여기를 참조하세요.

주목할 가치가 있는 새로운 기능

Puppeteer에서 Playwright로 전환할 때 Playwright의 새로운 기능을 잘 이해해야 합니다. 이는 테스트 또는 모니터링 설정에 새로운 놀라움을 가져다 줄 수 있습니다!

새로운 선택기 엔진

Playwright는 UI 요소를 참조하는 매우 유연한 방법을 제공합니다. css 및 XPath 외에도 다음과 같은 기능이 있습니다.

• :nth - match(:text("Buy"), 3)과 같은 Playwright 전용 선택기.
• text=Add to Car와 같은 텍스트 선택기.
• css=preview >> text=In stock과 같은 체인 선택기. 사용자 지정 선택기 엔진을 직접 만들 수도 있습니다. 선택기에 대한 자세한 내용과 사용법은 선택기 작업을 참조하세요.

상태 저장 및 재사용

Playwright는 주어진 세션의 인증 상태(쿠키 및 localStorage)를 쉽게 저장할 수 있으며, 스크립트가 다음에 실행될 때 직접 사용할 수 있으므로 인증 시간을 절약할 수 있습니다. 정말 사려 깊죠?

Locator API

Playwright의 Locator API는 주어진 요소를 검색하는 논리를 캡슐화하여 스크립트에서 다양한 시점에 최신 DOM 요소를 쉽게 얻을 수 있도록 합니다.

Inspector

Playwright의 Inspector는 스크립트를 디버깅할 때 매우 유용한 GUI 도구입니다. 스크립트에서 명령을 단계별로 실행하여 실패 원인을 쉽게 찾을 수 있습니다.

Test

Playwright에는 병렬화, 후크 등과 같은 E2E 테스트에서 매우 유용한 Test 메커니즘이 있습니다.

Trace Viewer

Playwright의 Trace Viewer를 사용하면 Playwright 테스트 또는 BrowserContext 추적 API에서 기록한 추적을 탐색할 수 있습니다. 추적을 통해 스크립트 실행을 명확하게 볼 수 있습니다.

Test Generator

Playwright의 Test Generator를 사용하여 브라우저에서 상호 작용을 기록할 수 있으며 출력은 확인하고 실행할 수 있는 완전한 스크립트입니다.

마이그레이션 프로세스 중 주의 사항

Puppeteer에서 Playwright로 마이그레이션하는 과정에서 위에서 언급한 다양한 변경 사항과 새로운 기능을 이해하는 것 외에도 특별히 주의해야 할 몇 가지 세부 사항이 있습니다.

버전 호환성 문제

Playwright를 설치하고 사용할 때 해당 버전이 프로젝트에서 사용되는 다른 종속 라이브러리와 호환되는지 확인하세요. Playwright의 여러 버전은 API 사용 방식과 기능적 특징에서 약간의 차이가 있을 수 있습니다. 따라서 공식 문서를 주의 깊게 참조하고 프로젝트에 적합한 버전을 선택하세요. 동시에 Playwright와 사용 중인 브라우저 버전 간의 호환성에도 주의하세요. 일부 새로운 기능은 제대로 실행하려면 특정 버전의 브라우저가 필요할 수 있습니다.

구성 조정

마이그레이션 후에는 일부 구성을 해당하게 조정해야 할 수 있습니다. 예를 들어 Puppeteer에서는 특정 시작 매개변수와 구성 옵션에 익숙할 수 있지만 Playwright에서는 구성 방식과 매개변수 이름이 다를 수 있습니다. 헤드리스 모드 활성화 여부, 프록시 설정, 브라우저 성능 매개변수 조정 등 Playwright 설명서에 따라 브라우저 시작을 위한 구성을 다시 설정해야 합니다.

오류 처리

Playwright의 오류 처리 매커니즘 또한 Puppeteer와 다릅니다. 마이그레이션 과정에서 코드가 Playwright에서 발생하는 다양한 예외를 올바르게 포착하고 처리할 수 있는지 확인하세요. Playwright의 오류 메시지에는 일반적으로 자세한 오류 이유와 스택 추적이 포함되어 있어 문제를 빠르게 찾고 해결하는 데 도움이 됩니다. try - catch 문을 사용하여 예외를 포착하고 작업 재시도, 오류 메시지 로깅 등 다양한 오류 유형에 따라 처리할 수 있습니다.

팀 협업

프로젝트가 팀 협업 개발 프로젝트인 경우 Playwright로 마이그레이션할 때 모든 팀 구성원이 이러한 변경 사항을 인지하고 있는지 확인하세요. 팀 교육을 조직하여 Playwright의 새로운 기능과 사용 방법을 공유하여 모든 사람이 새로운 도구를 최대한 빨리 익힐 수 있도록 할 수 있습니다. 동시에 프로젝트의 코드 사양과 문서를 업데이트하여 팀 구성원이 Playwright를 사용할 때 통일된 표준을 따르도록 하세요.

마이그레이션 후 최적화 제안

마이그레이션을 완료한 후에도 작업은 끝나지 않았습니다. Playwright의 장점을 최대한 활용하려면 코드를 최적화할 수도 있습니다.

병렬화 기능 활용

Playwright의 Test 메커니즘은 기본적으로 병렬화를 제공하여 테스트 케이스의 실행 시간을 크게 단축할 수 있습니다. 프로젝트의 실제 상황에 따라 병렬로 실행할 테스트 케이스 수를 합리적으로 구성하고 다중 코어 CPU의 성능을 최대한 활용하고 테스트 효율성을 향상시킬 수 있습니다.

대기 전략 최적화

Playwright의 자동 대기 메커니즘은 이미 매우 강력하지만 일부 복잡한 시나리오에서는 대기 전략을 추가로 최적화해야 할 수도 있습니다. 예를 들어 페이지 요소의 로드 특성에 따라 대기 시간 초과를 합리적으로 설정하여 과도한 대기 시간으로 인한 낮은 테스트 효율성을 방지하세요. 동시에 하드 대기 시간을 사용하지 말고 요소가 표시되거나 클릭할 수 있을 때까지 기다리는 것과 같은 더 지능적인 대기 조건을 사용하세요.

코드 리팩터링

마이그레이션 과정에서 원래 Puppeteer로 작성된 일부 코드를 Playwright에서 더 간결하고 효율적으로 구현할 수 있다는 것을 알 수 있습니다. 이 때 코드를 적절히 리팩터링하고 중복 코드를 제거하고 코드의 가독성과 유지 관리성을 향상시킬 수 있습니다. 동시에 Playwright에서 제공하는 새로운 기능을 활용하여 테스트 케이스를 최적화하여 더욱 강력하고 안정적으로 만들 수 있습니다.

요약

Puppeteer에서 Playwright로 마이그레이션하려면 새로운 변경 사항을 배우고 적응하는 데 시간과 노력을 들여야 하지만 장기적으로는 그만한 가치가 있습니다. Playwright는 성능, 안정성 및 새로운 기능 측면에서 분명한 이점을 가지고 있어 테스트 및 자동화 작업에 더 높은 효율성과 더 나은 경험을 제공할 수 있습니다. 마이그레이션의 핵심 사항을 숙지하고, 마이그레이션 과정에서 다양한 세부 사항에 주의를 기울이고, 마이그레이션 후 코드를 최적화하는 한, 이 마이그레이션을 성공적으로 완료하고 Playwright의 도움으로 프로젝트를 새로운 수준으로 끌어올릴 수 있습니다!

Leapcell: 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼

마지막으로 Playwright를 배포하는 데 가장 적합한 플랫폼인 Leapcell을 추천합니다.

1. 다국어 지원

• JavaScript, Python, Go 또는 Rust로 개발합니다.

2. 무제한 프로젝트를 무료로 배포

• 사용량에 대해서만 비용을 지불합니다. 요청 없음, 요금 없음.

3. 타의 추종을 불허하는 비용 효율성

• 유휴 요금 없이 사용한 만큼 지불합니다.
• 예: $25는 평균 응답 시간 60ms에서 694만 건의 요청을 지원합니다.

4. 간소화된 개발자 경험

• 간편한 설정을 위한 직관적인 UI.
• 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합.
• 실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅.

5. 손쉬운 확장성 및 고성능

• 쉬운 동시성 처리를 위한 자동 확장.
• 제로 운영 오버헤드. 구축에만 집중하세요.

문서에서 자세히 알아보세요!

Leapcell Twitter: https://x.com/LeapcellHQ