如何在ruby中使用watir選擇內聯元素

Question

我想在打開網頁後點擊文本「HEATMAPS」。我嘗試了一些點擊方法，包括識別爲超鏈接，作爲文本，使用xpath等，他們都沒有工作。我覺得，我要麼誤解鏈接，要麼是超鏈接，要麼選擇錯誤的xpath。

Link of the web page

PFB下面

require 'watir-webdriver' 
require 'watir-ng' 
WatirNg.patch! 
WatirNg.register(:ng_scope).patch! 
browser = Watir::Browser.new 
browser.goto 'http://app.vwo.com/#/campaign/108/summary? token=eyJhY2NvdW50X2lkIjoxNTA3MzQsImV4cGVyaW1lbnRfaWQiOjEwOCwiY3JlYXRlZF9vbiI6MTQ0NDgxMjQ4MSwidHlwZSI6ImNhbXBhaWduIiwidmVyc2lvbiI6MSwiaGFzaCI6IjJmZjk3OTVjZTgwNmFmZjJiOTI5NDczMTc5YTBlODQxIn0=' 

lin = browser.link :text=> 'HEATMAPS' 
lin.exist? 
lin.click 

代碼是否有人可以指導我在這，至於我怎麼能作出這樣的鏈接，在網頁中的文字「熱圖」獲得點擊。

的錯誤，我得到：

`This code has slept for the duration of the default timeout waiting for an Element to exist. If the test is still passing, consider using Element#exists? instead of rescuing UnknownObjectException 
C:/Ruby22/lib/ruby/gems/2.2.0/gems/watir-6.1.0/lib/watir/elements/element.rb:507:in `rescue in wait_for_exists': timed out after 30 seconds, waiting for {:text=>"HEATMAPS", :tag_name=>"a"} to be located (Watir::Exception::UnknownObjectException) 
     from C:/Ruby22/lib/ruby/gems/2.2.0/gems/watir-6.1.0/lib/watir/elements/element.rb:497:in `wait_for_exists' 
     from C:/Ruby22/lib/ruby/gems/2.2.0/gems/watir-6.1.0/lib/watir/elements/element.rb:515:in `wait_for_present' 
     from C:/Ruby22/lib/ruby/gems/2.2.0/gems/watir-6.1.0/lib/watir/elements/element.rb:533:in `wait_for_enabled' 
     from C:/Ruby22/lib/ruby/gems/2.2.0/gems/watir-6.1.0/lib/watir/elements/element.rb:656:in `element_call' 
     from C:/Ruby22/lib/ruby/gems/2.2.0/gems/watir-6.1.0/lib/watir/elements/element.rb:114:in `click' 
     from C:/Users/Mrityunjeyan/Documents/GitHub/Simpleprograms/webautomation.rb:10:in `<main>'` 

這顯示了我inner_html文本，但仍難道不點擊

lin = browser.span(:class => 'ng-scope').inner_html puts lin

Answer 1

問題是鏈接的文本不是「HEATMAPS」。它實際上是「Heatmaps」。文本定位是區分大小寫的，這意味着你需要：

lin = browser.link :text=> 'Heatmaps' 

你可以看到這一點，如果你檢查HTML：

<a ui-sref="campaign.heatmap-clickmap" href="#/analyze/analysis/108/heatmaps?token=eyJhY2NvdW50X2lkIjoxNTA3MzQsImV4cGVyaW1lbnRfaWQiOjEwOCwiY3JlYXRlZF9vbiI6MTQ0NDgxMjQ4MSwidHlwZSI6ImNhbXBhaWduIiwidmVyc2lvbiI6MSwiaGFzaCI6IjJmZjk3OTVjZTgwNmFmZjJiOTI5NDczMTc5YTBlODQxIn0%3D"> 
    <!-- boIf: isAnalyticsCampaign --> 
    <span bo-if="isAnalyticsCampaign" class="ng-scope">Heatmaps</span> 
    <!-- boIf: !isAnalyticsCampaign --> 
</a> 

它只是看起來像「熱圖」，由於造型。其中一種風格包括text-transform: uppercase;，它們可視化地大寫文本。 Watir不解釋樣式，所以只知道文本節點是「Heatmaps」。

