Playwright 및 Docker를 사용하여 종단 간 테스트를 실행하는 방법

작성자는 DOnations 프로그램에 쓰기를 선택했습니다.

소개

NodeJS. Playwright의 유연성은 소프트웨어가 요구 사항을 충족하는지 확인하기 위해 웹 스크래핑 도구 또는 종단 간 테스트에 사용할 수 있음을 의미합니다.

Playwright를 실행하려면 NodeJS 런타임, Playwright 코어 프레임워크 또는 Playwright 테스트 러너와 같은 적절한 환경이 필요합니다. Playwright를 지원하려면 운영 체제에 종속성이 필요할 수 있습니다. 오픈 소스 컨테이너화 플랫폼인 Docker는 Playwright 환경을 지원할 수 있으므로 서로 다른 운영 체제에 대해 여러 환경을 생성할 필요가 없습니다.

이 자습서에서는 엔드투엔드 테스트를 위해 Typescript와 함께 Playwright를 사용하고, 테스트를 작성 및 실행하고, 테스트 보고서를 여러 형식으로 내보내고, Docker를 사용하여 테스트를 배포하는 환경을 설정합니다. 자습서가 끝나면 자동화 테스트에 Playwright를 사용하고 테스트 환경을 래핑하는 Docker를 사용하여 테스트를 기존 CI/CD 파이프라인에 통합할 수 있습니다.

전제 조건

이 자습서를 따르려면 다음이 필요합니다.

  • Ubuntu 20.04 초기 서버 설정 가이드에 따라 sudo 사용 계정이 설정된 Ubuntu 20.04 서버 1대. 서버에 NodeJS 및 Docker를 설치하려면 sudo 사용 계정이 필요합니다.
  • Node.js 설치 및 로컬 개발 환경 만들기 시리즈.
  • Ubuntu 20.04에서 Docker를 설치하고 사용하는 방법의 1-4단계. 4단계에서는 docker run hello-world를 실행하여 Docker가 제대로 설치되고 사용할 준비가 되었는지 확인합니다.
  • 웹 애플리케이션에 대한 종단 간 테스트에 익숙함
  • TypeScript 자습서 시리즈의 코딩 방법에 익숙합니다.
  • (선택 사항) Typescript에서 작업할 때 코드 탐색 및 컴파일러 오류 경고와 같은 강력한 기능 지원이 있는 Visual Studio Code. 이 튜토리얼은 전체적으로 nano를 사용합니다.

1단계 - 환경 준비

종단 간 테스트를 구현하기 전에 Playwright 프로젝트 환경을 준비해야 합니다.

먼저 이 프로젝트의 폴더를 만듭니다.

  1. mkdir playwright-with-docker

새 폴더로 이동:

  1. cd playwright-with-docker

그런 다음 새 노드 환경을 초기화합니다.

  1. npm init

프로젝트 이름, 버전, 애플리케이션 항목 및 테스트 명령과 같은 새 프로젝트에 대한 정보를 제공하라는 메시지가 표시됩니다.

새 프로젝트와 관련된 다음 프롬프트에 대한 답변을 입력하라는 메시지가 표시됩니다.

Output
package name: (playwright-docker)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

다음과 같은 결과가 표시됩니다.

Output
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterward to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) playwright-docker
version: (1.0.0)
description: A project for using playwright for end-to-end testing purpose with docker for deployment
entry point: (index.js)
test command:
git repository:
keywords:
author: 
license: (ISC)
About to write to /your-path/test/package.json:

{
  "name": "playwright-docker",
  "version": "1.0.0",
  "description": "A project for using playwright for end-to-end testing purpose with docker for deployment",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": 
  "license": "ISC"
}


Is this OK? (yes) yes

필수 정보를 추가한 후 yes를 입력하거나 enter를 눌러 package.json 파일의 설정을 확인합니다.

다음으로 프로젝트에 필요한 종속 항목을 설치합니다.

  1. npm install --save-dev playwright

  2. npm install --save-dev typescript

이 명령은 샘플 프로젝트 내에 Playwright 및 TypeScript를 설치합니다. --save-dev 플래그는 애플리케이션 실행에 필수가 아닌 종속성을 설치하는 데 사용됩니다.

