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

에르군 에르도그무스
에르군 에르도무스
트위터
제슬린 옌
제슬린 예
Twitter GitHub 홈페이지

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

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

이 블로그 게시물에서 다룰 내용은 다음과 같습니다.

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

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

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

기본적으로 녹음기를 사용하면 이러한 녹음 파일을 Puppeteer 또는 Puppeteer Replay 스크립트나 일반 JSON 파일로 내보낼 수 있습니다.

내보내기 옵션

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

Puppeteer Replay로 다시 플레이

저장소의 안내에 따라 Puppeteer Replay를 설치합니다.

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

# 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를 떠나지 않고도 녹화 파일을 다시 재생할 수 있도록 타사 서비스와 인프라를 원활하게 통합할 수 있습니다.

Replay 확장 프로그램을 사용하면 확장 프로그램이 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 재생 환경 맞춤설정

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

브라우저 확장 프로그램으로 재생 환경을 개선합니다.

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

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, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools 팀에 문의하기

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

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