동적 요소 유효성 검사

일반적인 테스트 자동화 문제를 해결하기 위한 해결책으로 ‘NoSuchElementException’와 같은 골칫거리를 해결하기 위한 솔루션을 개발했습니다.

동적 요소 유효성 검사가 해결하는 다른 문제들은 다음과 같습니다.

  • 마우스로 작업을 수행할 때 예상되는 동작
  • 테스트가 페이지로 이동할 때 (또는 페이지에서) 계속 진행하기 전에 예상한 페이지인지 확인

작동 방식

페이지에서 사용자의 작업을 해석하여 어떤 종류의 효과가 있는지 확인합니다. 이러한 작업은 다음과 같습니다.

탐색

페이지로 이동할 때, 조건 없이 항상 페이지에 나타나는 요소가 있습니다.

동적 요소 유효성 검사는 다음을 사용할 때 설정됩니다 

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

클릭

테스트 내에서 클릭을 수행할 때, 어떤 일이 발생할 것으로 예상합니다. 그 일은 웹페이지에 이제 컴포넌트가 나타나거나 테스트가 페이지에서 완전히 이동할 수도 있습니다.

동적 요소 유효성 검사는 다음을 사용할 때 설정됩니다 

click_element(:my_element, Some::Page)

필수 요소

정의

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

필수 요소는 사용자 입력 없이 UI 컴포넌트에 나타나는 가시적인 HTML 요소입니다.

“가시적인”은 다음과 같이 정의됩니다.

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

“UI 컴포넌트”는 다음과 같이 정의될 수 있습니다.

  • 사용자가 볼 수 있는 모든 것
  • 버튼, 텍스트 필드
  • 페이지 위에 위치한 레이어

적용

요소를 필수로 만드는 것은 매우 쉽습니다. required: true를 element 매개변수로 추가함으로써 해당 요소가 페이지에 나타나는 것을 요구사항으로 만들 수 있습니다.

예시

다음과 같이 주어진 경우… 

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를 클릭한 후에 레이어에 message_content가 나타나도록 GitLab QA가 확인하도록 합니다.

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