一旦你已經確定的鏈接，點擊仍然有一個問題：

lin.click 
#=> Selenium::WebDriver::Error::UnknownError: 
#=> unknown error: Element <a ui-sref="analyze.heatmaps" ng-class="{selected: (locationContains('analyze', 'heatmap') &amp;&amp; !locationContains('analyze', '/analysis') &amp;&amp; state.current.name !== 'campaign.heatmap-clickmap') || (isAnalyzeHeatmapEnabled &amp;&amp; (isAnalyzeDeprecatedHeatmapView || locationContains('analyze', '/analysis', 'heatmaps')))}" data-qa="nav-main-analyze-heatmap" href="#/analyze/heatmap">...</a> 
#=> is not clickable at point (90, 121). 
#=> Other element would receive the click: <div ng-show="!isCROSetupView" class="">...</div> 

位於該鏈接實際上是一個在左邊的菜單，這是禁用的，而不是頂部菜單。您需要將鏈接定位器範圍僅限於頂部菜單。使用父ul元素似乎足以：

lin = browser.ul(class: 'page-nav').link(text: 'Heatmaps') 
lin.click 

要查看完整的click，你可能想告訴Chrome中無法收在腳本的末尾。

caps = Selenium::WebDriver::Remote::Capabilities.chrome("chromeOptions" => {'detach' => true}) 
browser = Watir::Browser.new :chrome, desired_capabilities: caps 

Answer 2

你的目標鏈接沒有任何文字 。我與nokogiri確認<a>標籤的文本包含兒童<span>標籤內的文字，結果Watir的工作方式與此相同。

如果您使用Chrome瀏覽器，你可以選擇：

View > Developer > Developer tools 

然後你就可以在頁面上選擇一個元素，並在HTML中的相應部分將突出顯示。下面是HTML的樣子：

<a ui-sref="campaign.heatmap-clickmap" 
    href="#/analyze/analysis/108/heatmaps?token=eyJhY2NvdW50X2lkIjoxNTA3MzQsImV4cGVyaW1lbnRfaWQiOjEwOCwiY3JlYXRlZF9vbiI6MTQ0NDgxMjQ4MSwidHlwZSI6ImNhbXBhaWduIiwidmVyc2lvbiI6MSwiaGFzaCI6IjJmZjk3OTVjZTgwNmFmZjJiOTI5NDczMTc5YTBlODQxIn0%3D"> 
<!-- boIf: isAnalyticsCampaign --> 

<span bo-if="isAnalyticsCampaign" class="ng-scope">Heatmaps</span> 

<!-- boIf: !isAnalyticsCampaign --> </a> 

的基本結構是：

<a><span>Heatmaps</span></a> 

鉻甚至有一個功能，您可以用鼠標右鍵單擊一個元素，並得到了XPath，它可以與使用的Watir。

然而，當我執行我的計劃去該網頁，我看到Chrome的推出，然後我提出了一個登錄頁面，而不是在你的鏈接呈現給我的頁面。

Arghhh ...多麼浪費時間。我以爲Watir必須被打破。

1）

require 'watir' 
require 'watir-ng' #<=NOTE THIS 

WatirNg.register(:'bo_if').patch! #<= NOTE THIS 

br = Watir::Browser.new :chrome 
br.goto 'http://app.vwo.com/#/analyze/analysis/108/summary?token=eyJhY2NvdW50X2lkIjoxNTA3MzQsImV4cGVyaW1lbnRfaWQiOjEwOCwiY3JlYXRlZF9vbiI6MTQ0NDgxMjQ4MSwidHlwZSI6ImNhbXBhaWduIiwidmVyc2lvbiI6MSwiaGFzaCI6IjJmZjk3OTVjZTgwNmFmZjJiOTI5NDczMTc5YTBlODQxIn0%3D' 

target_link = br.span(
    class: 'ng-scope', 
    'bo_if': 'isAnalyticsCampaign', 
).parent #<= NOTE THIS 

puts target_link.text #HEATMAPS 
puts target_link.href #http://app.vwo.com/#/analyze/analysis/1..... 

2）

require 'watir' 
require 'watir-ng' #<=NOTE THIS 

WatirNg.register(:ui_sref).patch! #<=NOTE THIS 

