인형 배우에서 극작가로의 전환

본문은 최초로 Checkly's Guides년에 발표되었다.

오늘의 인형 배우와 극작가.

비슷한 점이 많지만 Puppeteer과 Playwright은 지난 2년 동안 서로 다른 속도로 발전해 극작가들이 큰 동력을 얻었고 인형 배우를 뒤로 따돌렸다고 할 수 있다.
이런 발전으로 많은 사람들이 인형 배우에서 극작가로 바뀌었다.이 가이드는 필요한 단계와 새로운 가능성을 제시하는 데 목적을 두고 있습니다.이 글의 편폭이 너무 길다고 낙담하지 마라. 대부분의 경우 이동은 빠르고 아프지 않다.

왜 바꿔요?

각 도구의 장점과 단점을 포괄적으로 비교해 보면 그 자체의 지침을 보완할 수 있다(우리의 previous benchmarks 예시 참조). 그러나 현재 극작가로 이전하는 이유는 상당히 간단하다.

은 이 안내서를 작성할 때까지 극작가들은 게임 규칙을 바꾸는 기능을 빈번하고 지속적으로 추가했다(부분 목록은 below). 반면에 인형 배우는 대부분의 작은 변경과 오류 복구를 순서대로 발표했다.이것은 이 두 공구를 분리했던 기능 차이의 역전을 초래했다.

극작가는 현실 세계의 E2E 장면에서 성능 우위를 유지했다(위 링크의 기준 테스트 참조). 이로써 테스트 세트의 집행 시간을 낮추고 모니터링 검사를 가속화시켰다.

명의 극작가의 극본은 이미 믿을 만한 인형 배우의 극본보다 안정적으로 운영되고 있는 것 같다.

, GitHub, Slack과 이후 극작가 커뮤니티는 활발해졌고, 인형배우 커뮤니티는 점점 조용해졌다.

스크립트에서 변경할 내용 - 짧은 버전

너는 아래에서 인형 배우의 지령에 대한 메모지와 극작가의 상응하는 변천을 찾을 수 있다.계속해서 읽고 모든 변화에 대해 더욱 길고 깊이 있게 해석하다.
필요에 따라 await을 추가하는 것을 기억하세요.
꼭두각시 배우
극작가require('puppeteer')require('playwright')puppeteer.launch(...)playwright.chromium.launch(...)browser.createIncognitoBrowserContext(...)browser.newContext(...)page.setViewport(...)page.setViewportSize(...)page.waitForSelector(selector) page.click(selector); page.click(selector)page.waitForXPath(XPathSelector)page.waitForSelector(XPathSelector)page.$x(xpath_selector)page.$(xpath_selector)page.waitForNetworkIdle(...)page.waitForLoadState({ state: 'networkidle' }})page.waitForFileChooser(...)삭제됨, handled differently.page.waitFor(timeout)page.waitForTimeout(timeout)page.type(selector, text)page.fill(selector, text)page.cookies([...urls])browserContext.cookies([urls])page.deleteCookie(...cookies)browserContext.clearCookies()page.setCookie(...cookies)browserContext.addCookies(cookies)page.on('request', ...)page.route 처리.elementHandle.uploadFile(...)elementHandle.setInputFiles(...)까다로운 파일 다운로드.
가장 좋은 것은 support for downloads이다.

Did we forget anything? Please let us know by getting in touch, or submit your own PR.

스크립트에서 변경할 내용 - 심층

극작가 세트가 필요해요.

《인형극》에서 극본의 앞줄은 다음과 비슷할 가능성이 높다.

const puppeteer = require('puppeteer');

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

  // ...

극작가가 있으면 너는 너무 많은 변화를 할 필요가 없다.

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

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

  // ...

Playwright 는 기존 크로스 브라우저 지원을 제공합니다. 첫 줄을 const { webkit } = require('playwright');으로 변경하면 어떤 브라우저를 사용할 것인지 선택할 수 있습니다
Puppeter에서는 브라우저의 시작 옵션을 통해 다음을 수행할 수 있습니다.

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

브라우저 컨텍스트

Browser contexts은 이미 인형사에 존재한다.

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

