watir 또는 selenium을 사용하는 자동 재료 UI 구성 요소

Material UI 구성 요소에 대한 자동화 된 UI 테스트 방법이 있는지 알아 내려고합니다.watir 또는 selenium을 사용하는 자동 재료 UI 구성 요소

재료 UI 요소, 예를 들어, 약간의 고유 ID 정보와 중첩 된 div로 렌더링됩니다

<div data-reactroot style="..."> 
    <div style="..."> 
    <div style="..."> 

    </div> 
    </div> 
</div>

중첩 된 DIV 구조가 불가능하지는 않지만 어려운 기존의 위치 방법을 사용한다 - (셀레늄 및 Watir과)를 ID를 , 이름, 클래스 등

반응 devtools를 사용하면 페이지 구성 방법에 대한 훨씬 더 명확한 그림을 볼 수 있지만 요소를 찾기 위해 React "DOM"에 아직 액세스 할 수 없습니다.

모든 아이디어 나 도움을 주시면 감사하겠습니다.

추가 예제 :

Sliders

말 그대로 텍스트없이 중첩 된 div의 10 층이 될 수 위보다 더 자세한 설명입니다 예를 들어 가지고 올 수 없습니다.

출처

2016-08-15 smact3010

예를 보았을 때 컨트롤에 ID를 추가 할 수 있어야합니다. 예를 들어 [텍스트 필드 예제] (http://www.material-ui.com/#/components/text-field)에는 기본값 필드에 ID가 있습니다. 그게 선택의 여지가 있니? 최소한 사용자가 원하는 요소 (예 : 텍스트, 레이블과의 관계 등)를 식별 할 수 있어야합니다. 현재 작업하고있는 페이지를 더 많이 표시하면 Google에서 답변을 제공하는 데 도움이 될 수 있습니다. –

우리는 구성 요소에 ID를 추가하는 방법을 찾고 있지만 구성 요소 내부의 기능 제어 (예 : 슬라이더 구성 요소의 "핸들"은 ID보다 복잡합니다. 텍스트만큼 ID까지, 중첩 된 div 구조 내에서 텍스트를 찾을 때 가장 바깥 쪽 div가 반환됩니다. 궁극적으로는 앱의 루트 일 수 있습니다. – smact3010

불행히도 일반적인 방법은 없습니다.

일부 구성 요소

은 이미 (정확한 필드를 얻을 일반적으로 충분하다) #my-component input 같은 CSS 선택기를 사용할 수있는 id의이, 다른 사람이 사용자 정의 클래스 이름을 추가 할 수있다 ( AutoComplete 같은 - popoverProps)하는 유사한 선택기를 사용할 수 있습니다.

좋은 소식이 모든 MaterialUI 구성 요소 요소의 위치를 찾을 수 있습니다 className을 제공하는 것입니다 (적어도 부분적으로) - 세부 사항은 또한 id 필드가 문서화되어 있지 경우에도 자주 작동 http://www.material-ui.com/#/customization/styles 에서 찾을 수 있습니다.

마지막으로 (클래스 + 다른 CSS 선택기 부분으로 검색이 충분하지 않은 경우) 요소 텍스트를 사용하여 XPath 표현으로 되돌릴 수 있습니다 (예 : //span[@class="menu-item"][.//div[contains(text(),"${itemName}")]]을 사용하여 메뉴 항목 일치). <MenuItem primaryText={itemName} className="menu-item">으로 선언 된 것과 일치합니다.

출처

2017-01-05 10:45:58

watir 또는 selenium을 사용하는 자동 재료 UI 구성 요소

답변

관련 문제