📌  相关文章
📜  Watir-查找Web元素

📅  最后修改于: 2020-12-03 05:21:27             🧑  作者: Mango

在Watir中进行测试，您需要找到元素，并且可以通过使用元素的id，类或文本的不同方式来完成。

在本章中，我们将看到一些示例，这些示例显示了不同的元素定位方法。

使用元素的ID

测试页

Testing UI using Watir
   
   
   
      
      
      

         Enter First Name :

例

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/textbox.html')
t = b.text_field(id: 'firstname') // using the id of the textbox to locate the textbox
t.exists?
t.set 'Riya Kapoor'
b.screenshot.save 'textboxbefore.png'
t.value
t.fire_event('onchange')
b.screenshot.save 'textboxafter.png'

在此示例中，我们使用textbox元素的id定位它并设置值。

t = b.text_field(id: 'firstname')

输出

使用ID

使用ID元素

如果您需要找到div，span或任何其他html标签，则可以使用id进行如下操作-

对于div

browser.div(id: "divid")
browser.div(id: /divid/)

对于跨度

browser.span(id: "spanid")
browser.span(id: /spanid/)

使用元素名称

测试页

Testing UI using Watir
   
   
   
      
      
      

         Enter First Name :

例

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/textbox.html')
t = b.text_field(name: 'firstname') // name is used to locate the textbox element
t.exists?
t.set 'Riya Kapoor'
b.screenshot.save 'textboxbefore.png'
t.value
t.fire_event('onchange')
b.screenshot.save 'textboxafter.png'

输出

使用ID

使用ID元素

使用标签名称

您可以通过直接使用html标记找到所需的任何html元素，如下所示。

对于div

browser.div(id: "divid")
browser.div(id: /divid/)

对于跨度

browser.span(id: "spanid")
browser.span(id: /spanid/)

对于p标签

browser.p(id: "ptag")
browser.p(id: /ptag/)

对于按钮

browser.button(id: "btnid")
browser.button(id: /btnid/)

使用类名

您可以使用元素的类名找到该元素。可以如下所示完成-

对于div

browser.div(class: "divclassname")
browser.div(class: /divclassname/)

对于跨度

browser.span(class: "spanclassname”)
browser.span(class: /spanclassname/)

对于p标签

browser.p(class: "pclassname")
browser.p(class: /pclassname/)

对于按钮

browser.button(class: "btnclassname")
browser.button(class: /btnclassname/)

对于文本框

browser.text_field(class: 'txtclassname')
browser.text_field(class: /txtclassname/)

您还可以通过多个类，如下所示-

对于div

browser.div(class: ["class1", "class2"])

使用文字

这是通过将元素与文本一起使用来定位元素的另一种方法。例如-

browser.button(text: "button text")
browser.button(text: /button text/)

使用标签

您可以使用元素的标签来定位它，如下所示-

browser.text_field(label: "text here"))
browser.text_field(label: /text here/))

使用数据属性

如果您具有html标签的数据属性，则可以使用它来定位元素，如下所示-

例如，您可以如下所示定位标签-

您可以如下找到div-

browser.div(data-type: 'test1'))
browser.div(data-type: /test1/))

使用自定义属性

您还可以使用自定义属性来定位元素，如下所示：

html元素示例


   ….

您可以如下找到div-

browser.div(itemprop: ‘content'))
browser.div(itemprop: /content/))

使用可见属性

使用visible属性的元素可以位于如下所示的位置：

browser.div(visible: true)
browser.div(visible: false)