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

이 문서는 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_는 다중 요소와의 상호 작용을 포함하는 메타 네비게이션 동작에 매우 적합하여 여러 상호 작용을 포함한다는 정의와 잘 맞습니다.

위 예시에서 :operations_environments_link를 선택하기 전에 다른 요소 위로 마우스를 옮깁니다.

우리는 이러한 메서드를 도우미로 생성하여 다단계 네비게이션을 추상화할 수 있습니다.

요소 명명 규칙

페이지에 새 요소를 추가할 때, 통일된 요소 명명 규칙을 갖는 것이 중요합니다.

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

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

  • descriptor: 요소의 자연어 설명. 로그인 페이지의 경우 username 또는 password일 수 있습니다.
  • type: 사용자가 볼 수 있는 페이지의 일반 컨트롤.
    • _button
    • _checkbox
    • _container: 다른 요소를 포함하지만 자체적으로 가시적인 내용을 제공하지 않는 요소. 예를 들어, 요소 내에 타사 편집기가 있는 요소지만 편집기 자체는 아니고 편집기의 내용을 포함하지 않는 요소.
    • _content: 사용자에게 표시되는 텍스트, 이미지 또는 다른 모든 내용을 포함하는 요소.
    • _dropdown
    • _field: 텍스트 입력 요소.
    • _link
    • _modal: 팝업 모달 대화 상자, 예를 들어 확인 프롬프트.
    • _placeholder: 콘텐츠가 로드되는 동안 표시되는 임시 요소. 예를 들어, 토론 대신에 표시되는 요소들.
    • _radio
    • _tab
    • _menu_item

참고: 위에 나열된 유형이 적합하지 않은 경우, 목록에 적절한 유형을 추가하기 위해 병합 요청을 엽니다.

예시

좋은 예시 

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 메서드를 사용할 때 페이지와 리소스를 불러올 때 표준을 갖기 위해, 우리는 페이지 객체의 이름을 snake_case(모든 소문자, 밑줄로 나눈 단어)으로 사용합니다. 아래에 좋은 예시와 나쁜 예시가 표시되어 있습니다.

대부분의 경우 표준을 따르기를 선호하지만, 일반적인 약어(예: mr) 또는 다른 대안을 사용하는 것도 허용됩니다. 단 이름이 모호하지 않은 한입니다. 이것은 혼란을 피하거나 코드를 더 읽기 쉽게 만드는 데 도움이 될 수 있습니다. 예를 들어, 페이지 객체의 이름이 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

표준을 갖는 장점 외에도, 이 표준을 따르면 코드를 더 짧게 작성할 수 있습니다.