다음으로 Node.JS에 대한 유형 정의를 설치합니다.

  1. npm install --save-dev @types/node

다음으로 구성을 위해 TOML 파일로 작업할 라이브러리를 설치합니다.

  1. npm install --save-dev toml

TOML은 애플리케이션 구성에 사용되는 파일 형식 중 하나입니다. .toml 파일은 사람이 읽을 수 있으며 애플리케이션이 먼저 읽지 않고도 내용을 업데이트할 수 있습니다.

다음으로 호스트 시스템에 대한 Playwright 종속 항목을 설치합니다.

  1. npx playwright install-deps

메시지가 표시되면 sudo 암호를 입력합니다.

참고: 다음과 같이 Node 버전을 더 높은 버전으로 업그레이드해야 한다는 메시지를 받은 경우:

Output
You are running Node.js 10.19.0.
Playwright requires Node.js 12 or higher. 
Please update your version of Node.js.

다음 명령을 사용하여 업그레이드할 수 있습니다.

  1. sudo npm cache clean -f 

  2. sudo npm install -g n 

  3. sudo n stable

npm cache clean -f는 모든 캐시를 강제로 정리합니다.

그런 다음 이 자습서의 이후 단계에서 사용할 Playwright 테스트 러너를 설치합니다.

  1. npm install --save-dev @playwright/test

마지막으로 Playwright에 대해 지원되는 브라우저를 설치합니다.

  1. npx playwright install

이 명령을 사용하면 여러 브라우저에서 테스트를 실행할 수 있습니다.

TypeScript 구성 파일을 준비하려면 nano 또는 원하는 텍스트 편집기로 tsconfig.json을 엽니다.

  1. sudo nano tsconfig.json

현재 파일이 비어 있습니다. 이 프로젝트에 대해 업데이트하려면 다음 코드를 추가하십시오.

{
  "compilerOptions": {
    "strict": true,
    "module": "commonjs"
  },
  "include": ["tests"]
}

tsconfig.json 파일은 NodeJS 런타임에 현재 디렉터리가 Typescript 프로젝트임을 알려줍니다. compilerOptions는 NodeJS가 프로젝트를 컴파일하는 데 필요한 조건을 나열합니다. module은 파일이 Javascript로 컴파일될 때 사용할 모듈 구문을 컴파일러에 알려줍니다. true로 설정된 strict 필드는 Typescript 코드에 대한 유형 검사를 활성화하여 유형이 변수 또는 메서드의 데이터 값과 일치하도록 보장합니다. include는 애플리케이션에 포함된 파일 이름 또는 패턴 목록을 표시합니다. 이 경우 애플리케이션은 tests 디렉토리의 모든 파일을 포함해야 합니다.

완료되면 파일을 저장하고 닫습니다.

환경이 설정되면 이제 테스트 구축을 시작할 수 있습니다.

2단계 — 테스트 작성

첫 번째 단계에서 준비한 Playwright 테스트 환경을 사용하여 이제 DigitalOcean Droplets 페이지에 연결된 세 가지 예제 테스트를 작성합니다.

빌드할 TypeScript 테스트는 다음 세 가지 항목을 확인합니다.

  • 새 DigitalOcean 계정에 가입하기 위한 세 가지 옵션인 이메일로 가입, Google에 가입, Github에 가입을 확인합니다.
  • DigitalOcean이 기본 및 프리미엄의 두 가지 유형의 패키지를 지원하는지 확인합니다.
  • 네 가지 기본 가상 머신 비용(CPU 1개, CPU 2개, CPU 4개, CPU 8개)이 있는지 확인합니다.

동일한 테스트 파일에 세 가지 테스트를 모두 포함할 수 있지만 각 테스트의 용도가 다르기 때문에 이 자습서에서는 세 개의 개별 파일을 사용합니다.

모든 테스트 파일을 보관할 tests라는 새 디렉터리를 만듭니다.

mkdir tests

그런 다음 tests 디렉토리로 이동합니다.

cd tests

