Chrome DevTools Recorder 이상의 사용자 플로우 맞춤설정 및 자동화

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

자동 테스트를 작성하는 것은 개발자의 삶에서 가장 재미있는 일이 아니라는 점을 인정해 봅시다. 개발자로서 우리는 기능을 개발하고, 버그를 수정하고, 세상을 개선하고자 합니다. 하지만 워크플로에 자동화된 테스트가 없으면 장기적으로는 '버그'가 발생할 수 있습니다. 따라서 자동화된 테스트를 작성하는 것도 중요하다고 생각합니다.

Chrome DevTools의 Recorder 패널을 사용하면 사용자 플로우를 기록 및 재생하고, 다양한 서드 파티 확장 프로그램과 라이브러리를 통해 다양한 형식 (예: 테스트 스크립트)으로 내보내고, Puppeteer Replay 라이브러리로 사용자 플로우를 맞춤설정하고, 이를 기존 워크플로와 통합할 수 있습니다.

이 블로그 게시물에서는 다음 내용에 대해 알아봅니다.

  • 프로그래매틱 방식으로 사용자 플로우를 내보내고 재생하는 방법
  • Puppeteer Replay로 사용자 플로우를 맞춤설정하는 방법
  • CI/CD 워크플로와 통합하는 방법

이 블로그 게시물에서는 사용자가 녹음기의 기본 사항을 이미 알고 있다고 가정합니다. 녹음기를 처음 사용하는 경우 이 간단한 소개 튜토리얼 및 동영상 가이드에 따라 시작하세요.

프로그래매틱 방식으로 사용자 흐름 내보내기 및 재생

기본적으로 녹음기에서는 녹음 파일을 Puppeteer, Puppeteer Replay 스크립트 또는 일반 JSON 파일로 내보낼 수 있습니다.

내보내기 옵션

사용자 플로우를 JSON 파일로 내보낸 후에는 Recorder 패널로 다시 가져와서 재생하거나 외부 라이브러리를 사용하여 재생할 수 있습니다. Puppeteer Replay 라이브러리는 사용 가능한 라이브러리 중 하나입니다.

Puppeteer Replay로 플레이하기

저장소의 안내에 따라 Puppeteer Replay를 설치하세요.

recordings 폴더 (예: 데모 프로젝트)에 JSON 사용자 흐름을 저장한다고 가정하면 다음 명령어를 사용하여 하나 이상의 사용자 흐름을 실행할 수 있습니다. 

# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json

# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json

필요한 경우 녹음 파일을 실행하기 위한 npm 스크립트를 추가할 수 있습니다. package.json의 scripts 필드에 다음 줄을 추가합니다.

"replay-all": "replay recordings"

이렇게 하면 명령줄에서 npm run replay-all를 실행하여 모든 녹화 파일을 재생할 수 있습니다.

사용자 흐름은 기본적으로 UI 없이 재생됩니다 (헤드리스 모드라고도 함). UI를 보려면 명령어를 실행하기 전에 PUPPETEER_HEADLESS 환경 변수를 false로 설정합니다.

PUPPETEER_HEADLESS=false npm run replay-all

서드 파티 라이브러리로 다시 재생

Chrome 브라우저 외부에서 재생하는 데 사용할 수 있는 서드 파티 라이브러리도 있습니다. 라이브러리의 전체 목록을 참조하세요.

예를 들어 TestCafe는 엔드 투 엔드 테스트 프레임워크입니다. Safari 등에서 JSON 사용자 플로우의 재생을 지원합니다.

npm install -g testcafe

# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json

# replay with all browsers
testcafe all ./recordings/order-one-coffee.json

반면 Saucelabs는 클라우드 기반 테스트 플랫폼입니다. 클라우드에서 다양한 브라우저 및 버전을 사용한 JSON 사용자 플로우의 재생을 지원합니다.

다음은 Saucelabs의 구성 파일 예입니다. 데모 저장소 확인

apiVersion: v1alpha
kind: puppeteer-replay
suites:
  - name: "order a coffee"
    recordings: [ "recordings/order-a-coffee.json" ]
…

다양한 확장 프로그램으로 사용자 흐름 내보내기

