동적 요소 검증

엔드 투 엔드 테스트 자동화에서 발생하는 NoSuchElementException 등의 문제를 해결하기 위한 동적 요소 검증 방법을 설명합니다.

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