NoSuchElementException과 같은 일반적인 테스트 자동화 문제를 해결하기 위한 방법을 고안했습니다.

동적 요소 검증이 해결하는 다른 문제들은 다음과 같습니다.

• 마우스로 어떤 동작을 수행할 때, 그에 따른 결과가 발생하기를 기대합니다.

• 테스트가 페이지로 이동하거나 페이지를 벗어날 때, 테스트가 계속되기 전에 예상한 페이지에 있는지 확인합니다.

동적 요소 검증의 작동 방식#

페이지에서의 사용자 액션은 어떤 효과를 발생시키는 것으로 해석됩니다. 이러한 액션은 다음과 같습니다.

• 네비게이션

• 클릭

네비게이션#

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

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

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

클릭#

테스트 내에서 클릭을 수행할 때, 그에 따른 결과가 발생하기를 기대합니다. 그 결과는 웹페이지에 컴포넌트가 나타나거나, 테스트가 페이지에서 완전히 벗어나는 것일 수 있습니다.

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

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

필수 요소#

정의#

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

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

"가시적"은 다음과 같이 정의할 수 있습니다.

• display: none 또는 width: 0px; height: 0px; 와 같이 표시를 방해하는 CSS가 없는 경우

• 사용자가 상호작용할 수 있는 경우

"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

위 코드는 GitLab QA가 execute_stuff를 계속 실행하기 전에 MyPage에서 my-element와 another-element가 페이지에 있는지 스캔하도록 합니다.

클릭#

소스가 주어진 경우 ...

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

위 코드는 GitLab QA가 my-element를 클릭할 때 message-content가 Layer에 나타나는지 확인하도록 합니다.

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