CODEWITHSUNDEEP
rubydomwatirwatir-webdriver
Yiren Lu
Yiren Lu

Reputation: 153

Using DOM inspector to find the ID of a button

I'm trying to use the DOM inspector to find the ID of the "More" button at the bottom of this page that reveals more results.

I'm trying to do something like this example:

require 'watir-webdriver'

b = Watir::Browser.new
b.goto 'svpply.com/editors_pick'

#count products
puts b.elements(:xpath => '//li[@data-class="Product"]').count
#=> 30

#Now click button
show_all = b.button(:id => "btn_all")
show_all.click
sleep 4

#count products again
puts b.elements(:xpath => '//li[@data-class="Product"]').count
#=>60

However, I'm unclear on how to search for that particular id within the DOM structure. Can someone also explain the difference between an attribute, element, id, and node?

Upvotes: 2

Views: 1484

Answers (2)

Justin Ko
Justin Ko

Reputation: 46846

To use the DOM Inspector for the More button:

  1. Open the DOM Inspector (Ctrl+Shift+I)
  2. Click the [More] button that you want to inspect
  3. On the right side of the DOM Inspector bar, click the [HTML] button
  4. This should show the HTML for the page, which will include the details of the [More] control. You'll notice that the element is actually a DIV not a button. As well that the ID is in the form "_more".

--> This should show the HTML for the page, which will show the details of the [More] control. You'll notice that the element is actually a DIV not a button. As well that the ID is in the form "_more".

So to do your example with the Quora page, you would do something like:

require 'watir-webdriver'

class QuoraPage
    def initialize(browser)
        @browser = browser
    end

    def goto()
        @browser.goto 'http://www.quora.com/Startups/best_questions'
        wait_questions_loaded
    end

    def click_more()
        @browser.div(:id, /_more/).click
        wait_questions_loaded
    end

    def questions_count()
        @browser.links(:class, 'question_link').count{ |x| x.visible? }
    end

    def wait_questions_loaded()
        begin
            questions_start_count = questions_count()
            sleep(2)
        end while questions_start_count != questions_count()
    end 
end

page = QuoraPage.new(Watir::Browser.new :chrome)
page.goto
puts page.questions_count
page.click_more
puts page.questions_count

Note that I had to put the sleeps in otherwise webdriver hangs like anonygoose mentioned. I tried different wait_untils, but did not manage to find something that worked (other than sleep which is not very robust).

Regarding your question about nodes, elements, etc. I think you are best to look at http://www.w3schools.com/dom/default.asp.

Upvotes: 2

anonygoose
anonygoose

Reputation: 739

To press the button on svpply you can use simply

b.button(:text => "Show All").click

Counting all the products that appear on the page could potentially be done with

b.lis(:class => "grab large").count

This is all for the svpply site. I can't get quora to automate at all, it just stalls my watir-webdriver indefinitely.

You'll also want to wait before you have watir count the products. This can be done with:

b.wait_until{b.lis(:class => "grab large").count > 30}

Upvotes: 1

Related Questions