Компоненты пользовательского интерфейса с использованием watir или selenium

Question

Я пытаюсь выяснить, есть ли у кого-либо подход к автоматическому тестированию пользовательского интерфейса для компонентов пользовательского интерфейса.

элементы

Материал интерфейса отображаются как вложенные дивы с очень небольшим количеством уникальной информации, например, идентификатор:

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

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

вложенная структура DIV позволяет использовать традиционные методы местоположение трудно, если не невозможно - (Selenium и Watir), идентификатор , имя, класс и т. д.

Использование реактивных devtools позволяет увидеть более четкое представление о том, как структурирована страница, но я еще не могу получить доступ к «DOM» для поиска элементов.

Любые идеи или помощь будут оценены.

Добавлен пример:

Sliders

Я не могу придумать пример, который более описательный, чем предыдущее, может быть буквально 10 слоев вложенной дивы без какого-либо текста.

Answer 1

Существует, к сожалению, общий метод, о котором я знаю.

Некоторые из компонентов уже есть id с, что позволяет использовать селектор CSS, как #my-component input (которая обычно достаточно, чтобы получить точное поле), имеют пользовательские имена классов, которые будут добавлены другие (как AutoComplete - popoverProps), который позволяет использовать аналогичный селектор.

Хорошая новость заключается в том, что каждый компонент MaterialUI обеспечивает className, который может быть использован для обнаружения элементов (по крайней мере, частично) - подробности можно найти на http://www.material-ui.com/#/customization/styles Также id полевых работ довольно часто, даже когда не документированы.

В последнем случае (если обнаружение по классу + других селекторов css недостаточно), вы можете вернуться к выражению XPath, используя текст элемента - например, я использую //span[@class="menu-item"][.//div[contains(text(),"${itemName}")]] для соответствия пунктам меню. Он соответствует вещам, указанным как <MenuItem primaryText={itemName} className="menu-item">