Home > Enterprise >  Map element with capybara
Map element with capybara

Time:06-23

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 >
   <div style="display:inline-block;width:100%">
      <img src="r/std/static/pixel.gif"  draggable="false" onclick="sendEvent(0,event,this,true,0,'','1bfd','ControlMenu#','','','','','');"><img src="r/std/static/pixel.gif"  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"  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;" ><img src="r/std/icons/menu64.png"  draggable="false"></div>
      <div onclick="if(notSelecting()) sendEvent(0,event,this,searchImage(this),0,'','1bfd','CambioLabel#','','','','','');"  style="white-space: nowrap;" tooltip="Editar Label">
         <img src="r/std/static/label16.gif"  draggable="false">
         <div ></div>
      </div>
   </div>
</div>
<div>
   <div style="" >
      <div style="display:table;width:100%; background:inherit;">
         <div style="display:table-cell;">
            <table  width="100%">
               <tbody>
                  <tr>
                     <th colspan="1" >Nome</th>
                     <th colspan="1" >Etiqueta</th>
                     <th colspan="1" >Tipo Dado</th>
                     <th colspan="1" >Valores </th>
                     <th colspan="1"  width="1">Preenchimento automático</th>
                     <th colspan="1" >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,'','','');" onm ousedown="if(event.ctrlKey) this.cancelEvent=true;"  style="cursor:pointer;">
                     <td  valign="center" align="left">FLAG_INSERIMENTO_LETTURA_E</td>
                     <td  valign="center" align="left"> Leitura Existente</td>
                     <td  valign="center" nowrap="" align="left"></td>
                     <td  valign="center" align="left"></td>
                     <td  tooltip="" width="1" valign="center" align="left"></td>
                     <td  valign="center" align="center"><img tooltip="Facultativo" src="r/std/static/ok16.gif"></td>
                     <td style="line-height:1px;padding:0px;"  width="30" valign="center" align="center">
                        <div onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','1bfd','BtnDropDownRow#',0,'','','','');" >
                           <div><img src="r/std/icons/menu64.png"  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,'','','');" onm ousedown="if(event.ctrlKey) this.cancelEvent=true;"  style="cursor:pointer;">
                     <td  valign="center" align="left">XWFMSLETMATRICOLA_E</td>
                     <td  valign="center" align="left"> Nº Hidrômetro</td>
                     <td  valign="center" nowrap="" align="left"></td>
                     <td  valign="center" align="left"></td>
                     <td  tooltip="[AIMPMATRICOLA]" width="1" valign="center" align="left">
                        <button onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','1bfd','AUTOFILLBTN#',1,'','','','');"  tabindex="0" tooltip="Preenchimento automático ativado" type="BUTTON">
                           <div><img src="r/std/icons/checkboxselected64.png"  draggable="false" align="absmiddle"></div>
                        </button>
                     </td>
                     <td  valign="center" align="center"><img tooltip="Somente Leitura" src="r/std/static/lock16.gif"></td>
                     <td style="line-height:1px;padding:0px;"  width="30" valign="center" align="center">
                        <div onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','1bfd','BtnDropDownRow#',1,'','','','');" >
                           <div><img src="r/std/icons/menu64.png"  draggable="false" align="absmiddle"></div>
                        </div>
                     </td>
                  </tr>

CodePudding user response:

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.

  • Related