Geb：用于多元素导航器的 Web 元素定位器答案

【问题标题】：Geb: Web element locator for multi element navigatorGeb：用于多元素导航器的 Web 元素定位器
【发布时间】：2021-05-13 16:25:34
【问题描述】：

我有一个 html 页面，其中包含一个名为 Student 的元素，它有多个行，如下所示：

Student: Foo Bar
         Class X
         Section A

我能够使用这样的 XPath 定位 Student 元素：//b[contains(text(),'Student')] 但我想使用 jquery 选择器提取相同的东西并使用 jquery 选择器提取它的子元素，如 Foo Bar, Class X and Section A

我尝试了以下类似的方法，但没有成功： student(wait: true) { $('b', text: contains('Student:')).parent().parent()

这是 html 的外观：

<tr>
   <td colspan="2" align="left" height="25" class="SubSectionTitle" style=""><b style="">&nbsp;Student Information</b></td>
</tr>
<tr>
   <td valign="top" class="Label" rowspan="3"><b style="">Student:</b></td>
   <td style="">Foo Bar</td>
</tr>
<tr>
   <td>Class X</td>
</tr>
<tr>
   <td>Section A</td>
</tr>

【问题讨论】：

您的要求不清楚，因为您没有添加测试，所以我看不到您要检查的条件。您关于 XPath 与 CSS 选择器的零碎信息也无济于事，两者甚至相互矛盾：一个搜索“Student”而没有尾随冒号，另一个搜索“Student：”，但试图向上导航 DOM 元素嵌套层次结构。您没有明确说明您要选择哪个元素。小节标题？其他表行之一（哪一个）？所有行？如果我只知道哪个问题，我可能可以回答每个问题。
我希望对我的回答提供一些反馈，以结束这个仍然列为未回答的问题。谢谢你。我随后会删除此评论。

标签： xpath css-selectors jquery-selectors ui-automation geb

【解决方案1】：

由于您的问题不清楚，我向您展示几个选项：

HTML 页面src/test/resources/page-q66129162.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <body>
    <table>
      <tr>
        <td colspan="2" align="left" height="25" class="SubSectionTitle" style=""><b style="">&nbsp;Student Information</b>
        </td>
      </tr>
      <tr>
        <td valign="top" class="Label" rowspan="3"><b style="">Student:</b></td>
        <td style="">Foo Bar</td>
      </tr>
      <tr>
        <td>Class X</td>
      </tr>
      <tr>
        <td>Section A</td>
      </tr>
    </table>
  </body>
</html>

Geb 测试：

package de.scrum_master.stackoverflow.q66129162

import geb.spock.GebSpec
import org.openqa.selenium.By

class MultiElementNavigatorIT extends GebSpec {
  static url = this.getResource("/page-q66129162.html").toString()

  def test() {
    given:
    go url

    when:
    def xp = $(By.xpath("//b[contains(text(),'Student:')][1]"))

    then:
    xp.text() == "Student:"
    xp.parent().text() == "Student:"
    xp.parent().parent().text() == "Student: Foo Bar"
    xp.parent().parent().parent().text() == " Student Information\nStudent: Foo Bar\nClass X\nSection A"

    when:
    def nav = $('b', text: contains('Student:'))

    then:
    nav.text() == "Student:"
    nav.parent().text() == "Student:"
    nav.parent().parent().text() == "Student: Foo Bar"
    nav.parent().parent().parent().text() == " Student Information\nStudent: Foo Bar\nClass X\nSection A"
  }
}

或者如果你喜欢它更紧凑一点：

package de.scrum_master.stackoverflow.q66129162

import geb.spock.GebSpec
import org.openqa.selenium.By
import spock.lang.Unroll

class MultiElementNavigatorIT extends GebSpec {
  static url = this.getResource("/page-q66129162.html").toString()

  @Unroll
  def "select by #selectorType"() {
    given:
    go url
    def selector = selectorClosure()

    expect:
    selector.text() == "Student:"
    selector.parent().text() == "Student:"
    selector.parent().parent().text() == "Student: Foo Bar"
    selector.parent().parent().parent().text() == " Student Information\nStudent: Foo Bar\nClass X\nSection A"

    where:
    selectorType | selectorClosure
    "XPath"      | { $(By.xpath("//b[contains(text(),'Student:')][1]")) }
    "CSS"        | { $('b', text: contains('Student:')) }
  }
}

如果您的问题是如何从多元素导航器中进行选择，您可以使用myNavigator.first() 或myNavigator[0] 之类的内容。

【讨论】：