서로 다른 용도로 세 가지 테스트를 실행할 것이므로 이 단계의 뒷부분에서 모두 프로젝트의 tests 디렉토리에 있는 세 개의 개별 테스트 파일을 생성합니다.

  • signUpMethods.spec.ts는 사용자가 등록할 수 있도록 지원되는 방법의 수를 확인하기 위한 테스트를 구현합니다.
  • multiplePackages.spec.ts는 고객이 선택할 수 있는 패키지 수를 확인하기 위한 테스트를 구현합니다.
  • pricingComparison.spec.ts는 기본 가상 머신 비용의 수를 확인합니다.

참고: 테스트 파일의 기본 형식은 *.spec.ts(TypeScript 프로젝트의 경우) 또는 *.spec.js(JavaScript 프로젝트의 경우)입니다.

테스트용 구성 파일의 이름은 configTypes.ts이며 tests 디렉토리에도 있습니다. 이 파일에서 여러 브라우저 및 해당 페이지와 상호 작용하기 위한 전역 변수를 정의합니다. 또한 테스트 중인 애플리케이션의 URL과 같이 테스트에 사용되는 일부 구성 값을 정의합니다. 이 자습서에서는 테스트 중인 URL에 DIGITAL_OCEAN_URL을 사용합니다.

configTypes.ts 생성:

  1. nano configTypes.ts

현재 비어 있는 configTypes.ts 파일에 다음 코드를 추가합니다.

import { Browser, Page } from "playwright";

import fs from 'fs';
import toml from 'toml';
const config = toml.parse(fs.readFileSync('./config.toml', 'utf-8'));

declare global {
  const page: Page;
  const browser: Browser;
  const browserName: string;
}

export default {
  DIGITAL_OCEAN_URL: config.digital_ocean_url ?? '',
  };

먼저 import 함수는 프로젝트의 홈 디렉터리에 있는 ./config.toml에서 구성 콘텐츠를 읽습니다.

page, browser, browserName에 대한 전역 변수를 선언합니다. 이 변수는 종단 간 테스트에서 페이지 및 브라우저 인스턴스를 초기화하는 데 사용됩니다. .

마지막으로 digital_ocean_url 키로 ./config.toml에서 읽은 값과 함께 DIGITAL_OCEAN_URL을 내보내면 테스트에서 이 URL을 사용할 수 있습니다. 나중에.

완료되면 파일을 저장하고 닫습니다.

첫 번째 테스트의 경우 nano 또는 원하는 텍스트 편집기를 사용하여 signUpMethods.spec.ts 파일을 만들고 엽니다.

  1. nano signUpMethods.spec.ts

빈 파일에 다음 코드를 추가합니다.

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 options for signing up", async ({ page }) => {

  // Go to the Droplets product page of DigitalOcean web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of signUp options
  const number_subscriptions_allowed = await page.locator('.SignupButtonsStyles__ButtonContainer-sc-yg5bly-0 > a').count()

  // Verify that number equals 3
  expect(number_subscriptions_allowed).toBe(3)
});

signUpMethods.spec.ts 파일에는 Droplets 페이지에 세 가지 등록 옵션이 있는지 평가하는 테스트용 코드가 포함되어 있습니다. 처음 두 줄에서 test 및 expect 메서드를 가져옵니다.

테스트는 비동기식 또는 동기식으로 작성할 수 있습니다. 비동기 방식으로 테스트를 작성하면 다음 단계를 실행하기 위해 테스트의 각 단계가 완료될 때까지 기다릴 필요가 없으므로 테스트 속도를 최적화하는 데 도움이 됩니다. 다음 작업으로 이동하기 전에 단계가 완료될 때까지 기다려야 하는 경우 await 키워드를 사용합니다. 여기 단계는 웹 상호 작용과 관련되어 있으므로 작업을 실행하기 전에 사용자 인터페이스의 각 요소가 표시되는지 확인해야 합니다. 이것이 모든 작업이 호출되기 전에 await 메서드를 포함하는 이유입니다.

