Watir: select 一个具有多个自定义属性的元素

Question

创建单击右分页箭头的 Watir 脚本时，我似乎找不到抓住底部“kat-icon”标签的解决方案： https://imgur.com/CNs7kXH

尝试使用以下行的许多不同版本，但似乎没有任何效果。

browser.element(id: 'mas-apps-store-search-paginator').span(name: 'chevron-right').exists?

我应该如何处理这个？

Answer 1

我会先尝试一个简单的 CSS 选择器，例如

#mas-apps-store-search-paginator kat-icon[name='chevron-right']

我有点假设由于shadow-root它将不起作用。 在这种情况下，你需要做类似的事情

shadow_host = driver.find_element(id: 'mas-apps-store-search-paginator')
shadow_root = shadow_host.shadow_root
icon = shadow_root.find_element(name: 'chevron-right')

Answer 2

鉴于 HTML：

<kat-icon>元素在#shadow-root 中（打开）

---

解决方案

要识别并单击<kat-icon>元素，您可以使用以下定位器策略：

shadow_host = driver.find_element(css: 'kat-pagination.mas-paginator')
shadow_root = shadow_host.shadow_root
right_pagination_arrow = shadow_root.find_element(css: 'kat-icon.nav__icon[name="chevron-right"]')