기본 옵션 외에 확장 프로그램을 설치하여 사용자 플로우를 다른 형식으로 내보낼 수도 있습니다.

다양한 확장 프로그램으로 사용자 흐름을 내보냅니다.

예를 들어 사용자 플로우를 WebPageTest 커스텀 스크립트로 기록하고 내보낼 수 있습니다. 스크립트를 사용하면 애플리케이션을 통해 여러 단계로 이루어진 사용자 플로우의 성능을 테스트할 수 있습니다. 하지만 이러한 스크립트를 작성하는 것은 때로는 어려울 수 있습니다.

또한 테스트 도구가 이미 있다면 사용자 플로우를 Cypress, Nightwatch, WebdriverIO, Testing Library 등 다양한 테스트 스크립트로 내보내는 확장 프로그램이 있습니다. 전체 목록을 확인하세요. 이렇게 하면 팀에서 테스트 작성을 더 빨리 시작할 수 있습니다.

프로그래매틱 방식으로 다른 테스트 스크립트로 변환

대부분의 테스트 제공업체는 확장 프로그램 외에도 여러 JSON 사용자 플로우를 프로그래매틱 방식으로 변환하는 데 도움이 되는 라이브러리를 게시합니다.

예를 들어 @cypress/chrome-recorder 라이브러리를 사용하여 사용자 플로우를 Cypress 테스트로 내보냅니다.

npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json

확장 프로그램으로 사용자 흐름 재생

Chrome 112부터 확장 프로그램을 사용하여 녹화 파일을 재생함으로써 사용 환경을 개선할 수 있습니다. 이러한 확장 프로그램을 사용하면 DevTools를 나가지 않고도 녹음 파일을 재생할 수 있도록 서드 파티 서비스와 인프라를 원활하게 통합할 수 있습니다.

재생 확장 프로그램을 사용하면 DevTools에 패널을 추가하여 재생을 구성하고 재생 결과를 표시할 수 있습니다.

시작하려면 사용 가능한 광고 확장 목록을 살펴보거나 나만의 맞춤 광고 확장을 만드는 방법을 알아보세요.

자체 확장 프로그램 또는 라이브러리 빌드

내부적으로 모든 확장 프로그램과 라이브러리는 Puppeteer Replay 라이브러리를 기반으로 합니다. Puppeteer Replay는 사용자 플로우를 재생할 수 있을 뿐만 아니라 사용자 플로우 다시보기를 맞춤설정하거나 변환할 수 있는 API를 제공합니다.

사용자 흐름 재생 맞춤설정

스크린샷 플러그인을 빌드해 보겠습니다. 각 사용자 흐름에 대해 우리는 다음을 원합니다.

  • 모든 단계를 완료할 때마다 스크린샷을 찍어 _screenshots 폴더에 저장합니다.
  • 사용자 흐름 실행이 완료되면 메시지를 출력합니다.

다음은 코드 스니펫입니다. 이 데모를 다운로드하여 사용해 볼 수도 있습니다.

/* screenshot-plugin.mjs */

import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";

// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });

export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
  count = 0;

  async afterEachStep(step, flow) {
    await super.afterEachStep(step, flow);
    this.count = this.count + 1;

    const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
    await this.page.screenshot({ path });

    console.log(`Saved screenshot as ${path}`);
  }

  async afterAllSteps(step, flow) {
    await super.afterAllSteps(step, flow);
    console.log("Operation completed successfully.");
  }
}

코드 자체는 표현력이 매우 좋습니다. PuppeteerRunnerExtension API를 확장하여 각 단계 후 스크린샷을 저장하고 모든 단계 후 메시지를 로깅합니다.

파일을 저장하면 다음 명령어를 사용하여 이 확장 프로그램으로 사용자 흐름을 실행할 수 있습니다.

# replay one user flow with plugin 
npx @puppeteer/replay --extension ./screenshot-plugin.mjs  ./recordings/order-a-coffee.json

# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json

출력은 다음과 같습니다.

Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…

Operation completed successfully.

사용자 플로우 혁신

사용자 플로우를 맞춤설정하는 또 다른 방법은 사용자 플로우를 다른 형식 (예: Cypress 또는 Nightwatch 테스트 스크립트)으로 변환하는 것입니다.

