Cypress를 사용하여 Bonita UI 디자이너 페이지 테스트 방법

일단 Bonita UI 디자이너 페이지를 만들면 테스트는 매우 중요하다.
Bonita UI 디자이너를 사용하여 만든 페이지를 테스트하기 위해 저희 팀은 e2e 프레임워크로 전환하기로 결정했습니다. 이 프레임워크는 신속하게 설정할 수 있고 테스트를 효율적으로 작성할 수 있습니다.
우리는 Cypress 를 사용하기로 결정했습니다. 이것은 원본을 시작하는 자바스크립트 프레임워크입니다. 반구조화 테스트를 작성할 수 있도록 합니다.

선결 조건

본고의 기능을 완전히 파악하려면 당신은 두 가지 기술을 익혀야 합니다.
우선, 본고는 Bonita UI Designer를 사용하여 간단한 페이지를 만들어서 사용자를 등록할 수 있도록 합니다.
그리고 본고는 Cypress의 두 가지 테스트 용례를 제시했는데 이 도구의 모든 잠재력을 깊이 파고들지 못했다.만약 네가 그것의 다른 가능성을 발견하는 것에 흥미가 있다면, 나는 그들의 documentation 를 보라고 건의한다.
이 문서에서 논의한 모든 내용은 github 저장소에서 찾을 수 있습니다.
제가 토론할 두 가지 테스트는 저장소에서 유일한 테스트가 아니기 때문에 더 많은 예시를 보고 싶으면 저장소를 복제해서 볼 수 있습니다.

깊이 있는 페이지 구조

우리 이 페이지부터 시작합시다.새 사용자를 만들기 위해 여러 필드를 포함하는 폼 용기가 있습니다.오류와 성공 시 표시되는 메시지와 불러오는 메시지를 볼 수 있습니다.사용자가 페이지에서 어떤 작업을 수행하면 3초 후에 성공이나 오류 메시지가 사라집니다.우리는 보통 이 기능을 사용하여 축배사를 시뮬레이션해서 사용자의 화면을 막지 않는다.

테스트 선택

더 이상 말할 필요 없어, 우리 테스트 얘기 좀 하자.
측백나무 테스트는 두 개의 다른 부분으로 구성되어 있다.첫 번째는 한 파일에서 테스트 장면을 작성하는 것이고, 두 번째는 코드로 장면의 줄마다 무엇을 하는지 설명하는 것이다.
cypress Cumber 프로세서 라이브러리는 주어진 when-then 스타일로 장면을 작성하는 데 사용됩니다.
내가 토론하고자 하는 두 가지 테스트는 다음과 같다.

암호가 일치하지 않아 사용자 생성 실패

사용자를 생성할 때 표시되는 로더

내가 첫 번째로 선택한 것은 이것이 테스트이기 때문이다. 우리는 이미 페이지에서 여러 번 반복했지만, 약간 미묘하다.대부분의 경우, 우리는 정확한 매개 변수와 정확한 응답을 사용하여 정확한 API 호출을 했는지 확인합니다.이런 상황에서 이것들은 모두 필요한 것이 아니다. 왜냐하면 암호 평등 테스트는 클라이언트에서 진행되기 때문이다.따라서 검사해야 할 또 다른 것은 API 호출이 없으면 API 호출이 필요하지 않기 때문이다.
두 번째를 선택한 것은 나에게 매우 재미있는 용례를 묘사했기 때문이다. 또한 장면의 구축 블록은 여러 가지 상황에서 유용할 수 있기 때문이다. 예를 들어 메시지가 3초 후에 사라지는지 확인하는 테스트이다.

암호가 다르기 때문에 테스트 사용자 생성 실패

첫 번째 테스트 장면을 이야기합시다.

Given The server is started
And API call response for "user creation should not be called" is mocked
When I visit the index page
And All inputs are filled
And I modify the password field
And I try to create the user
Then I see the message about "Passwords don't match."

이 테스트의 목적은 사용자 API에 대한 API 호출이 없는지, 비밀번호가 일치하지 않는다는 메시지가 있는지 확인하는 것입니다.
API 호출이 이루어지지 않았는지 확인하기 위해서, 우리는 실제적으로 응답을 만들지 않은 상황에서 사용자 API로 라우팅할 수 있지만, 오류만 던질 수 있습니다.

cy.route({
   method: "POST",
   url: userAPI,
   onRequest: () => {
       throw new Error("This should have not been called");
   }
});

모든 것이 계획대로 진행되고 있음을 검증하기 위해 우리는 이 페이지를 방문했다.

cy.visit(url);

이후에 우리는 정보로 모든 입력을 채웠다.

cy.get("input").eq(0).type("walter.bates");
cy.get("input").eq(1).type("bpm");
cy.get("input").eq(2).type("bpm");
cy.get("input").eq(3).type("Walter");
cy.get("input").eq(4).type("Bates");

그런 다음 암호 확인 값과 일치하지 않도록 암호를 수정합니다.

cy.get("input").eq(1).type("incorrect");

페이지의 마지막 작업은 사용자를 만드는 것입니다.

cy.contains("button", "Create").click();

이 특정 상황을 설정한 후, 우리는 "비밀번호 불일치"를 테스트하고 싶다정보가 페이지에 나타납니다.

cy.contains("p", message).should("be.visible");

테스트 실행 프로그램을 시작하면 테스트가 실행되고 성공하는 것을 볼 수 있습니다.

사용자를 만들 때 표시되는 로더 테스트

이 테스트의 장면은 로드 프로그램의 표시를 바탕으로 하고 로드 프로그램이 5초 후에 사라졌는지 확인합니다.

Given The server is started
And API call response for "user created after delay" is mocked
When I visit the index page
And All inputs are filled
And I try to create the user
Then The loader is shown
When I wait for 5000 delay
Then I see the message about "User successfully created."
And The loader is not shown

보시다시피 이 테스트의 일부분은 첫 번째 테스트의 일부분과 같습니다.서로 다른 주요 내용은 API 시뮬레이션의 정의, 로더의 표시 여부, 5초 대기 및 페이지의 종료 상태 확인입니다.
5초 후에 API 응답을 시뮬레이션하여 사용자 API가 응답을 받지 못했기 때문에 로드가 표시됩니다.
답변은 포털에서 받은 답변과 같아서 현실에 가깝습니다.

cy.fixture("json/userCreatedResponse.json").as("userCreated");
cy.route({
   method: "POST",
   url: userAPI,
   delay: 5000,
   response: "@userCreated"
}).as("userCreatedRoute");

사용자를 만들 때, 우리는 로더가 표시되었는지 확인합니다.

cy.get(".glyphicon.glyphicon-cog.gly-spin").should("be.visible");
cy.contains("p", "Creating user.").should("be.visible");

그리고 우리는 5초를 기다렸다.

cy.wait(time);

5초 후, 응답이 도착했을 때, 우리는 메시지가 사라졌는지 검사합니다.

cy.get(".glyphicon.glyphicon-cog.gly-spin").should("not.be.visible");
cy.contains("p", "Creating user.").should("not.be.visible");

보시다시피 이 테스트들은 작성 시간이 길지 않고 기능이 매우 강력합니다.
경탄했어이제 Cypress 테스트 UI 디자이너 페이지를 사용하는 방법을 알고 계십니다!저희web-pages project에 현재 개발 중인 페이지가 포함되어 있습니다.