WebdriverIO, JavaScript 및 Cucumber와 함께하는 고급 BDD 자동화 마스터

Source: Dev.to

번역을 진행하려면 번역하고자 하는 전체 텍스트(코드 블록 및 URL을 제외한 본문)를 제공해 주시겠어요? 텍스트를 주시면 원본 형식과 마크다운을 유지하면서 한국어로 번역해 드리겠습니다.

오늘날 빠르게 변화하는 개발 환경에서 개발자, 테스터, 이해관계자 간의 효과적인 커뮤니케이션은 필수입니다.

JavaScript용 Cucumber BDD는 기술적인 팀원과 비기술적인 팀원을 연결해 주는 강력한 솔루션을 제공합니다. 자연스럽고 사람이 읽을 수 있는 언어로 테스트를 작성하면 모두가 비즈니스 관점에서 애플리케이션의 동작을 이해할 수 있습니다.

이번 블로그에서는 다음 내용을 다룹니다:

• JavaScript에서 Cucumber BDD 구현하기
• 처음부터 환경 설정하기
• 기능 파일 생성 및 실행하기
• JavaScript 테스트 자동화 워크플로에 BDD 통합하기

Cucumber BDD가 JavaScript에서 협업을 향상시키고, 테스트 커버리지를 확대하며, 테스트 프로세스를 보다 효율적으로 만드는 방법을 배워보세요!

Source: …

Behavior‑Driven Development (BDD)와 JavaScript를 활용한 Cucumber

BDD 개요, Cucumber 기본 사항 및 환경 설정에 대해서는 블로그 “Cucumber BDD in JavaScript.” 를 참고하세요.

JavaScript는 Cucumber와 어떻게 통합될까?

JavaScript를 사용해 Cucumber 테스트를 작성할 수 있어, JavaScript 개발자도 BDD의 장점을 활용할 수 있습니다. Cucumber‑JS는 Cucumber의 JavaScript 구현체로, BDD 테스트를 작성·실행·관리할 수 있게 해줍니다.

JavaScript와 Cucumber를 통합하기 위한 기본 단계

1. Gherkin으로 Feature 작성 – Feature 파일은 Gherkin 문법으로 작성됩니다. 시스템의 동작을 영어(또는 다른 자연어)로 서술합니다.
2. Step Definitions – Feature를 작성한 뒤, JavaScript 단계 정의를 통해 Gherkin 단계와 실제 JavaScript 코드를 매핑합니다.
   예시: Given I am on the homepage 단계에 대응하는 JavaScript는 홈 페이지로 이동하는 동작을 구현합니다.
3. 테스트 실행 – Cucumber‑JS가 Feature 파일의 시나리오를 실행하고 각 단계를 해당 JavaScript 정의와 매칭합니다.
4. Assertions – 단계 정의 안에서 JavaScript 어설션(예: Chai 또는 Jest)을 사용해 기대 동작을 검증합니다.

예시: JavaScript와 통합된 Cucumber

Feature 파일 (login.feature)

Feature: User Login

  Scenario: Successful login with valid credentials
    Given I am on the login page
    When I enter a valid username and password
    And I click the login button
    Then I should be redirected to the dashboard
    And I should see a welcome message

Step Definitions (loginSteps.js)

const { Given, When, Then } = require('@cucumber/cucumber');
const { expect } = require('chai');
const LoginPage = require('../pages/LoginPage');

Given('I am on the login page', async () => {
  await LoginPage.open();
});

When('I enter a valid username and password', async () => {
  await LoginPage.login('validUser', 'validPass');
});

When('I click the login button', async () => {
  await LoginPage.submit();
});

Then('I should be redirected to the dashboard', async () => {
  const url = await browser.getUrl();
  expect(url).to.include('/dashboard');
});

Then('I should see a welcome message', async () => {
  const message = await LoginPage.getWelcomeMessage();
  expect(message).to.equal('Welcome, validUser!');
});

이 예시에서

• Gherkin은 인간이 읽을 수 있는 형식으로 동작을 정의합니다.
• JavaScript는 loginSteps.js 파일에 실제 테스트 단계를 제공하며, 각 Gherkin 단계를 애플리케이션과 상호작용하는 함수에 매핑합니다.
• Chai 어설션을 사용해 테스트가 기대대로 동작하는지 검증합니다.

