紅寶石硒的webdriver找到具體的SVG元素

Question

我有以下的HTML中，我試圖找到所有內只div.container-fluid.container-results >div >ul >li的svg元素，我不想裏面div.container-fluid.container-results >div >ul >div.result-controls的SVG元素對於給定row_number參數，此處ROW_NUMBER代表div[contains(@class,'invoice-result-row')][contains(@id,#{row_number.to_i-1})]

<div class="container-fluid container-results"> 
    <div class="invoice-result-row" id="0"> 
     <ul> 
     <li class="invoice-process-status-column"> 
      <a href="javascript:void(0)" title="Submitted"> 
       <svg class="glyphicon-upload-green SubmittedIcon" viewBox="0 0 100 100"> 
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#doc_upload"></use> 
       </svg> 
      </a> 
     </li> 
     <li class="invoice-process-status-column"> 
      <a href="javascript:void(0)" title="Sent"> 
       <svg class="glyphicon-upload-green SentIcon" viewBox="0 0 100 100"> 
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#doc_upload"></use> 
       </svg> 
      </a> 
     </li> 
     <li class="invoice-process-status-column"> 
      <a href="javascript:void(0)" title="Pending"> 
       <svg class="glyphicon-upload-green PendingIcon" viewBox="0 0 100 100"> 
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#doc_upload"></use> 
       </svg> 
      </a> 
     </li> 
     <li class="invoice-file-label-column"><span>validated.txt</span></li> 
     <li class="invoice-client-company-column"><span>QA-CP-PP-TRUNK</span></li> 
     <li class="invoice-reference-column"><span>T12345638800</span></li>   
     </ul> 
    </div> 
    <div class="invoice-result-row" id="1"> 
     <ul> 
     <li class="invoice-process-status-column"> 
      <a href="javascript:void(0)" title="Processing"> 
       <svg class="glyphicon-spin ProcessingIcon" viewBox="0 0 100 100"> 
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#refresh"></use> 
       </svg> 
      </a> 
     </li> 
     <li class="invoice-process-status-column"> 
      <a href="javascript:void(0)" title="Delivered"> 
       <svg class="glyphicon-upload-green DeliveredIcon" viewBox="0 0 100 100"> 
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#doc_upload"></use> 
       </svg> 
      </a> 
     </li> 
     <li class="invoice-file-label-column"><span>Pending.txt</span></li> 
     <li class="invoice-client-company-column"></li> 
     <li class="invoice-reference-column"></li> 
     <div class="result-controls"> 
      <li class="invoice-delete-column"></li> 
     </div> 
     </ul> 
    </div> 
    <div class="invoice-result-row" id="2"> 
     <ul> 
     <li class="invoice-process-status-column"> 
      <a href="javascript:void(0)" title="Submitted"> 
       <svg class="glyphicon-upload-green SubmittedIcon" viewBox="0 0 100 100"> 
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#doc_upload"></use> 
       </svg> 
      </a> 
     </li> 
     <li class="invoice-file-label-column"><span>validated - Copy.txt</span></li> 
     <li class="invoice-client-company-column"><span>QA-CP-PP-TRUNK</span></li> 
     <li class="invoice-reference-column"><span>T12345638799</span></li> 
     <div class="result-controls"> 
      <div class="attachment"> 
       <li class="invoice-add-attachment-button-column"><a><button>ADD ATTACHMENTS</button></a></li> 
       <input type="file" multiple="" style="display: none;"> 
      </div> 
      <li class="invoice-sign-button-column"><a href="javascript:void(0)"><button>SIGN</button></a></li> 
      <li class="invoice-draft-button-column"><a><button>DRAFT</button></a></li> 
      <li class="invoice-delete-column"> 
       <a href="javascript:void(0)" title="Delete"> 
        <svg class="glyphicon-trash deleteIcon" viewBox="0 0 100 100"> 
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#trash"></use> 
        </svg> 
       </a> 
      </li> 
     </div> 
     </ul> 
    </div> 
</div> 

我試圖在Ruby中使用Selenium wendriver做到這一點，但它的no such element: Unable to locate element: {"method":"tag name","selector":"svg"}在li元素上，它沒有svg元素。

rows = driver.find_elements(:css => "div.container-fluid.container-results >div >ul") 
    rows[row_number.to_i-1].find_elements(:xpath => "./li").each do |it| 

    if !it.find_element(:tag_name, "svg").nil? 
     iconClass = it.find_element(:tag_name, "svg").attribute('class') 
      puts "icon #{iconClass}" 
     end 
end 

我剛開Ruby編程開始與硒，能有人幫我解決這個問題？

Answer 1

按照我們的討論，以下是這樣的：

driver.find_elements(:xpath => getCPLineSelector).each do |tag| 
icon = tag.find_element(:tag_name, "svg").attribute('class') 
puts "svg class = #{icon}" 
end 

def getCPLineSelector() 
".//div[contains(@class,'container-results')]//div[contains(@class,'invoice- 
result-row')][contains(@id,#{row_number.to_i-1})]//ul/li/a" 
end 

Answer 2

您可以用CSS選擇器，"[id='2'] > ul > li > a > svg"做到這一點。扔在一個功能，通過在該行的編號，並且看起來像這樣

def find_svg(rowNo) 
    driver.find_element(:css, "[id='#{rowNo}'] > ul > li > a > svg") 

希望我的語法正確的......我不知道紅寶石。