동적 요소 유효성 검사

일반적인 테스트 자동화 문제를 해결하기 위해 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

execute_stuff로 계속 진행하기 전에 GitLab QA에 의해 MyPage에서 my-element와 another-element가 페이지에 있는지 검사합니다.

클릭

주어진 소스에 대해서… 

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

my-element를 클릭한 후 GitLab QA에 의해 message-content가 레이어에 나타나는지 확인합니다.

이는 테스트를 계속하기 전에 레이어가 실제로 렌더링되었음을 나타냅니다.