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"입니다. 당신이 HTML을 검사하는 경우

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

당신이 볼 수 있습니다 : 그것은 단지 때문에 스타일링에 "히트 맵 '과 같은

<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, 스크립트의 끝에서 종료하지 크롬을 이야기 할 수 있습니다 볼 수 있습니다.

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

Answer 2

당신의 목표 링크 텍스트 이없는 클릭을 wouldnt. nokogiri와 함께 <a> 태그의 텍스트에 어린이 <span> 태그의 텍스트가 포함되어 있고 Watir이 같은 방식으로 작동 함이 확인되었습니다.

View > Developer > Developer tools 

는 그런 다음 페이지에서 요소를 선택 할 수 있으며 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> 

기본 구조는 다음과 같습니다 : 다음은 HTML의 모습입니다

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

크롬은 심지어 당신이 바로 당신이 사용할 수있는 자사의 XPath를, 요소를 클릭하고 얻을 수있는 기능이 있습니다 와 이르.

그러나, 나는 그 페이지로 이동 내 프로그램을 실행할 때, 나는 크롬 출시를 참조하고 나는 로그인 페이지가 아닌 귀하의 링크에서 나에 제출 된 페이지가 표시하고 있습니다.

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를 얻기 : 적절한 URL로, 나는 여러 가지 기술을 사용하여 링크를 얻을 수 있습니다 :

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는 :는 XPath는 두 개의 속성을 가진 <a> 태그를 찾습니다

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"]]' 
) 

:

세 가지 속성을 가진 아이 <span> (즉, 직접 아이)가

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

:

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

프로그래밍 방식으로 링크를 클릭하십시오 :

target_link.click 

Watir는 다음 페이지로 이동합니다.