극작가와 오이 통합으로 ETest 강화

소개

이 게시물에서는 Playwright와 Cucumber가 엔드투엔드(E2E) 테스트를 위한 탁월한 도구인 이유를 안내해 드리겠습니다. 그런 다음 JavaScript 프런트엔드 애플리케이션에서 원활한 사용을 위해 Playwright를 통합하는 단계를 살펴보겠습니다. 마지막으로 Playwright와 함께 효율성을 극대화할 수 있는 몇 가지 전문가의 팁을 공유하겠습니다.

왜 극작가와 오이인가?

E2E 테스트 스위트를 구축할 수 있는 도구는 많지만 Playwright와 Cucumber의 시너지 효과를 따라올 수 있는 도구는 없습니다.

Playwright가 E2E 테스트 작성 분야에서 두각을 나타내는 이유는 다음과 같습니다.

• 1. 모든 브라우저, 모든 플랫폼, 하나의 API
  • 아. 크로스 브라우저. Playwright는 Chromium, WebKit, Firefox를 포함한 모든 최신 렌더링 엔진을 지원합니다.
  • ㄴ. 크로스 플랫폼. Windows, Linux 및 macOS, 로컬 또는 CI(헤드리스 또는 헤드 없음)에서 테스트하세요.
  • ㄷ. 교차 언어. TypeScript, JavaScript, Python, .NET 및 Java에서 Playwright API를 사용하세요.
• 2. 탄력성, 불안정한 테스트 없음
  • 아. 자동 대기. 극작가는 작업을 수행하기 전에 요소가 실행 가능해질 때까지 기다립니다.
  • ㄴ. 웹 우선 어설션. 극작가 어설션은 동적 웹을 위해 특별히 생성되었습니다.
• 3. 강력한 툴링
  • 아. 코드젠. 작업을 기록하여 테스트를 생성합니다. 어떤 언어로든 저장하세요.
  • ㄴ. 극작가 검사관. 페이지를 검사하고, 선택기를 생성하고, 테스트 실행을 단계별로 진행하고, 클릭 지점을 확인하고, 실행 로그를 살펴보세요.

그러나 Cucumber가 없으면 테스트 코드를 관리하는 것이 유지 관리의 악몽이 될 수 있습니다. Cucumber는 사람이 읽을 수 있는 일반 언어로 쓰기 테스트를 용이하게 하여 기술적 지식이 없는 이해관계자도 쉽게 접근할 수 있도록 해줍니다. 행동 중심 개발(BDD)의 초석인 Cucumber는 기술 문서 역할을 하며 새로운 엔지니어의 온보딩을 가속화합니다.

극작가와 오이의 통합

1단계: 종속성 설치

npm 또는 Yarn을 사용하여 필요한 패키지를 설치합니다.

npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

2단계: 프로젝트 구조 설정

다음과 같이 프로젝트를 구성하세요.

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

3단계: 오이 구성

다음 내용으로 프로젝트 루트에 오이 구성 파일(cucumber.js 파일)을 만듭니다.

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};

4단계: 테스트 보고 구성

cucumber.report.js 만들기 - 테스트 보고서를 구성하기 위한 파일입니다. 구성 옵션은 여기에서 찾을 수 있습니다

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};

5단계: 기능 파일 작성

기능 디렉토리에 기능 파일을 생성합니다(예: example.feature:

npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

6단계: 단계 정의 작성

steps 디렉토리에 단계 정의 파일을 생성합니다(예: example.steps.js:

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

7단계: NPM 테스트 스크립트 추가

package.json에 스크립트를 추가하여 테스트를 실행하세요.

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};

동시에 npm 패키지는 동일한 테스트에서 두 프로세스를 실행할 수 있는 편리한 도구입니다. E2E 테스트를 실행하려면 때로는 로컬로, 때로는 원격으로 애플리케이션도 실행해야 합니다.

8단계: 테스트 실행

테스트 실행:

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};

극작가 전문가 팁

• 1. 오류 메시지 - 주의 깊게 읽으십시오. 종종 문제를 정확히 지적합니다.
• 2. 반복 개발 - 작은 코드 덩어리를 테스트하여 문제를 격리하고 해결합니다.
• 3. Playwright Inspector - 동작을 기록하고 테스트 스크립트를 자동으로 생성하는 데 도움이 되므로 코드 조각만 작성하면 됩니다. 아래와 같이 Playwright Inspector를 시작할 수 있습니다.

// filepath: /e2e/features/example.feature
Feature: Example feature

  Scenario: Open a webpage
    Given I open the "https://example.com" page
    Then the title should be "Example.com"

• 4. 콘솔 메시지 로그 - 아래와 같이 헤드리스 모드에서 브라우저 콘솔 메시지를 인쇄합니다.

// filepath: /e2e/steps/example.steps.js
import { Before, Given, Then, setDefaultTimeout, After } from '@cucumber/cucumber';
import { chromium, expect } from 'playwright';

setDefaultTimeout(30 * 1000); //milliseconds
let browser, page, context;

Before(async function(){
  browser = await chromium.launch({headless: true});
  context = await brwoser.newContext();
  page = await content.newPage();
});

Given('I open the {string} page', async function (url) {
  await page.goto(url);
});

Then('the title should be {string}', async function (title) {
  const pageTitle = await page.title();
  expect(pageTitle).toHaveText(title);
});

After(async function(){
  await context.close();
  await browser.close();
});

• 5. 지연 로딩 처리 - 지연 로딩 요소의 경우 다음 기능을 사용하십시오.
  • 아. waitForSelector 또는 waitFor
  • ㄴ. waitForTimeout
  • ㄷ. 스크롤IntoView필요한 경우
• 6. DOM 디버그 - 브라우저 콘솔에서 document.querySelector 또는 기타 쿼리 선택기를 사용하여 요소를 찾습니다
• 7. 실패 화면 캡처

여기까지 오셨다면 계속 읽으실 수 있도록 최선을 다한 것입니다. 의견을 남기거나 수정 사항을 공유해 주시기 바랍니다.

내 다른 블로그:

• 웹 구성 요소/MFE를 일반 정적 HTML과 통합
• 소프트웨어 엔지니어링 인터뷰 크래킹
• 웹 구성 요소에 대한 직접적인 경험 - 학습 및 한계
• 마이크로 프론트엔드 결정 프레임워크
• Postman 도구를 사용하여 SOAP 웹 서비스 테스트

위 내용은 극작가와 오이 통합으로 ETest 강화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!