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)" ]
};
...

s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ] }; ...

농담 오이 설치

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

npm install --save-dev jest-cucumber

npm install --save-dev jest-cucumber

기본 기능 파일 생성

폴더 기능을 만들고 거기에 기능
파일 NavigateToWebsite.feature

를 만듭니다.

npm install --save-dev jest-cucumber

프로젝트_루트/ ├─ Askui_example/ ├─ 특징/ ├─ NavigateToWebsite.feature ├─ node_modules/ ├─ ...

다음 기본 기능
을 이 파일에 작성합니다.

npm install --save-dev jest-cucumber

기능: 웹사이트로 이동 시나리오: 브라우저 주소 표시줄에 올바른 URL 입력 내가 Google 검색 페이지에 있다고 가정해 보겠습니다. AskUI 연습 페이지 URL을 입력하면 그런 다음 웹페이지에 접속하겠습니다.

단계 정의 구현 생성

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

npm install --save-dev jest-cucumber

'jest-cucumber'에서 { 정의 기능, 로드 기능 } 가져오기; import { aui } from './helpers/askui-helper'; // 기능 파일 로드 const feature = loadFeature('features/NavigateToWebsite.feature'); DefineFeature(기능, 테스트 => { // 기능 파일의 'Scenario'에 매핑됩니다. test('브라우저 주소 표시줄에 올바른 URL을 입력합니다', ({ 주어진, when, then }) => { 주어진('나는 Google 검색 페이지에 있습니다.', async () => { aui.moveMouse(500, 500).exec()를 기다립니다. aui.mouseLeftClick().exec()를 기다립니다. wait aui.pressTwoKeys('command', 't').exec(); }); when('AskUI 연습 페이지의 URL을 입력했습니다.', async () => { wait aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec(); aui.pressKey('enter').exec()를 기다립니다; }); then('웹페이지로 이동하겠습니다.', async () => { wait aui.expect().text('AskUI 실습 페이지에 오신 것을 환영합니다.').exists().exec(); }); }); });

워크플로 실행

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

npm install --save-dev jest-cucumber

npm 실행 askui

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

결론

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