예를 들어 사용자 플로우에 URL로 이동하는 단계가 포함되어 있습니다. JSON 파일은 다음과 같습니다.

{
  "title": "order-a-coffee",
  "steps": [
    {
      "type": "navigate",
      "url": "https://coffee-cart.netlify.app/"
    },
    …
  ]
}

stringify 플러그인을 만들어 단계를 자바스크립트로 변환할 수 있습니다. 또한 다른 기존 라이브러리에서 작동 방식을 확인할 수 있습니다.

예를 들어 다음 코드 스니펫은 WebdriverIO가 탐색 단계를 변환하는 방법을 보여줍니다.


export class StringifyPlugin extends PuppeteerStringifyExtension {

  #appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
        switch (step.type) {
        case 'navigate':
    return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
        …
  }

사용자 플로우와 함께 플러그인을 실행하면 탐색 줄이 await browser.url(‘https://coffee-cart.netlify.app/’)로 변환됩니다.

DevTools 재생 환경 맞춤설정

재생 확장 프로그램을 사용하면 DevTools 녹음기에서 나가지 않고도 서드 파티 서비스 및 인프라를 사용하여 녹음 파일을 재생할 수 있습니다.

브라우저 확장 프로그램으로 재생 환경을 개선하세요.

자체 재생 확장 프로그램을 만들려면 재생 확장 프로그램 문서를 참고하고 확장 프로그램 예시를 검토하세요.

Chrome 확장 프로그램 게시

사용자 플로우를 맞춤설정하고 변환한 후 Chrome 확장 프로그램으로 패키징하여 Chrome 웹 스토어에 게시할 수 있습니다.

이 데모와 안내를 확인하여 로컬에서 디버그하고 Chrome 확장 프로그램을 게시하는 방법을 알아보세요.

CI/CD 파이프라인과 통합

여기에는 여러 가지 방법이 있으며 많은 도구가 있습니다. 다음은 GitHub 작업을 사용하여 이 프로세스를 자동화하는 예입니다. 

# .github/node.js.yml

name: Replay recordings

on:
  push:
    branches: [ "main" ]
  schedule:
    - cron: '30 12 * * *' # daily 12:30pm

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 18.x
        cache: 'npm'
    - run: npm install puppeteer
    - run: npm run replay-all
    - run: npm run start

이 예에서는 다음과 같은 경우에 사용자 플로우를 재생합니다.

  • 새 변경사항이 main 브랜치에 푸시
  • 매일 오후 12시 30분

GitHub Actions 외에도 좋아하는 클라우드 제공업체와도 통합할 수 있습니다. Google Cloud Run 작업을 사용하여 최대 10,000개의 사용자 플로우를 동시에 실행하는 방법을 알아보려면 이 데모로 이동하세요.

결론

이 블로그 게시물에서는 사용자 흐름을 JSON 파일로 내보내고, PuppeteerReplayExtension로 재생을 맞춤설정하며, PuppeteerStringifyExtension로 사용자 흐름을 변환하고, 이를 CI 워크플로에 통합하는 다양한 옵션에 대해 알아봤습니다.

이 블로그 게시물을 통해 녹음기 패널과 제공된 도구를 사용하여 테스트 워크플로를 프로젝트에 더 쉽게 통합할 수 있는 방법에 관한 아이디어를 얻으셨기를 바랍니다. 앞으로 빌드하실 멋진 제품을 기대하겠습니다.

미리보기 채널 다운로드

Chrome Canary, Dev 또는 베타를 기본 개발 브라우저로 사용해 보세요. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스하고, 최첨단 웹 플랫폼 API를 테스트하고, 사용자보다 먼저 사이트에서 문제를 발견할 수 있습니다.

Chrome DevTools 팀에 문의하기

다음 옵션을 사용하여 게시물의 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 사항에 대해 논의하세요.

  • crbug.com을 통해 제안이나 의견을 보내주세요.
  • DevTools에서 옵션 더보기   더보기   > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고하세요.
  • @ChromeDevTools에서 트윗하세요.
  • DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 의견을 남겨주세요.