• 작동 원리
  • 탐색
  • 클릭
  • 필수 요소
    • 정의
    • 적용
• 예시
  • 탐색하기
  • 클릭하기

동적 요소 검증

우리는 경악스러운 NoSuchElementException와 같은 일반적인 테스트 자동화 문제를 해결하기 위한 솔루션을 고안했습니다.

동적 요소 검증이 해결하는 다른 문제는…

• 마우스로 작업을 수행할 때, 우리는 무언가가 발생하기를 기대합니다.
• 테스트가 페이지로(또는 페이지에서) 탐색할 때, 우리는 테스트를 계속하기 전에 우리가 예상하는 페이지에 있는지 확인합니다.

작동 원리

우리는 페이지에서의 사용자 행동이 어떤 효과를 갖도록 해석합니다. 이러한 행동은

• 탐색
• 클릭

탐색

페이지로 탐색할 때, 조건 없이 항상 페이지에서 나타나는 요소들이 있습니다.

동적 요소 검증은 다음을 사용할 때 설정됩니다.

Runtime::Browser.visit(:gitlab, Some::Page)

클릭

테스트 내에서 클릭을 수행할 때, 우리는 무언가가 발생하기를 기대합니다. 그 무언가는 웹페이지에 이제 나타나는 컴포넌트이거나, 테스트가 페이지에서 완전히 탐색하는 것일 수 있습니다.

동적 요소 검증은 다음을 사용할 때 설정됩니다.

click_element('my-element', Some::Page)

필수 요소

정의

먼저 “필수 요소”가 무엇인지 정의하는 것이 중요합니다.

필수 요소는 사용자 입력 없이 UI 구성 요소에서 나타나는 가시 HTML 요소입니다.

“가시”는 다음과 같이 정의될 수 있습니다.

• 표시를 방해하는 CSS가 없을 때, 예를 들어 display: none 또는 width: 0px; height: 0px;
• 사용자가 상호작용할 수 있어야 합니다.

“UI 구성 요소”는 다음과 같이 정의될 수 있습니다.

• 사용자가 보는 모든 것
• 버튼, 텍스트 필드
• 페이지 위에 놓인 레이어

적용

요소를 요구하는 것은 매우 쉽습니다. element에 required: true 매개변수를 추가하면, 이제 탐색 시 요소가 페이지에 나타나는 것이 필수가 되었습니다.

예시

다음과 같은 경우…

class MyPage < Page::Base
  view 'app/views/view.html.haml' do
    element 'my-element', required: true
    element 'another-element', required: true
    element 'conditional-element'
  end

  def open_layer
    click_element('my-element', Layer::MyLayer)
  end
end

class Layer < Page::Component
  view 'app/views/mylayer/layer.html.haml' do
    element 'message-content', required: true
  end
end

탐색하기

소스를 고려할 때…

Runtime::Browser.visit(:gitlab, Page::MyPage)

execute_stuff

MyPage에서 my-element와 another-element가 페이지에 있는지 확인하기 위해 GitLab QA를 호출하여 execute_stuff를 계속하기 전에 확인합니다.

클릭하기

소스를 고려할 때…

def open_layer
  click_element('my-element', Layer::MyLayer)
end

my-element를 클릭할 때 Layer에서 message-content가 나타나는 것을 보장하기 위해 GitLab QA를 호출합니다.

이는 우리가 테스트를 계속하기 전에 Layer가 실제로 렌더링되었음을 의미합니다.