왜 JavaScript와 함께 Cucumber를 사용해야 할까요?

첫 번째 Cucumber 피처 파일 작성하기

Cucumber는 테스트를 일반 언어(Gherkin)로 작성하므로 기술적인 이해가 없는 이해관계자도 읽고 이해할 수 있습니다. .feature 파일에는 특정 문법으로 작성된 테스트 시나리오가 들어갑니다.

.feature 파일 만들기

피처 파일은 .feature 확장자를 가진 간단한 텍스트 파일입니다. 포함되는 내용은 다음과 같습니다:

• Feature – 기능에 대한 짧은 설명.
• Scenario – 기능이 어떻게 동작해야 하는지를 보여주는 구체적인 예시.
• Steps – Given, When, Then, And, But 구문으로 사전 조건, 행동, 기대 결과를 설명합니다.

예시:

Feature: Search functionality

  Scenario: Users can search for products
    Given the user is on the homepage
    When the user enters "laptop" into the search bar
    And the user clicks the search button
    Then the search results page should display items related to "laptop"

위 코드를 search.feature 라는 이름으로 프로젝트의 features/ 디렉터리 안에 저장하고, JavaScript 로 해당 스텝 정의를 만든 뒤 Cucumber‑JS 로 테스트를 실행합니다.

TL;DR

• Cucumber‑JS 를 사용하면 JavaScript 로 BDD 테스트를 작성할 수 있습니다.
• Gherkin 으로 피처 파일을 작성하고, JavaScript 로 스텝 정의와 매핑한 뒤, Cucumber‑JS 로 실행하며 Chai/Jest 로 결과를 검증합니다.
• 이 방법은 협업을 강화하고, 살아있는 문서를 만들며, 인기 있는 웹·모바일 테스트 프레임워크와 원활하게 통합됩니다.

테스트 즐겁게 하세요! 🚀

기능 수준 설명

기능이 어떻게 동작해야 하는지를 보여주는 모든 시나리오는 .feature 파일에 포함됩니다.

.feature 파일 구조 방법

간단한 기능 파일 예시

이 기능 파일은 Gherkin 구문으로 작성되었으며, 유효한 자격 증명을 사용해 웹사이트에 로그인하는 사용자의 동작을 설명합니다.

Given, When, Then 단계가 포함된 시나리오

단일 단계 내에서 여러 조건을 그룹화하려면 And와 But를 사용할 수도 있습니다:

이 예시에서 And는 “When”와 “Then” 섹션에 추가 단계를 더합니다.

피처 파일 구조 이해

일반적인 피처 파일은 여러 핵심 구성 요소로 이루어집니다:

• Feature: 테스트하고 있는 피처의 이름이며, 선택적으로 짧은 설명이 뒤따를 수 있습니다.
  예시: Feature: User Login – 이 피처가 포함하는 내용에 대한 간략한 설명.
• Scenario: 각 시나리오는 특정 테스트 케이스 또는 사용 사례를 나타냅니다 (BDD의 “테스트” 부분).
  피처가 어떻게 작동해야 하는지에 대한 구체적인 예시를 제공합니다.
• Steps: 키워드 Given, When, Then, And, But 로 정의됩니다.
  발생하고 있는 행동 또는 발생해야 할 행동을 설명합니다.

여러 시나리오가 포함된 확장 예시

JavaScript와 Cucumber 연결

Gherkin을 사용하면 거의 사람이 읽을 수 있는 형식으로 자동화된 수용 테스트를 작성할 수 있습니다. 이러한 테스트를 JavaScript 단계 정의와 연결하여 JavaScript 환경에서 실행합니다.

다음 섹션에서는 다음을 배웁니다:

1. JavaScript용 Cucumber 설정 – 종속성을 설치하고 프로젝트를 초기화합니다.
2. 단계 정의 만들기 – Gherkin 단계와 JavaScript 함수를 매핑합니다.
3. 비동기 작업 처리 – 프로미스, API 호출 등을 위해 async/await를 사용합니다.

전체 블로그 읽기

Connecting Cucumber with JavaScript – Full Guide