How to Get the Number of Elements Having Same Attribute in HTML in Watir

How to get the number of elements having same attribute in HTML in Watir?

If you are using watir-webdriver gem:

1)

HTML

<input type="password" class="foo" /> 
<input type="text" class="foo" />

Watir

browser.elements(:class => "foo").size
# => 2 

2)

HTML

<input type="password" class="foo" /> 
<span class="foo"></span>
<a href='1' class="foo">Text</a>

Watir

browser.elements(:class => "foo").size
# => 3 

How to return all elements of same class in HTML in Watir

The :class locator takes a list of classes rather than a CSS-selector. Looking for the class "module.grid.grid-50" tells Watir to look for an element like:

<div class="module.grid.grid-50"> 

If you want to match by multiple classes, you want to pass in an Array of individual classes:

tbl = browser.table(class: ['module', 'grid', 'grid-50'])
tbl.spans(bo_bind: /row.date/).map(&:text)
#=> ["20/04/2018", "22/04/2018", "23/06/2018", "06/09/2018", "15/09/2018"]

how to find the text from the multiple same attribute in watir?

The original thing you tried

browser.ul(id: "tab").li(class: "criteria").div(text: "Line Lo")

failed because when there is more than one element that could match the criteria you specify, watir will use the first one it finds. So what that is asking watir to do would equate to the following in english

Find the first un-ordered list with the id 'tab',
then inside that list find the first list item with the class 'criteria',
then inside that list item, find a div with the text 'Line Lo'.

Since the first LI inside that list does not contain a div with that text, it fails.

To click the innermost div (based on comments, this is what you are trying to do)

browser.div(:class => "attr", :text => "Line Lo").click

aka Find me a div with the class "attr" AND the text "Line Lo", and then have the div click itself

---

these other options were presented when it was not clear exactly which div the OP was after, but I'm leaving them as they might be informative to other folks struggling with similar issues

To click the div that contains the one above (the parent).

browser.div(:class => "inner", :text => "Line Lo").click

if that parent div had no uniqueness (no class etc) you could still get to it like this

browser.div(:class => "attr", :text => "Line Lo").parent.click

To click the li tag that holds all that stuff

browser.li(:class => "criteria", :text => "Line Lo").click

For any of those, if you need to restrict to just looking inside that particular list, then specify like this

browser.ul(:id => "tab").li(:class => "criteria", :text => "Line Lo").click

How to locate html element input type=number in watir?

Watir (both classic and webdriver) support the input of type number as text fields. You can locate it like you would any other text field.

For example, say the html is:

<input type="number" name="quantity" min="1" max="5">

Then you can do the following to check that the element exists (or any other action):

browser.text_field(:name => 'quantity').exists?
#=> true

If you only want to find elements based on their type attribute being "number", then you will have to use the :css or :xpath locator:

browser.element(:css => 'input[type=number]').exists?
#=> true

browser.element(:xpath => '//input[@type="number"]').exists?
#=> true

Watir: How do i get inner_html of multiple span, with same class name

The element that you are targeting is contained within a <div> with a unique data attribute. I'd advise using that approach:

require 'watir'    
b = Watir::Browser.new :chrome
b.goto "https://www.google.com/?gfe_rd=cr&ei=w7-YWN75OsyAoAPK_oDYBQ#q=bangalore" 

puts b.div(:data_attrid => "kc:/location/citytown:current weather").text
#=> Weather: 59°F (15°C), Wind S at 2 mph (3 km/h), 83% Humidity

For reference--as @JustinKo demonstrates--watir can use data attributes as locators with some minor tweaks.

Sidenote: running automated searches against Google may be a violation of their Terms of Service, and you may find yourself blocked. You should investigate if you can use one of their many APIs to harvest this data.

How to locating similar HTML elements in Watir using Ruby

You'll have to specify which <div> you are targeting. There are two or possibly more <div> tags with the same class attribute.

Given this HTML snippet:

<div class="ms-vb itx" onmouseover="OnItem(this)" CTXName="ctx586" id="1" Field="LinkTitle" Perm="0xb008031061" EventType=""><a onfocus="OnLink(this)" href="asdm.nwie.net/_layouts/15/…" onclick="EditLink2(this,586);return false;" target="_self">Rapid Alignment</a></div> 

<div class="ms-vb itx" onmouseover="OnItem(this)" CTXName="ctx586" id="3" Field="LinkTitle" Perm="0xb008031061" EventType=""><a onfocus="OnLink(this)" href="asdm.nwie.net/_layouts/15/…" onclick="EditLink2(this,586);return false;" target="_self">Design Develop Integrate and Test</a></div>

You need to target the appropriate <div> by supplying the index in the locator:

p b.div(:class => 'ms-vb itx').link(:text => 'Rapid Alignment').exists?
#=> true
p b.div(:class => 'ms-vb itx').link(:text => 'Design Develop Integrate and Test').exists?
#=> false
p b.div(:class => 'ms-vb itx', :index => 1).link(:text => 'Design Develop Integrate and Test').exists?
#=> true

But locating elements by index can be fragile if and when UI elements change. You should consider locating using the id attributes, which--according to spec--are unique.

Watir, Page-objects: how to get all elements that have the same identifier

You can define a collection of links in your page object using links:

class MyPage
    include PageObject

    links(:tag_link, :css =>".tags-link a")
end

This will create a collection_name_elements method that returns an array of matching page-object elements. You can iterate over it to perform an action on each element. For example, to output the text of each link:

page.tag_link_elements.each do |link|
    puts link.text
end
#=> test1
#=> test2
#=> test3
#=> test4
#=> test5
#=> test6

How to determine what type of a HTML element is selected in Watir

elements.each {|element| puts element.tag_name}

Output:

input
span
a

---

Related Topics