Search code examples
rubycapybara

Map element with capybara


Friends I have to do a test to validate the text inside an element that I am not able to map. I've tried everything!! The element is a tooltip

I did the mapping by xpath but it's horrible!!!

I need to validate all the text of the tooltips of each element of the cell in the status column. Is there an easier way to do this and map the element without using xpath

[![element :txt_tooltip, :xpath, '/html/body/div\[2\]/div/div\[2\]/table/tbody/tr\[3\]/td\[1\]/div/div\[2\]/div\[1\]/table/tbody/tr/td/table/tbody/tr/td/table/tbody/tr\[2\]/td\[2\]/table/tbody/tr\[2\]/td/table/tbody/tr\[2\]/td/table/tbody/tr/td/div/div\[2\]/div/div/div/table/tbody/tr\[3\]/td\[6\]/img'

get_text_tooltip = txt_tooltip.text
expect(get_text_tooltip).eq ('Somente Leitura')



-Formatted HTML-
 
<a name="TVXWFMTGINSTATOCE"></a>
<div class="tvCaption">
   <div style="display:inline-block;width:100%">
      <img src="r/std/static/pixel.gif" class="icon Enabled icon_grid" draggable="false" onclick="sendEvent(0,event,this,true,0,'','1bfd','ControlMenu#','','','','','');"><img src="r/std/static/pixel.gif" class="icon Enabled icon_norows" draggable="false" onclick="sendEvent(0,event,this,searchImage(this),0,'','1bfd','SelectNone#','','','','','');" alt="Selecionar Nenhum" tooltip="Selecionar Nenhum"><img src="r/std/static/pixel.gif" class="icon Enabled icon_allrows" draggable="false" onclick="sendEvent(0,event,this,searchImage(this),0,'','1bfd','SelectAll#','','','','','');" alt="Selecionar todos" tooltip="Selecionar todos">&nbsp;Lista campos
      <div onclick="if(notSelecting()) sendEvent(0,event,this,searchImage(this),0,'','1bfd','TMMenu#','','','','','');" style="white-space: nowrap;" class="tvMsg tvMsgEna"><img src="r/std/icons/menu64.png" class="icon" draggable="false"></div>
      <div onclick="if(notSelecting()) sendEvent(0,event,this,searchImage(this),0,'','1bfd','CambioLabel#','','','','','');" class="tvMsg tvMsgEna" style="white-space: nowrap;" tooltip="Editar Label">
         <img src="r/std/static/label16.gif" class="icon" draggable="false">
         <div class="tvCaptionSep"></div>
      </div>
   </div>
</div>
<div>
   <div style="" class="tvContent">
      <div style="display:table;width:100%; background:inherit;">
         <div style="display:table-cell;">
            <table class="tvGrid" width="100%">
               <tbody>
                  <tr>
                     <th colspan="1" class="tvHeader">Nome</th>
                     <th colspan="1" class="tvHeader">Etiqueta</th>
                     <th colspan="1" class="tvHeader">Tipo Dado</th>
                     <th colspan="1" class="tvHeader">Valores </th>
                     <th colspan="1" class="tvHeader" width="1">Preenchimento automático</th>
                     <th colspan="1" class="tvHeader">Status </th>
                     <th colspan="1"></th>
                  </tr>
                  <tr oncontextmenu="if(!this.cancelEvent) {sendEvent(0,event,this,true,0,'TVXWFMTGINSTATOCE','1bfd','BtnDropDownRow#',0,'','','');return false;} delete this.cancelEvent;" onclick="if(notSelecting()) sendEvent(0,event,this,true,0,'TVXWFMTGINSTATOCE','1bfd','Select#',0,'','','');" onmousedown="if(event.ctrlKey) this.cancelEvent=true;" class="tvRow tvRowOdd tvRoll" style="cursor:pointer;">
                     <td class="tvCell" valign="center" align="left">FLAG_INSERIMENTO_LETTURA_E</td>
                     <td class="tvCell" valign="center" align="left"> Leitura Existente</td>
                     <td class="tvCell" valign="center" nowrap="" align="left"></td>
                     <td class="tvCell" valign="center" align="left"></td>
                     <td class="tvCell" tooltip="" width="1" valign="center" align="left"></td>
                     <td class="tvCell" valign="center" align="center"><img tooltip="Facultativo" src="r/std/static/ok16.gif"></td>
                     <td style="line-height:1px;padding:0px;" class="tvCell" width="30" valign="center" align="center">
                        <div onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','1bfd','BtnDropDownRow#',0,'','','','');" class="but">
                           <div><img src="r/std/icons/menu64.png" class="icon" draggable="false" align="absmiddle"></div>
                        </div>
                     </td>
                  </tr>
                  <tr oncontextmenu="if(!this.cancelEvent) {sendEvent(0,event,this,true,0,'TVXWFMTGINSTATOCE','1bfd','BtnDropDownRow#',1,'','','');return false;} delete this.cancelEvent;" onclick="if(notSelecting()) sendEvent(0,event,this,true,0,'TVXWFMTGINSTATOCE','1bfd','Select#',1,'','','');" onmousedown="if(event.ctrlKey) this.cancelEvent=true;" class="tvRow tvRowEven tvRoll tvRowSelected" style="cursor:pointer;">
                     <td class="tvCell" valign="center" align="left">XWFMSLETMATRICOLA_E</td>
                     <td class="tvCell" valign="center" align="left"> Nº Hidrômetro</td>
                     <td class="tvCell" valign="center" nowrap="" align="left"></td>
                     <td class="tvCell" valign="center" align="left"></td>
                     <td class="tvCell" tooltip="[AIMPMATRICOLA]" width="1" valign="center" align="left">
                        <button onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','1bfd','AUTOFILLBTN#',1,'','','','');" class="but butAct" tabindex="0" tooltip="Preenchimento automático ativado" type="BUTTON">
                           <div><img src="r/std/icons/checkboxselected64.png" class="icon" draggable="false" align="absmiddle"></div>
                        </button>
                     </td>
                     <td class="tvCell" valign="center" align="center"><img tooltip="Somente Leitura" src="r/std/static/lock16.gif"></td>
                     <td style="line-height:1px;padding:0px;" class="tvCell" width="30" valign="center" align="center">
                        <div onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','1bfd','BtnDropDownRow#',1,'','','','');" class="but">
                           <div><img src="r/std/icons/menu64.png" class="icon" draggable="false" align="absmiddle"></div>
                        </div>
                     </td>
                  </tr>

Solution

  • You keep asking the same type of question, and don't appear to be learning anything from the answers. You really need to just go study CSS selectors and learn them - try https://flukeout.github.io/ and work on it until you understand all the selector types.

    In this case the code you've shown can't be working alone because you're getting text when the value you need is actually in the tooltip attribute of the element. So either your code doesn't work, or you're moving the mouse first and the HTML is changing to something that shows that attribute as the text content of an element.

    to use CSS and get the tooltip value of all the elements you could do something like

    all('tr.tvRow .tvCell:nth-child(6) img[tooltip]').map { |el| el['tooltip'] }
    

    which would return an array of the tooltip attribute values of the elements. Technically you could probably drop the 'tr.tvRow' from the beginning of that and it would still work but better safe than sorry. You could use that CSS in a SitePrism 'elements' statement, but until you really understand CSS selectors SitePrism is really just adding more confusion to things.