극작가의 API는 그것들을 더욱 중시하고 처리 방식도 약간 다르다.

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

Puppeter와 마찬가지로 기본 케이스 및 단일 페이지 흐름에 대해 기본 컨텍스트를 사용할 수 있습니다.

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

When in doubt, explicitly create a new context at the beginning of your script.

기다리다 기다리다

Playwright의 자동 대기 메커니즘은 이전처럼 현식 기다림에 자주 관심을 기울일 필요가 없다는 것을 의미합니다.그러나 기다림은 UI 자동화의 가장 까다로운 부분 중 하나이며, 스크립트를 하나 이상의 조건이 충족되기를 현저하게 기다리는 방법에 대해 알아야 합니다.
이 방면에서 극작가는 네가 주의해야 할 변화를 가져왔다.

page.waitForNavigation 및 page.waitForSelector 은 유지되지만 많은 경우 자동 대기 상태로 인해 필요하지 않습니다.

page.waitForEvent 이 추가되었습니다.

Pupper의 page.waitForXPath 은 이미 page.waitForSelector 에 통합되어 XPath 표현식을 자동으로 식별할 수 있다.

page.waitForFileChooser 제거됨(새로운 용도는 official dedicated page 및 file upload example 참조)

page.waitForNetworkIdle 은 page.waitForLoadState 으로 요약됨(networkidle 상태를 참조하여 이전의 행위를 재창설하십시오)

page.waitForUrl 이 추가되어 페이지의 기본 프레임에 URL이 로드될 때까지 기다릴 수 있습니다.

page.waitFor(timeout) 에서 page.waitForTimeout(timeout) 으로 변경되었습니다.

This is as good a place as any to remind that page.waitForTimeout should never be used in production scripts! Hard waits/sleeps should be used only for debugging purposes.

뷰포트 설정

인형 배우의 page.setViewport은 극작가 중 page.setViewportSize으로 바뀌었다.

타이핑

Puppeter의 page.type 은 Playwright에서 사용할 수 있고 세분화된 키보드 이벤트를 처리할 수 있지만 Playwright는 page.fill 을 추가하여 폼을 채우고 지우는 데 사용됩니다.

쿠키

인형사에게 cookies는 페이지 단계에서 처리된다.극작가와 함께 브라우저의 상하문 단계에서 그것들을 조종할 수 있다.
낡다

page.cookies([...urls])

page.deleteCookie(...cookies)

page.setCookie(...cookies)

...다음이 됩니다.

browserContext.cookies([urls])

browserContext.clearCookies()

browserContext.addCookies(cookies)

이러한 방법 중의 미세한 차이, 그리고 cookies가 어떻게 그들에게 전달되는지 주의하세요.

XPath 선택기

// 또는 ..으로 시작하는 XPath 선택기는 극작가가 자동으로 식별하고 인형 배우는 전문적인 방법이 있다.이는 page.$(xpath_selector)이 아닌 page.$x(xpath_selector), page.waitForSelector(xpath_selector)이 아닌 page.waitForXPath(xpath_selector)을 사용할 수 있음을 의미합니다.page.click과 page.fill도 마찬가지다.

장치 에뮬레이션

극작가 device emulation settings은 브라우저 상하문 단계에 설정되어 있습니다. 예를 들어 다음과 같습니다.

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

이 외에도 권한, 지리적 위치 및 기타 장치 매개 변수를 제어할 수 있습니다.

파일 다운로드

머리 없는 모드에서 인형극의 파일을 다운로드하려는 시도는 까다로울 수도 있다.극작가는 이 점을 더욱 간소화시켰다.

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

const path = await download.path();

example on file download 을 참조하십시오.

파일 업로드

인형사의 elementHandle.uploadFile 이 elementHandle.setInputFiles 으로 바뀌었다.
example on file upload 을 참조하십시오.

차단 요청

Puppeter의 요청 차단은 page.on('request', ...) 을 통해 처리됩니다.

await page.setRequestInterception(true)

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

Playwright에서 URL이 특정 모드와 일치하는 요청을 차단하는 데 page.route 을 사용할 수 있습니다.

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

