동적 요소 유효성 검사

일반적인 테스트 자동화 문제를 해결하기 위한 솔루션을 개발하여, 끔찍한 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를 클릭한 후 Layer에 message-content가 나타나는지 확인하기 위해 GitLab QA가 호출됩니다.

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