엔드 투 엔드 테스트 작성 스타일 가이드

이 문서는 GitLab에서 GitLab QA 프로젝트를 사용하여 엔드 투 엔드(E2E) 테스트를 작성하는 데 사용되는 규칙을 설명합니다.

이 가이드는 기본 테스트 표준 및 스타일 지침의 확장판입니다. 이 가이드가 기본 가이드와 충돌하는 규칙을 정의하면 이 가이드가 우선합니다.

click_ 대 go_to_

click_을 사용하는 경우

특정 링크를 선택하여 이동해야 할 때 click_을 사용합니다.

예: 

def click_add_badge_button
  click_element 'add-badge-button'
end

테스트 관점에서, 우리가 링크나 버튼(단일 상호작용)을 선택해서 의도한 대로 작동하는지 확인하려면 테스트가 다음과 같이 돼야 합니다.

  • 특정 요소 선택
  • 동작이 발생했는지 확인

go_to_를 사용하는 경우

페이지로 이동하기 위해 여러 요소와 상호작용할 때 go_to_를 사용합니다.

예: 

def go_to_applications
  click_element('nav-item-link', submenu_item: 'Applications')
end

go_to_는 여러 요소와 상호작용하기 때문에 메타 탐색 동작에 잘 맞습니다.

위의 예에서 알 수 있듯이 'nav-item-link'를 선택하기 전에 다른 요소를 호버하고 있습니다.

우리는 이러한 메소드를 다단계 탐색을 추상화하기 위한 도우미로 만들 수 있습니다.

요소 명명 규칙

페이지에 새 요소를 추가할 때 일관된 요소 명명 규칙을 가져야 합니다.

우리는 헝가리식 표기법을 기반으로 한 간단한 공식을 따릅니다.

공식: element :<descriptor>_<type>

  • descriptor: 요소의 자연어 설명. 로그인 페이지에서는 username 또는 password일 수 있습니다.
  • type: 사용자에 의해 볼 수 있는 페이지의 일반적인 컨트롤.
    • -button
    • -checkbox
    • -container: 다른 요소를 포함하지만 본인으로는 가시적인 콘텐츠가 없는 요소. 예를 들어, 요소 내부에 타사 편집기가 있는 것이지만 편집기 자체도 포함되어 있지 않고 편집기의 콘텐츠를 포함하지 않습니다.
    • -content: 사용자에게 표시되는 텍스트, 이미지 또는 다른 콘텐츠를 포함하는 모든 요소.
    • -dropdown
    • -field: 텍스트 입력 요소.
    • -link
    • -modal: 팝업 모달 대화상자, 예를 들어, 확인 프롬프트.
    • -placeholder: 콘텐츠가 로드되는 동안 표시되는 임시 요소. 예를 들어, 토론 대신 표시되는 요소.
    • -radio
    • -tab
    • -menu_item

참고: 위의 목록 중 어느 것도 적절하지 않은 경우 목록에 적절한 유형을 추가하려면 MR(병합 요청)을 엽니다.

예시

좋은 예 

view '...' do
  element 'edit-button'
  element 'notes-tab'
  element 'squash-checkbox'
  element 'username-field'
  element 'issue-title-content'
end

나쁜 예 

view '...' do
  # `'-confirmation'`은 `'-field'`여야 합니다. 어떤 확인인가요? 체크박스 확인인가요? 명확히 구분하는 방법이 없습니다.
  # 적절한 대체사례는 `element 'password-confirmation-field'`일 것입니다.
  element 'password-confirmation'

  # `'clone-options'`은 너무 모호합니다. 드롭다운 메뉴라면 `'clone-dropdown'`여야 합니다.
  # 체크박스라면 `'clone-checkbox'`여야 합니다.
  element 'clone-options'

  # 이 URL은 어떻게 표시되고 있나요? 텍스트 상자인가요? 간단한 스팬인가요?
  # 페이지의 콘텐츠라면 `'ssh-clone-url-content'`여야 합니다.
  element 'ssh-clone-url'
end

블록 인자 명명

.perform 메소드를 사용할 때 페이지와 리소스를 어떻게 부를지에 대한 표준이 필요하며, 우리는 스네이크 케이스의 페이지 오브젝트 이름을 사용합니다. (모든 글자를 소문자로 쓰고 밑줄로 단어를 구분하는 방식). 좋은 예와 나쁜 예를 아래에서 볼 수 있습니다.

대부분의 경우 표준을 따르기를 선호하지만, 이름이 모호하지 않은 한, 일반적인 축약 (예를 들어 mr)이나 다른 대안을 사용하는 것도 허용됩니다. 이는 혼동을 피하거나 코드를 더 읽기 편하게 만들기 위해 _page를 추가하는 것도 포함됩니다. 예를 들어, 페이지 오브젝트의 이름이 New인 경우 new로 블록 인자를 지정하는 것은 혼동스러울 수 있으므로 new_page가 허용될 것입니다.

우리는 page를 사용하지 않기로 선택했는데, 그것은 잠재적으로 혼란과 버그를 일으킬 수 있는 Capybara DSL을 가려서 그렇습니다.

예시

좋은 예 

Page::Project::Members.perform do |members|
  members.do_something
end

Resource::MergeRequest.fabricate! do |merge_request|
  merge_request.do_something_else
end

Resource::MergeRequest.fabricate! do |mr|
  mr.do_something_else
end

Page::Project::New.perform do |new_page|
  new_page.do_something
end

나쁜 예 

Page::Project::Members.perform do |project_settings_members_page|
  project_settings_members_page.do_something
end

Page::Project::New.perform do |page|
  page.do_something
end

표준을 따름으로써 우리가 일관된 장점 외에도, 이러한 표준을 따르면 더 짧은 코드 줄을 작성할 수 있습니다.