xpath 또는 css 경로에서 임의의 숫자가있는 요소를 클릭하는 방법?

Question

월별로 월을 선택해야합니다. XPath는 난수 페이지 너무

#monthpicker_037945738616321245 > table > tbody > tr:nth-child(4) > td:nth-child(3) 

또한 3 방 선택기를 갖는 난수를

//*[@id="monthpicker_037945738616321245"]/table/tbody/tr[4]/td[3] 

CSS 경로를 가지고 있지만, 하나만이 보인다. 이 monthpicker가 포함 된 각 div에는 임의의 숫자가 포함 된 ID가 있습니다.

<table class="mtz-monthpicker"> 
    <tbody class="mtz-monthpicker"> 
     <tr class="mtz-monthpicker"> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="1">Январь</td> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="2">Февраль</td> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="3">Март</td> 
     </tr> 
     <tr class="mtz-monthpicker"> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="4">Апрель</td> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="5">Май</td> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="6">Июнь</td> 
     </tr> 
     <tr class="mtz-monthpicker"> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="7">Июль</td> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="8">Август</td> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="9">Сентябрь</td> 
     </tr> 
     <tr class="mtz-monthpicker"> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="10">Октябрь</td> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="11">Ноябрь</td> 
     <td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="12">Декабрь</td> 
     </tr> 
    </tbody> 
</table> 

monthpicker_04289214732160275 또는 monthpicker_04395144395656033 제가

@b.table(:class => 'mtz-monthpicker').tr(:class => 'mtz-monthpicker').td(:class => 'ui-state-default mtz-monthpicker mtz-monthpicker-month').click 

CSS 경로 시도 : #monthpicker_020622412423150185 > table > tbody > tr:nth-child(4) > td:nth-child(3)

의 XPath : 또한,이 프런트 엔드에 사용 angular.is //*[@id="monthpicker_020622412423150185"]/table/tbody/tr[4]/td[3]

.

이 달 피커에서 한 달을 선택하고 클릭하려면 어떻게해야합니까?

Answer 1

하나의 가능한 해결책은 id 값의 일부만 일치시키는 것입니다. 따라서 임의의 숫자를 하드 코딩 할 필요가 없습니다. 이 XPath는 기능 contains() 또는 starts-with()을 사용하여 수행 할 수 있습니다 :

//*[contains(@id, "monthpicker_")]/..... 
//*[starts-with(@id, "monthpicker_")]/..... 

Answer 2

이런 상황에서 내가 텍스트 기반 xpath 검색 이동합니다. 그게 내가 제일 좋아하는거야.

//*[.='Март'] //if the text is unique 

.을 사용하면 부모 노드로 직접 필터링하고 일치하는 텍스트를 찾을 수 있습니다. 그러나 UI가 Angular에 빌드됨을 언급했습니다. Watir이 각도를 처리하는 방식이 webdriver과 잘 맞지 않으므로 그 전에 몇 가지 추가 대기 시간을 추가해야 할 수도 있습니다.

Answer 3

가시성도 확인해야한다는 점을 감안할 때 XPath 또는 CSS만을 사용할 수 있다고는 생각하지 않습니다.

표시되는 월 피커를 찾으려면 id에 "monthpicker"가있는 div를 모두 가져옵니다. 셀 중 하나를 클릭

monthpicker = @b.divs(id: /monthpicker_/).find(&present?) 

그런 다음 당신이 monthpicker와 상호 작용할 수 : 개인적으로, 나는 XPath는/CSS를보다 쉽게 ​​정규 표현식을 사용하여 찾을 수 있습니다. 나는 그것을 기반으로 TD를 선택하는 것이 더 명확 있다고 생각하지만

monthpicker.td(index: 2).when_present.click 

예를 들어, 첫 번째 셀을 클릭 :

monthpicker.td.when_present.click 

또는 특정 인덱스 (이 경우 세 번째)을 클릭 데이터 월 속성 :

monthpicker.td(data_month: "3").when_present.click 

Answer 4

의견을 보내 주셔서 감사합니다.

monthpicker = @b.tds(:xpath, "//*[contains(@id, 'monthpicker_')]/table/tbody/tr[4]/td[3]") 
puts monthpicker.size 

는

monthpicker.each do |x| 
script = <<-JS 
arguments[0].click(); 
JS 
@b.execute_script(script, x) 
end 

그때 내가 얻을 것 x.click를 사용하는 경우 내 생각 때문에 일부 부모 요소가 "요소가 현재 볼 수 없습니다"이것은 나를 위해 일한 4 개 요소

결과 overflow : 숨겨진 속성. 하지만 JS가 작동합니다.