Geb：多元素导航器的 Web 元素定位器

编程问答 2022-05-26

问题描述

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

Student: Foo Bar
         Class X
         Section A

我能够像这样使用 XPath 找到 Student 元素：//b[contains(text(),'Student')] 但我想使用 jquery 选择器提取相同的东西并使用 jquery Selector 提取它的子元素，例如 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 @R_729_4045@ion</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>

解决方法

因为您的问题不清楚，所以我向您展示了几个选项：

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] 之类的内容。

css-selectorsgebjquery-selectorsui-automationxpathxpathxpath