더 많은 예시에 관해서는 우리의 full guide 요청 차단을 참조하십시오.

For many of the points in the list above, variations of the same function exist at Page, Frame and ElementHandle level. For simplicity, we reported only one.

주의해야 할 새로운 가능성

인형 배우에서 극작가가 되었을 때, 반드시 극작가가 소개한 많은 새로운 기능을 이해하게 해야 한다. 왜냐하면 그것은 당신의 테스트나 모니터링 설정에 새로운 해결 방안과 가능성을 제공할 수 있기 때문이다.

신형 선택 엔진

Playwright는 different selector engines을 공개하여 선택기를 통해 UI 요소를 참조할 때 유연성을 증가시켰다.CSS 및 XPath 외에도 다음과 같은 기능이 추가되었습니다.

극작가별 선택기, 예: :nth-match(:text("Buy"), 3)

텍스트 선택기, 예: text=Add to Cart

체인식 선택기, 예: css=preview >> text=In stock

너는 심지어 자신의 custom selector engine을 만들 수 있다.
선택기 및 사용 방법에 대한 자세한 내용은 our dedicated guide을 참조하십시오.

상태 저장 및 재사용

Playwright 를 사용하면 특정 세션의 검증된 상태(cookies 및 localStorage)를 쉽게 저장하고 다음 스크립트 실행에 다시 사용할 수 있습니다.
스크립트에서 직접 테스트/감시해서는 안 되는 사전 검증 단계를 건너뛰면 더 큰 세트에서 save significant amounts of time에 재사용 상태가 됩니다.

로케이터 API

극작가의 Locator API을 보실 수 있습니다. 이것은 주어진 요소를 검색하는 데 필요한 논리를 봉하여 스크립트의 시간에 따라 최신 DOM 요소를 쉽게 검색할 수 있도록 합니다.
Page Object Model에 따라 설정을 구축하고 있거나, 관심 있으면 시작하십시오.

극작가가 감독하다.

Playwright Inspector은 스크립트를 디버깅하는 데 매우 편리한 GUI 도구로, 스크립트에서 각 명령을 실행하여 고장 원인을 쉽게 확인할 수 있습니다.

Inspector도 페이지 요소에 선택기를 추천할 수 있고 새 스크립트를 처음부터 기록할 수 있기 때문에 편리하다.

극작가 테스트

Playwright는 자신의 runner Playwright Test을 자체로 가지고 있으며, 이것은 끝에서 끝까지의 테스트에 유용한 기능을 추가했다. 예를 들어 상자를 열면 바로 사용할 수 있는 병행화, 테스트 클러치, 연결 등이다.

추적 관찰기

Playwright Trace Viewer에서는 Playwright 테스트나 BrowserContext를 사용하여 API 기록을 추적할 수 있습니다.추적 중, 스크립트의 실행에 대해 가장 세밀한 파악을 할 수 있습니다.

테스트 생성기

Playwright Test Generator을 사용하여 브라우저에서 상호 작용을 기록할 수 있습니다.출력은 언제든지 보고 실행할 수 있는 성숙한 스크립트가 될 것입니다.

더 풍부한 브라우저 검사 결과를 얻기 위해 극작가로 전환

Playwright로 전환된 Checkly 사용자는 새로운 브라우저 검사 결과(tracing and Web Vitals 첨부)를 이용하여 검사 실패의 근본 원인을 더욱 쉽게 찾아내고 신속하게 구제할 수 있다.

그러면 다음과 같은 검사 수행에 대한 추가 정보가 표시됩니다.

으로 인한 모든 오류 개요(콘솔, 네트워크 및 스크립트 오류)

요약 페이지 탐색 실행 타임라인

은 각 페이지에 대한 네트워크 및 타이밍 일정, 네트워크 중요 정보, 콘솔 및 네트워크 탭을 제공합니다.

검사가 실패하면 실패한 화면 캡처가 표시됩니다.

Aside from running a Playwright script, performance and error tracing also require the use of Runtime 2021.06 or newer.

Note that cross-browser support is not available on Checkly - our Browser checks run on Chromium only.

배너 이미지: "rocket engine" by industrial arts, CC BY 2.0 인증