Nightwatch.js를 사용하여 웹사이트 테스트를 자동화하는 방법은 무엇입니까? - 파트 2- 테스트 작성

이 블로그를 시작하기 전에 이전 블로그를 따라했는지 확인하세요. 이 블로그는 이전 블로그의 연속입니다.

우리는 먼저 기능 파일을 작성한다는 의미로 테스트 작성에 BDD를 사용할 것입니다. Gherkin을 사용하여 기능 파일을 작성할 것입니다.

Gherkin을 통해 기술 분야 출신이든 아니든 프로젝트에 관련된 모든 사람이 이해하기 쉬운 모국어로 테스트 사례를 작성할 수 있습니다. 자세한 내용은 이 블로그에서 사용되는 일부 키워드와 사용법에 대해 설명하겠습니다. 공식website을 방문하세요.

키워드

Feature : 소프트웨어 기능에 대한 간단한 설명

Scenario : 비즈니스 규칙을 설명하는 단계 목록

통사론

Scenario: name of the scenario
Given [Preconditions or initial context of the system ]
When [Event or action]
Then [Expected output]

기능 파일 작성

tests/acceptance/ 폴더 내부에 폴더 이름feature을 만듭니다. 이 폴더 안에 todo.feature라는 기능 파일을 만들고 이 파일에 시나리오를 작성할 것입니다.

테스트를 작성하고 있는 애플리케이션의 UI는 다음과 같습니다.





할일 항목을 추가하고 제거하기만 하면 됩니다. 이 블로그에서는 항목을 추가하고 항목이 UI에 표시되는지 확인하는 테스트 시나리오를 작성하려고 합니다.

기능 파일todo.feature은 다음과 같습니다.

Feature: todo
  As a user
  I want to add an item to the todo list
  So that I can organize task

  Scenario: Add item to the todo list
    Given a user has navigated to the homepage
    When the user adds "test" to the todo list using the webUI
    Then card "test" should be displayed on the webUI

필요에 따라 동일한 기능 파일에 여러 시나리오를 추가할 수 있습니다.

단계 정의

시나리오를 작성한 후 이를 구현해야 합니다. 이를 위해 stepDefinitions 를 생성합니다. stepDefinitions 안에 폴더tests/acceptance/를 만들고 setDefinitions 안에 파일todo.js을 만듭니다.

scripts 섹션의 package.json에 다음 스크립트를 추가합니다.

"test:e2e": "cucumber-js --require tests/acceptance/cucumber.conf.js --require tests/acceptance/stepDefinitions"

테스트를 실행하기 위해 test:e2e 스크립트를 사용합니다.

셀레늄 서버 실행

Using docker:
docker run -d --network="host" -v /dev/shm:/dev/shm selenium/standalone-chrome-debug

using jar file: (inside the folder where your selenium server and chromedriver files are)
java -jar <name-of-seleniun-server-standalone>.jar -port 4444

이제 터미널로 이동하여 프로젝트의 루트 디렉터리 내부에서 다음 스크립트를 사용하여 기능 파일을 실행합니다.

npm run test:e2e <path-to-yourfeature-file>

나의 경우에는

npm run test:e2e tests/acceptance/feature/todo.feature

위의 스크립트는 전체 기능을 실행합니다. 특정 시나리오를 실행하려는 경우 마지막으로 시나리오의 줄 번호는 다음과 같습니다.

npm run test:e2e tests/acceptance/feature/todo.feature:6

기능 파일을 실행하면 터미널에 이와 유사한 출력이 표시됩니다.

Failures:

1) Scenario: Add item to todo list # tests/acceptance/feature/todo.feature:6
   ? Given a user has navigated to the homepage
       Undefined. Implement with the following snippet:

         Given('a user has navigated to the homepage', function () {
           // Write code here that turns the phrase above into concrete actions
           return 'pending';
         });

   ? When the user adds "clean room" to the todo list using the webUI
       Undefined. Implement with the following snippet:

         When('the user adds {string} to the todo list using the webUI', function (string) {
           // Write code here that turns the phrase above into concrete actions
           return 'pending';
         });

   ? Then card "clean room" should be displayed on the webUI
       Undefined. Implement with the following snippet:

         Then('card {string} should be displayed on the webUI', function (string) {
           // Write code here that turns the phrase above into concrete actions
           return 'pending';
         });


