Ruby Selenium WebDriver查找特定的SVG元素

Question

我在下面的html中嘗試查找div.container-fluid.container-results >div >ul >li所有svg元素，而我不希望div.container-fluid.container-results >div >ul >div.result-controls的svg元素div.container-fluid.container-results >div >ul >div.result-controls 。給定row_number參數div.container-fluid.container-results >div >ul >div.result-controls ，其中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"}拋出no such element: Unable to locate element: {"method":"tag name","selector":"svg"}在li元素上no such element: Unable to locate element: {"method":"tag name","selector":"svg"}有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

我剛剛開始使用Selenium進行紅寶石編程，有人可以幫我解決此問題嗎？

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

希望我的語法正確...我不了解Ruby。