Can someone help me select row from a table with capybara-CodePudding

I opened some calls but I'm going to delete them, I'll explain better in this one. First of all I'm trying hard to learn, I used to clean houses to survive, So excuse me if I have a certain difficulty or not learning at the ideal speed, if that matters in this ruthless world.

Come on, I need to capture line by line from a table and validate with the information from an excel spreadsheet. I don't know if it's possible to read the column of this worksheet but I thought and use expect to capture the text of the tooltip and validate against the text that is written in the worksheet.

In this case that my friend Thomas sent, I list all the texts in the tooltip, but I need to get text by text and do the following validation: page.all('tr.tvRow .tvCell:nth-child(6) img[tooltip]').map { |el| el['tooltip'] }

If it is possible to read each row of the serial table something more or less below because I don't know how to get the line number that I need too

expect(page).to have_css('tr.tvRow .tvCell:nth-child(6) img[tooltip]', exact_text: "Invisível") expect(page).to have_css('tr.tvRow .tvCell:nth-child(6) img[tooltip]', exact_text: "Facultativo") expect(page).to have_css('tr.tvRow .tvCell:nth-child(6) img[tooltip]', exact_text: "Obrigatório") So, if I can get the specific line I can validate the text of the tooltip of this line and make the assertion with the text that is in the worksheet.

[![<td valign="top" colspan="1" rowspan="1">
   <div id="AFRAME_790" onm ousedown="event.preventMoving=true;" style="display: inline-block; box-sizing: border-box; min-width: 100%;" >
      <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,'','790','ControlMenu#','','','','','');"><img src="r/std/static/pixel.gif"  draggable="false" onclick="sendEvent(0,event,this,searchImage(this),0,'','790','SelectNone#','','','','','');" alt="Selecionar Nenhum" tooltip="Selecionar Nenhum"><img src="r/std/static/pixel.gif"  draggable="false" onclick="sendEvent(0,event,this,searchImage(this),0,'','790','SelectAll#','','','','','');" alt="Selecionar todos" tooltip="Selecionar todos">&nbsp;Lista campos
            <div onclick="if(notSelecting()) sendEvent(0,event,this,searchImage(this),0,'','790','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,'','790','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','790','BtnDropDownRow#',0,'','','');return false;} delete this.cancelEvent;" onclick="if(notSelecting()) sendEvent(0,event,this,true,0,'TVXWFMTGINSTATOCE','790','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 align="left"  valign="center" nowrap=""></td>
                           <td valign="center" align="left" ></td>
                           <td align="left" width="1"  valign="center" tooltip=""></td>
                           <td valign="center" align="center" ><img tooltip="Invisível" src="r/std/static/minus16.gif"></td>
                           <td align="center" width="30" style="line-height:1px;padding:0px;"  valign="center">
                              <div onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','790','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','790','BtnDropDownRow#',1,'','','');return false;} delete this.cancelEvent;" onclick="if(notSelecting()) sendEvent(0,event,this,true,0,'TVXWFMTGINSTATOCE','790','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 align="left"  valign="center" nowrap=""></td>
                           <td valign="center" align="left" ></td>
                           <td align="left" width="1"  valign="center" tooltip="\[AIMPMATRICOLA\]">
                              <button onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','790','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="Invisível" src="r/std/static/minus16.gif"></td>
                           <td align="center" width="30" style="line-height:1px;padding:0px;"  valign="center">
                              <div onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','790','BtnDropDownRow#',1,'','','','');" >
                                 <div><img src="r/std/icons/menu64.png"  draggable="false" align="absmiddle"></div>
                              </div>
                           </td>
                        </tr>][1]][1]

CodePudding user response：

You can't use expect(page).to have_css('tr.tvRow .tvCell:nth-child(6) img[tooltip]', exact_text: "Invisível"). The text you are looking for isn't text content of an element (which the text and exact_text options would match against) it's an attribute value - https://www.w3schools.com/html/html_attributes.asp. If you go through the learning experience I sent in my previous answer you would learn about CSS attribute selectors - https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors - which would lead you to something like

expect(page).to have_css('tr.tvRow .tvCell:nth-child(6) img[tooltip="Invisível"]')

if you also need to validate it is in a specific row then you could use the CSS nth-child selector like

expect(page).to have_css('tr.tvRow:nth-child(1) .tvCell:nth-child(6) img[tooltip="Invisível"]')

I would really recommend you go through the learning experience I linked you to - https://flukeout.github.io/ - and learn the CSS if that's what you want to be using to select elements.