Watir - Locating Web Elements-alljchome-开发者的教程家园

Watir Tutorial

Selected Reading

Watir - Locating Web Elements

在Watir,为了测试,你需要找到这些要素,并且可以用不同的方式——通过使用该要素的补贴、分类或文本。

在本章中,我们将看到几个例子,它们显示了确定要素的不同方法。

Using ID of the Element

Test page

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>
   
   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");
            
            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML = 
                  "The name entered is : " + firstname.value;
               
               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>
      
      <span id = "spanfirstname">
         Enter First Name : 
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()" />
      </span>
      <br/>
      <br/>
      <span style = "display:none;" id = "displayfirstname">
      </span>
   </body>
</html>

Example

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

举例来说,我们正在利用文本箱子的复制件来查找这些内容并确定其价值。

t = b.text_field(id:  firstname )

Output

Using ID Element

如果你需要找到四舍五入、四舍五入或其他任何html的tag子,你可以做如下的一样。

For span

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

For span

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

Using NAME of the Element

Test page

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>
   
   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");
            
            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML = 
                  "The name entered is : " + firstname.value;
               
               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>
      
      <span id = "spanfirstname">
         Enter First Name : 
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()" />
      </span>
      <br/>
      <br/>
      <span style = "display:none;" id = "displayfirstname">
      </span>
   </body>
</html>

Example

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

Output

Using ID Element

Using Tag Name

如下文所示,你可以通过直接使用html标签找到你想要的任何html要素。

For span

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

For span

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

For p tag

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

For button

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

Using Class Name

您可使用其类别名称查找该元素。具体做法如下:

For span

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

For span

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

For p tag

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

For button

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

For textbox

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

你们也可以通过如下文所示的多种课程:

For span

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

Using Text

这也是使用案文内容确定要素的又一个途径。例如:

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

Using Label

您可使用该要素的标签,将其定位如下:

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

Using Data Attributes

如果有数据属您的html标签,你可以找到下文所示内容。

例如,你可以找到以下标记:

<span data-type = "test1"></span>

您可以确定如下四点:

browser.span(data-type:  test1 ))
browser.span(data-type: /test1/))

Using Custom Attributes

您也可以找到使用以下习俗特性的要素:

Example of html element

<span itemprop = ”content”>
   ….
</span>

您可以确定如下四点:

browser.span(itemprop: ‘content ))
browser.span(itemprop: /content/))

Using Visible Attribute

使用可见特性的成分可如下所示:

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

Watir - Locating Web Elements

Using ID of the Element

Test page

Example

Output

For span

For span

Using NAME of the Element

Test page

Example

Output

Using Tag Name

For span

For span

For p tag

For button

Using Class Name

For span

For span

For p tag

For button

For textbox

For span

Using Text

Using Label

Using Data Attributes

Using Custom Attributes

Example of html element

Using Visible Attribute

友情链接