br = Watir::Browser.new :chrome 
br.goto 'http://app.vwo.com/#/analyze/analysis/108/summary?token=eyJhY2NvdW50X2lkIjoxNTA3MzQsImV4cGVyaW1lbnRfaWQiOjEwOCwiY3JlYXRlZF9vbiI6MTQ0NDgxMjQ4MSwidHlwZSI6ImNhbXBhaWduIiwidmVyc2lvbiI6MSwiaGFzaCI6IjJmZjk3OTVjZTgwNmFmZjJiOTI5NDczMTc5YTBlODQxIn0%3D' 

target_link = br.link(
    ui_sref: 'campaign.heatmap-clickmap', 
    href: '#/analyze/analysis/108/heatmaps?token=eyJhY2NvdW50X2lkIjoxNTA3MzQsImV4cGVyaW1lbnRfaWQiOjEwOCwiY3JlYXRlZF9vbiI6MTQ0NDgxMjQ4MSwidHlwZSI6ImNhbXBhaWduIiwidmVyc2lvbiI6MSwiaGFzaCI6IjJmZjk3OTVjZTgwNmFmZjJiOTI5NDczMTc5YTBlODQxIn0%3D' 
) 

puts target_link.text #HEATMAPS 
puts target_link.href #http://app.vwo.com/#/analyze/analysis/108... 

3）獲得通過右鍵單擊的XPath在Chrome中的鏈接：有了正確的網址，我可以使用幾種不同的技術獲取鏈接：

require 'watir' 

br = Watir::Browser.new :chrome 
br.goto 'http://app.vwo.com/#/analyze/analysis/108/summary?token=eyJhY2NvdW50X2lkIjoxNTA3MzQsImV4cGVyaW1lbnRfaWQiOjEwOCwiY3JlYXRlZF9vbiI6MTQ0NDgxMjQ4MSwidHlwZSI6ImNhbXBhaWduIiwidmVyc2lvbiI6MSwiaGFzaCI6IjJmZjk3OTVjZTgwNmFmZjJiOTI5NDczMTc5YTBlODQxIn0%3D' 

target_link = br.link(
    xpath: '//*[@id="main-container"]/ul/li[3]/a' 
) 
puts target_link.text #HEATMAPS 
puts target_link.href #http://app.vwo.com/#/analyze/analysis/108.... 

的XPath可以處理任何標籤或屬性名稱，不同的Watir，所以它看起來像一個很好的工具這方面。

4）更不易碎的XPath：

require 'watir' 

br = Watir::Browser.new :chrome 
br.goto 'http://app.vwo.com/#/analyze/analysis/108/summary?token=eyJhY2NvdW50X2lkIjoxNTA3MzQsImV4cGVyaW1lbnRfaWQiOjEwOCwiY3JlYXRlZF9vbiI6MTQ0NDgxMjQ4MSwidHlwZSI6ImNhbXBhaWduIiwidmVyc2lvbiI6MSwiaGFzaCI6IjJmZjk3OTVjZTgwNmFmZjJiOTI5NDczMTc5YTBlODQxIn0%3D' 


a_href = "#/analyze/analysis/108/heatmaps?token=eyJhY2NvdW50X2lkIjoxNTA3MzQsImV4cGVyaW1lbnRfaWQiOjEwOCwiY3JlYXRlZF9vbiI6MTQ0NDgxMjQ4MSwidHlwZSI6ImNhbXBhaWduIiwidmVyc2lvbiI6MSwiaGFzaCI6IjJmZjk3OTVjZTgwNmFmZjJiOTI5NDczMTc5YTBlODQxIn0%3D" 

target_link = br.link(
    xpath: %Q{ //a[@href="#{a_href}"] } + 
       '[@ui-sref="campaign.heatmap-clickmap"]' + 
       '[child::span[@class="ng-scope"][@bo-if="isAnalyticsCampaign"][text()="Heatmaps"]]' 
) 

中的XPath尋找一個<a>標籤有兩個屬性：

//a[@href="blah"][@ui-sref="bleh"] 

其中有三個屬性的子<span>（即直接子） ：

[child::span[@class="blih"][@bo-if="bloh"][text()="Heatmaps"]] 

在我編程之後cl ick鏈接：

target_link.click 

Watir進入下一頁。