AskUI와 Cucumber를 함께 사용

AskUI와 Cucumber를 함께 사용

행동 중심 개발(BDD)은 Gherkin과 같은 구조화된 형식으로 시스템 동작을 정의함으로써 팀이 이해관계자, 테스터 및 개발자 간의 격차를 해소하고 오해를 피하고 재작업을 줄일 수 있도록 해줍니다. 공동 접근 방식으로 BDD는 모든 당사자가 처음부터 협력하여 모든 사람이 함께 일할 수 있도록 장려합니다
동일한 페이지에 해당 요구 사항이 정확하게 포착되어 있습니다.

이 프로세스에서 Cucumber는 BDD를 구현하는 데 사용되는 널리 사용되는 도구로, 이를 통해 팀은 시스템이 예상대로 작동하는지 확인하는 명확하고 실행 가능한 테스트를 작성할 수 있습니다.

이 블로그 게시물에서는 BDD 원칙을 사용하여 AskUI 워크플로를 정의하기 위해 AskUI와 함께 Cucumber를 설정하는 방법을 보여 드리겠습니다.

전제조건

• 시스템에 AskUI가 설치 및 구성되어 있습니다(Windows, Linux, macOS)

• 초기화 후 Askui_example/my-first-askui-test-suite.test.ts 삭제

설정 준비

오이는 아직 AskUI의 기본 설정에서 제대로 작동하지 않습니다(버전 0.20.3). AskUI가 Cucumber를 잘 사용하려면 AskUI가 Jest를 실행자로 사용하므로 두 가지 작은 준비를 수행해야 합니다.

1. Jest의 testEnvironmentOptions 변경

askui_example/helpers/jest.config.ts 파일에서 실행 보고서에 포함되는 코드를 비활성화해야 합니다. addCodeInReport 속성이 false로 설정된 testEnvironmentOptions 속성을 추가하면 이를 달성할 수 있습니다.

const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
};
...

2. Jest에게 단계 정의 구현 위치를 알려주세요.

또한 Askui_example/helpers/jest.config.ts에서 기본 testMatch 속성을 확장해야 합니다. 구현을 여기에 저장하므로 step.ts로 끝나는 파일을 포함해야 합니다.

...
const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
  testMatch: [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test|step).[jt]s?(x)" ]
};
...

농담 오이 설치

Jest를 Cucumber와 함께 사용하는 가장 쉬운 방법은 npm-package jest-cucumber입니다. 다음 명령으로 설치해 보겠습니다.

npm install --save-dev jest-cucumber

기본 기능 파일 생성

폴더를 만들고 거기에 Feature 파일 NavigateToWebsite.feature
를 만듭니다.

project_root/
├─ askui_example/
├─ features/
  ├─ NavigateToWebsite.feature
├─ node_modules/
├─ ...

다음 기본 기능을 이 파일에 작성하세요.

Feature: Navigate to a website

Scenario: Entering the correct URL into the browser address bar
  Given I am on the Google search page
  When I type in the URL for AskUI practice page
  Then I will land on the webpage

단계 정의 구현 생성

각 테스트가 특정 시나리오에 매핑되는 단계 정의 파일 Askui_example/navigate-to-url.step.ts를 만듭니다.

import { defineFeature, loadFeature } from 'jest-cucumber';
import { aui } from './helpers/askui-helper';

// Load the feature file
const feature = loadFeature('features/NavigateToWebsite.feature');

defineFeature(feature, test => {

  // Maps to 'Scenario' in your feature file
  test('Entering the correct URL into the browser address bar', ({ given, when, then }) => {

    given('I am on the Google search page', async () => {
      await aui.moveMouse(500, 500).exec();
      await aui.mouseLeftClick().exec();
      await aui.pressTwoKeys('command', 't').exec();
    });

    when('I type in the URL for AskUI practice page', async () => {
      await aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec();
      await aui.pressKey('enter').exec();
    });

    then('I will land on the webpage', async () => {
      await aui.expect().text('Welcome to the AskUI Practice Page').exists().exec();
    });

  });
});

워크플로 실행

브라우저를 전체 화면으로 열고 다음을 사용하여 워크플로를 시작하세요.

npm run askui

워크플로 실행이 새 탭을 열고 AskUI의 연습 페이지로 이동하는 것을 볼 수 있습니다.

결론

AskUI와 Cucumber를 결합하면 BDD 스타일로 AskUI 워크플로를 작성할 수 있습니다. 실제 인간 사용자처럼 테스트를 실행하면 모든 이해관계자가 더욱 현실적으로 테스트를 수행할 수 있습니다.

위 내용은 AskUI와 Cucumber를 함께 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!