테스트는 4개의 작업으로 test 블록에 정의됩니다. 첫 번째 await 키워드는 page.goto() 함수를 사용하여 DIGITAL_OCEAN_URL로 이동하도록 테스트에 지시합니다. >configTypes.ts 파일. 초기화할 필요 없이 테스트 전체에서 페이지 인스턴스를 사용할 수 있도록 async 선언에 전역 변수 page를 넣습니다.

두 번째 await 키워드는 page.waitForLoadState() 함수를 사용하여 페이지가 로드될 때까지 기다리도록 테스트에 지시합니다. 완료되지 않은 API 호출이 있는 경우 페이지에 사용할 수 없는 요소가 있을 수 있으며 그 결과 해당 요소를 찾을 수 없어 테스트가 실패할 수 있습니다.

page.locator() 함수를 사용하여 가입 옵션의 수를 찾기 위해 number_subscriptions_allowed를 정의합니다. 포함된 하위 요소의 수를 가져올 수 있는 CSS 선택기(이 경우 가입 버튼)로 가입 옵션 구성 요소를 찾을 수 있습니다.

마지막으로 expect 메서드는 page.locator()에서 찾은 옵션의 수를 3의 예상 출력으로 검증합니다.

파일을 저장하고 닫습니다.

다음으로 두 번째 테스트를 작성합니다. multiplePackages.spec.ts 파일을 생성하고 엽니다:

  1. nano multiplePackages.spec.ts

빈 파일에 다음 코드를 추가합니다.

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 packages for subscription", async ({ page }) => {

  // Go to the Droplets product page of DigitalOcean web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of packages to be 2 (Basic and Premium)
  const number_subscriptions_allowed = await page.locator('.CPUInfoStyles__StyledLeftCpuInfo-sc-ooo7a2-4 > div').count()

  // Verify that number equals 2
  expect(number_subscriptions_allowed).toBe(2)
});

signUpMethods.spec.ts 파일과 마찬가지로 Playwright 종속성에서 테스트 구성 및 테스트 기능을 가져옵니다.

이 테스트에서는 먼저 page.goto()를 사용하여 DIGITAL_OCEAN_URL로 이동합니다. 그런 다음 page.waitForLoadState()를 사용하여 페이지가 모든 네트워크 호출을 완료할 때까지 기다립니다.

웹 UI에서 구독 구성 요소의 하위 요소를 찾고 해당 정보를 number_subscriptions_allowed 변수에 저장합니다.

마지막으로 number_subscriptions_allowed의 값을 2의 예상 출력과 비교합니다.

완료되면 파일을 저장하고 닫습니다.

그런 다음 pricingComparison.spec.ts 파일을 생성하고 열어 세 번째 테스트를 정의합니다.

  1. nano pricingComparison.spec.ts

빈 파일에 다음 코드를 추가합니다.

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 packages for subscription", async ({ page }) => {

  // Go to the Droplets product page of DigitalOcean web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of basic virtual machine costs (1 CPU, 2 CPU, 4 CPU, 8 CPU)
  const number_subscriptions_allowed = await page.locator('.PricingComparisonToolStyles__StyledCpuSelector-sc-1k0sndv-7 > button').count()

  // Verify that number equals 4
  expect(number_subscriptions_allowed).toBe(4)
});

이 테스트의 async 함수는 이전 테스트와 동일한 page.goto() URL 및 page.waitForLoadState() 방향을 사용합니다. 이 테스트는 Droplets 페이지에서 사용할 수 있는 구독 패키지에 연결되어 있기 때문에 코드 블록의 후반부는 해당 테스트를 설정합니다.

이 테스트에서는 가격 책정 옵션 구성 요소에 대한 하위 요소 수를 가져오고 해당 값을 number_subscriptions_allowed 변수에 저장합니다. number_subscriptions_allowed 값이 4(현재 지원되는 구독 수)와 같아야 하는지 확인합니다.

파일을 저장하고 닫습니다.

테스트에서 configTypes.ts의 DIGITAL_OCEAN_URL을 사용하고 configTypes.ts는 digital_ocean_url 값을 읽습니다. ./config.toml 파일.

이제 프로젝트의 홈 디렉토리에 config.toml 파일을 생성합니다. 홈 디렉토리로 이동합니다.

  1. cd ..