1 scenario (1 undefined)
3 steps (3 undefined)
0m00.001s (executing steps: 0m00.000s)

이러한 코드 템플릿을 복사하여 todo.js 파일에 붙여넣을 수 있습니다. 여기에서 구현을 작성할 것입니다.

 Given('a user has navigated to the homepage', function () {
           // Write code here that turns the phrase above into concrete actions
           return 'pending';
         });

먼저 파일todo.js에서 다음을 가져옵니다.

const {Given, When, Then} = require('@cucumber/cucumber')
const {client} = require('nightwatch-api')

이제 테스트에 포함될 다양한 요소의 CSS 또는 XPath 선택기를 찾으십시오.

//css selectors
const todoInputField = '.todo-input'
const todoCreateButton = '.todo-button'
const todoListItem = '.todo .todo-item'

브라우저에서 개발자 도구를 사용하고 필요한 각 요소를 검사하여 이를 수행할 수 있습니다.



콘솔을 사용하여 요소가 올바른지 확인할 수도 있습니다.


이제 단계를 구현합니다.

Given('a user has navigated to the homepage', function () {
    return client.url("http://localhost:3000");
});


When('the user adds {string} to the todo list using the webUI', async function (item) {
    await client.waitForElementVisible(todoInputField)
        .click(todoInputField)
        .setValue(todoInputField, item)
        .click(todoCreateButton)
    return client
});

Then('card {string} should be displayed on the webUI', function (item) {
    return client.getText(todoListItem, function (result) {
        this.assert.equal(result.value, item)
    })
});

UI의 인덱스 페이지로 이동한 Given 단계에서 이것이 전제 조건입니다. 특정 출력을 달성하기 위해 수행하는 각 작업은 when 단계에서 지정해야 하며 Then 단계에서 expected output가 달성되었는지 여부를 확인합니다. 사용된 API 명령어는 nightwatch의 공식 웹사이트에서 확인할 수 있습니다.

전체 코드는 다음과 같습니다.

const {Given, When, Then} = require('@cucumber/cucumber')
const {client} = require('nightwatch-api')

//css selectors
const todoInputField = '.todo-input'
const todoCreateButton = '.todo-button'
const todoListItem = '.todo .todo-item'

Given('a user has navigated to the homepage', function () {
    return client.url("http://localhost:3000");
});


When('the user adds {string} to the todo list using the webUI', async function (item) {
    await client.waitForElementVisible(todoInputField)
        .click(todoInputField)
        .setValue(todoInputField, item)
        .click(todoCreateButton)
    return client
});

Then('card {string} should be displayed on the webUI', function (item) {
    return client.getText(todoListItem, function (result) {
        this.assert.equal(result.value, item)
    })
});

이제 테스트를 다시 실행할 수 있으며 통과해야 합니다.

npm run test:e2e tests/acceptance/feature/todo.feature                                

> [email protected] test:e2e
> cucumber-js --require tests/acceptance/cucumber.conf.js --require tests/acceptance/stepDefinitions "tests/acceptance/feature/todo.feature"

ℹ Connected to localhost on port 4444 (328ms).
  Using: chrome (87.0.4280.66) on linux platform.

..√ Element <.todo-input> was visible after 69 milliseconds.
.√ Passed [equal]: clean room == clean room
..

1 scenario (1 passed)
3 steps (3 passed)
0m06.385s (executing steps: 0m06.353s)

짜잔, 합격 테스트를 성공적으로 작성하고 구현했습니다! 프로젝트와 필요에 따라 더 많은 테스트와 기능을 추가할 수 있습니다. 이 블로그가 도움이 되었기를 바랍니다!

소스 코드here를 찾을 수 있습니다.