如何在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进入下一页。