그런 다음 config.toml 파일을 만듭니다.

  1. nano config.toml

다음 콘텐츠를 config.toml 파일에 복사합니다.

digital_ocean_url="https://www.digitalocean.com/products/droplets"

파일을 저장하고 닫습니다.

이제 프로젝트의 디렉토리 트리는 다음과 같습니다.

이 단계에서는 사용할 세 가지 테스트를 작성했습니다. 테스트가 의존하는 config.toml 파일도 정의했습니다. 다음 단계에서 테스트를 실행합니다.

3단계 - 테스트 실행

모든 브라우저에서 모든 테스트 실행, 병렬화 비활성화, 테스트 파일 집합 실행, 디버그 모드에서 실행 등 CLI에서 Playwright 테스트 러너를 사용하기 위한 많은 옵션이 있습니다. 이 단계에서는 모든 브라우저에서 테스트를 실행합니다.

먼저 다음 명령을 실행합니다.

  1. npx playwright test --browser=all

다음과 같이 테스트 결과를 볼 수 있어야 합니다.

Output
Running 9 tests using 1 worker

  ✓  [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (6s)
  ✓  [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (4s)
  ✓  [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (3s)
  ✓  [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (9s)
  ✓  [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (5s)
  ✓  [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s)
  ✓  [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (7s)
  ✓  [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (6s)
  ✓  [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (6s)


  9 passed (1m)

확인 표시는 세 가지 브라우저(Chromium, Firefox 및 Webkit)에서 모든 테스트를 통과했음을 나타냅니다.

작업자 수는 현재 서버에서 사용 중인 코어 수와 테스트를 위한 현재 구성에 따라 달라집니다. playwright.config.ts 파일에서 workers 값을 설정하여 작업자 수를 제한할 수 있습니다. 테스트 구성에 대한 자세한 내용은 Playwright 제품 문서를 참조하세요.

Playwright 테스트 러너는 Playwright 테스트 리포터 설명서 페이지와 같은 CI 도구에 통합할 수 있는 테스트 보고서에 대한 몇 가지 옵션을 제공합니다.

이 자습서에서는 CLI에서 테스트를 보는 것보다 더 쉽게 읽을 수 있는 HTML 보고서 파일로 테스트를 실행합니다.

HTML 테스트 보고서에 대해 다음 명령을 실행합니다.

  1. npx playwright test --browser=all --reporter=html

다음과 같은 결과가 표시됩니다.

Output
Running 9 tests using 2 workers

  9 passed (40s)

To open last HTML report run:

  npx playwright show-report

HTML 보고서를 보려면 다음을 실행하십시오.

  1. npx playwright show-report

다음과 같은 출력이 표시됩니다.

Output
Serving HTML report at http://your_ip_address:9323. Press Ctrl+C to quit.

이제 포트 9323을 통해 보고서에 액세스할 수 있습니다.

참고: 서버에 원격으로 액세스하는 경우 로컬 브라우저에서 테스트 보고서를 보려면 원격 서버를 현재 로컬 시스템에 노출해야 합니다. 로컬 시스템의 새 터미널 세션에서 다음 명령을 실행합니다.

  1. ssh -L 9323:localhost:9323 your_non_root_user@your_server_ip

SSH 포트 전달은 서버 포트를 로컬 포트로 전달합니다. -L 9323:localhost:9323 섹션은 로컬 시스템의 포트 9323이 원격 서버의 동일한 포트로 전달됨을 식별합니다.

이제 로컬 컴퓨터의 브라우저에서 http://localhost:9323으로 이동하여 테스트 보고서를 볼 수 있습니다.

보고서가 브라우저에 로드되면 Chromium, Firefox 및 Webkit의 세 가지 브라우저에서 각 테스트가 실행되었음을 확인할 수 있습니다. 각 브라우저에서 각 테스트를 실행하는 데 걸린 시간과 전체 테스트에 걸린 시간을 알 수 있습니다.

세부 정보를 보려면 보고서 이름을 클릭하십시오.

세부 정보 섹션에서 테스트 실행 단계는 기본적으로 Before Hooks 및 After Hooks 단계를 포함합니다. Before Hooks 섹션은 콘솔에 로그인하거나 테스트 데이터를 읽는 것과 같은 초기 설정에 자주 사용됩니다. 테스트 실행 후 After Hooks 섹션은 종종 테스트 환경에서 테스트 데이터를 정리합니다. page.goto()로 URL 방문, page.waitForLoadState()로 페이지 로드 대기, locator.count()로 메서드를 등록하고 값이 expect.toBe와 일치하는지 확인합니다.

이 단계에서는 세 가지 테스트를 모두 실행하고 통과 상태를 검토했으며 CLI 및 HTML 형식으로 테스트 결과를 확인했습니다. 다음으로 Docker를 사용하여 테스트를 자동화합니다.

4단계 — Docker로 테스트 배포

테스트 자동화를 구현할 때 환경 문제에 직면할 수 있습니다. 일부 테스트는 테스트 엔지니어의 로컬 시스템에서 예상대로 실행되지만 환경 호환성 문제로 인해 CI/CD 파이프라인에 통합되면 실패합니다. 이 문제를 방지하기 위해 Docker 컨테이너를 사용하여 이 단계에서 설정할 자동화 테스트를 실행할 수 있습니다. 테스트가 Docker를 사용하는 로컬 환경에서 예상대로 실행되면 CI/CD 파이프라인에서 호환성 문제를 피할 수 있는 가능성이 높습니다.

먼저 package.json 파일을 업데이트하여 나중에 Docker에서 실행할 필수 테스트 스크립트를 추가합니다. 파일 열기:

  1. nano package.json

package.json 파일의 scripts 섹션에 강조 표시된 줄을 추가합니다.

...
 "scripts": {
  "test": "playwright test --browser=all",
  "test-html-report": "playwright test --browser=all --reporter=html",
  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  },

이 스크립트는 전체 명령을 입력하는 대신 사용자 지정 테스트를 실행합니다. HTML의 리포터 디스플레이로 테스트를 실행해야 하는 경우 이제 다음 명령을 실행할 수 있습니다.

  1. npm run test-html-report

전체 명령 대신:

  1. npx playwright test --browser=all --reporter=html

현재 package.json은 다음과 같습니다.

{
  "name": "playwright-docker",
  "version": "1.0.0",
  "description": "A project for using playwright for end-to-end testing purpose with docker for deployment",
  "main": "index.js",
  "scripts": {
  "test": "playwright test --browser=all",
  "test-html-report": "playwright test --browser=all --reporter=html",
  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "@playwright/test": "^1.22.2",
  "@types/node": "^17.0.35",
  "playwright": "^1.22.1",
  "toml": "^3.0.0",
  "typescript": "^4.6.4"
  }
}

파일을 저장하고 닫습니다.

다음으로 현재 디렉터리에서 Dockerfile을 만들고 엽니다.

  1. nano Dockerfile

그런 다음 다음 콘텐츠를 추가합니다.

# Get the base image of Node version 16
FROM node:16

# Get the latest version of Playwright
FROM mcr.microsoft.com/playwright:focal
 
# Set the work directory for the application
WORKDIR /app
 
# Set the environment path to node_modules/.bin
ENV PATH /app/node_modules/.bin:$PATH

# COPY the needed files to the app folder in Docker image
COPY package.json /app/
COPY tests/ /app/tests/
COPY tsconfig.json /app/
COPY config.toml /app/

# Get the needed libraries to run Playwright
RUN apt-get update && apt-get -y install libnss3 libatk-bridge2.0-0 libdrm-dev libxkbcommon-dev libgbm-dev libasound-dev libatspi2.0-0 libxshmfence-dev

# Install the dependencies in Node environment
RUN npm install

먼저 Docker 이미지에 넣을 Node 버전 16 및 Playwright 버전 focal의 기본 이미지를 가져옵니다. 테스트를 실행하려면 Node와 Playwright가 필요합니다.

그런 다음 컨테이너에서 프로젝트 디렉터리 이름을 설정합니다. 이 경우 WORKDIR입니다. WORKDIR /app를 설정하면 모든 파일이 컨테이너 내부의 /app 디렉토리에 저장됩니다.

ENV PATH를 사용하여 Docker 컨테이너의 환경 경로를 설정합니다. 이 경우 node_modules 디렉터리로 설정합니다.

그런 다음 필요한 모든 파일을 Docker 이미지의 /app 디렉터리에 복사합니다.

Playwright를 실행하려면 일부 종속 항목이 필요하므로 이러한 종속 항목도 Docker 이미지에 설치합니다.

파일을 저장하고 닫습니다.

다음으로 자동화 프로젝트의 이미지를 빌드합니다.

  1. docker build -t playwright-docker .

Docker는 현재 디렉터리에서 Dockerfile을 찾고 Dockerfile 내의 지침에 따라 이미지를 빌드합니다. -t 플래그는 이름을 playwright-docker로 지정하여 Docker 이미지에 태그를 지정합니다. .는 Docker에게 이 현재 디렉터리에서 Dockerfile을 찾도록 지시합니다. Docker 이미지 빌드에 대한 자세한 내용은 Docker 제품 문서를 검토할 수 있습니다.

빌드 출력(간결함을 위해 줄임)은 다음과 유사합니다.

Output
Sending build context to Docker daemon  76.61MB
...
added 6 packages, and audited 7 packages in 6s

found 0 vulnerabilities
Removing intermediate container 87520d179fd1
 ---> 433ae116d06a
Successfully built 433ae116d06a
Successfully tagged playwright-docker:latest

테스트는 초기 설정 중 충돌 종속성 또는 누락된 종속성으로 인해 Windows 또는 MacOS에서 올바르게 실행되지 않을 수 있지만 Docker를 사용하여 테스트를 실행하면 이러한 환경 구성 문제를 방지할 수 있습니다. Docker를 사용하면 기본 이미지에 필요한 모든 종속성이 포함됩니다. Docker가 설치되어 있는 한 다른 운영 체제에서 테스트를 실행할 수 있습니다.

Docker 이미지가 성공적으로 생성되었는지 확인합니다.

  1. docker image ls

결과는 다음과 유사해야 합니다.

Output
REPOSITORY                  TAG     IMAGE ID    CREATED       SIZE
playwright-docker           latest  433ae116d06a   5 minutes ago   1.92GB
mcr.microsoft.com/playwright   focal  bb9872cfd272   2 days ago   1.76GB
node                        16      c6b745e900c7   6 days ago   907MB

playwright-docker(테스트 이미지), microsoft playwright 및 노드 이미지가 있습니다. Docker 설치 전제 조건에서 ubuntu 및 hello-world용 이미지가 있을 수도 있습니다.

이제 docker run을 사용하여 Docker 컨테이너에서 테스트 명령을 실행합니다.

  1. docker run -it playwright-docker:latest npm run test

docker run은 명령으로 지정된 Docker 이미지를 실행합니다. 이 예에서 이미지는 playwright-docker:latest이고 명령은 npm run test입니다. docker run은 먼저 Docker 컨테이너를 불러온 다음 필요한 명령을 실행합니다. Docker 제품 문서에서 자세한 내용을 확인할 수 있습니다.

결과는 다음과 같습니다.

Output
> playwright-docker@1.0.0 test
> playwright test --browser=all


Running 9 tests using 2 workers

  ✓  [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (7s)
  ✓  [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s)
  ✓  [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (8s)
  ✓  [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (9s)
  ✓  [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (8s)
  ✓  [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (5s)
  ✓  [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s)
  ✓  [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (10s)
  ✓  [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s)


  9 passed (41s)

이제 테스트가 Docker 환경에서 성공적으로 실행되었습니다. 자동화 테스트를 CI/CD 파이프라인에 안전하게 통합할 수 있습니다.

이 저장소에서 이 문서에서 생성된 파일을 검토할 수도 있습니다.

결론

이제 엔드투엔드 테스트에 Playwright를 사용하고 Docker로 테스트를 배포했습니다. Playwright에 대한 자세한 내용은 Playwright 설명서를 참조하세요.

다른 Docker 자습서에 대해 읽을 수 있습니다.