Map element with capybara - ruby

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

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

Can someone help me select row from a table with capybara

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" onmousedown="event.preventMoving=true;" style="display: inline-block; box-sizing: border-box; min-width: 100%;" class="tv">
<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,'','790','ControlMenu#','','','','','');"><img src="r/std/static/pixel.gif" class="icon Enabled icon_norows" 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" class="icon Enabled icon_allrows" draggable="false" onclick="sendEvent(0,event,this,searchImage(this),0,'','790','SelectAll#','','','','','');" alt="Selecionar todos" tooltip="Selecionar todos"> Lista campos
<div onclick="if(notSelecting()) sendEvent(0,event,this,searchImage(this),0,'','790','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,'','790','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 width="100%" class="tvGrid">
<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" width="1" class="tvHeader">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','790','BtnDropDownRow#',0,'','','');return false;} delete this.cancelEvent;" onclick="if(notSelecting()) sendEvent(0,event,this,true,0,'TVXWFMTGINSTATOCE','790','Select#',0,'','','');" onmousedown="if(event.ctrlKey) this.cancelEvent=true;" class="tvRow tvRowOdd tvRoll" style="cursor:pointer;">
<td valign="center" align="left" class="tvCell">FLAG_INSERIMENTO_LETTURA_E</td>
<td valign="center" align="left" class="tvCell"> Leitura Existente</td>
<td align="left" class="tvCell" valign="center" nowrap=""></td>
<td valign="center" align="left" class="tvCell"></td>
<td align="left" width="1" class="tvCell" valign="center" tooltip=""></td>
<td valign="center" align="center" class="tvCell"><img tooltip="Invisível" src="r/std/static/minus16.gif"></td>
<td align="center" width="30" style="line-height:1px;padding:0px;" class="tvCell" valign="center">
<div onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','790','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','790','BtnDropDownRow#',1,'','','');return false;} delete this.cancelEvent;" onclick="if(notSelecting()) sendEvent(0,event,this,true,0,'TVXWFMTGINSTATOCE','790','Select#',1,'','','');" onmousedown="if(event.ctrlKey) this.cancelEvent=true;" class="tvRow tvRowEven tvRoll" style="cursor:pointer;">
<td valign="center" align="left" class="tvCell">XWFMSLETMATRICOLA_E</td>
<td valign="center" align="left" class="tvCell"> Nº Hidrômetro</td>
<td align="left" class="tvCell" valign="center" nowrap=""></td>
<td valign="center" align="left" class="tvCell"></td>
<td align="left" width="1" class="tvCell" valign="center" tooltip="\[AIMPMATRICOLA\]">
<button onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','790','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 valign="center" align="center" class="tvCell"><img tooltip="Invisível" src="r/std/static/minus16.gif"></td>
<td align="center" width="30" style="line-height:1px;padding:0px;" class="tvCell" valign="center">
<div onclick="event.cancelBubble=true;sendEvent(0,event,this,searchImage(this),0,'','790','BtnDropDownRow#',1,'','','','');" class="but">
<div><img src="r/std/icons/menu64.png" class="icon" draggable="false" align="absmiddle"></div>
</div>
</td>
</tr>][1]][1]
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.

HTML signature leaves big spaces between rows (Gmail App from Outlook)

This is how it looks in GMail mobile app when sent from Outlook:
How can I avoid those big gaps?
My code is as follows:
<table id="sig" width='320' cellspacing='0' cellpadding='0' border-spacing='0' style="width:320px;margin:0;padding:0;">
<tr>
<td valign='top' width="120" height="48" style="width:120px;height:48px;margin:0;padding:0;vertical-align:top;">
<a style="border:none;text-decoration:none;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/logo.jpg" alt="Crisalix" width='120' height='48' style="border:none;width:120px;height:48px;display:block;">
</a>
</td>
</tr>
<tr>
<td>
<table id="sig1" cellspacing='0' width='320' cellpadding='0' border-spacing='0' style="padding:0;margin:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;mso-line-height-rule:exactly;line-height:11px;color:#b0b0b0;border-collapse:collapse;-webkit-text-size-adjust:none;width:320px;">
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-weight:600;line-height:1.6;font-size:13px;">
<span style="color:#137191">Jaime</span>
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-size:12px;line-height:1">
<span style="color:#555555">Chief Executive Officer</span>
</td>
</tr>
<tr>
<td valign='top' width="27" height='21' style="width:27px;height:1px;margin:0;padding:0;vertical-align:top;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/separator.jpg" alt="Crisalix" width='27' height='21' style="border:none;width:27px;height:21px;display:block;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-size:12px;line-height:1.4;">
<div><span style="color:#137191;font-weight:bold">P / </span><span style="color:#555555;"></span></div>
<div><span style="color:#137191;font-weight:bold">A / </span><span style="color:#555555">Parc Scientifique (PSE-A) - EPFL1015</span></div>
<div> <span style="color:#555555"> Lausanne | Switzerland </span></div>
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-weight:600;line-height:1.6;font-size:13px;width:320px;">
<span style="color:#137191;border:none;text-decoration:none!important;color:#137191;">www.crisalix.com</span>
</td>
</tr>
<tr>
<td valign='top' width="27" height='21' style="width:27px;height:1px;margin:0;padding:0;vertical-align:top;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/separator.jpg" alt="Crisalix" width='27' height='21' style="border:none;width:27px;height:21px;display:block;">
</td>
</tr>
</td>
</table>
</tr>
<tr>
<td valign='top' width="230" height="225" style="width:230px;height:225px;margin:0;padding:0;vertical-align:top;">
<a href='http://www.crisalix.com' title="Crisalix" style="border:none;text-decoration:none;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/signature-banner.jpg" alt="Crisalix" width='230' height='225' style="border:none;width:230px;height:225px;display:block;">
</a>
</td>
</tr>
</table>

Selecting checkbox in a table from specific row and column using Capybara

I am new with Capybara and I need to select checkbox that is in the same column where is Wednesday. How can I select it? I tried several ways but I still get this error that element not found.
HTML part looks like this:
<table class="grid">
<thead>
<tr>
<th colspan="1" rowspan="1" style="width: 56px;">From</th>
<th colspan="1" rowspan="1" style="width: 56px;">To</th>
<th colspan="1" rowspan="1">Monday</th>
<th colspan="1" rowspan="1">Tuesday</th>
<th colspan="1" rowspan="1">Wednesday</th>
<th colspan="1" rowspan="1">Thursday</th>
<th colspan="1" rowspan="1">Friday</th>
<th colspan="1" rowspan="1">Saturday</th>
<th colspan="1" rowspan="1">Sunday</th>
<th colspan="1" rowspan="1" style="width: 18px;"></th>
</tr>
</thead>
<tbody>
<tr class="t-forminjector" id="rowInjector_1470ffb567f" style=
"background-image: none; background-color: rgba(0, 0, 0, 0);">
<td colspan="1" rowspan="1" xmlns=
"http://www.w3.org/1999/xhtml">
<input name="t:formdata" type="hidden" value=
"H4sIAAIDOPgvsNqt">
<div class="timepicker"><input class=
"timepicker-input patternDailyStart hasDatepicker" id=
"patternDailyStart_1470ffb567f" name=
"patternDailyStart_1470ffb567f" type="text" value="">
<img alt="..." class="ui-datepicker-trigger" src=
"clock.png" title="..."></div><img alt="" class=
"t-error-icon" id="patternDailyStart_1470ffb567f_icon" src=
"spacer.gif" style="display: none;">
</td>
<td colspan="1" rowspan="1" xmlns=
"http://www.w3.org/1999/xhtml">
<div class="dailyEnd">
<div class="timepicker"><input class=
"timepicker-input patternDailyEnd hasDatepicker" id=
"patternDailyEnd_1470ffb567f" name=
"patternDailyEnd_1470ffb567f" type="text" value="">
<img alt="..." class="ui-datepicker-trigger" src=
"clock.png" title="..."></div><img alt="" class=
"t-error-icon" id="patternDailyEnd_1470ffb567f_icon" src=
"spacer.gif" style="display: none;"></div>
</td>
<td colspan="1" rowspan="1" xmlns=
"http://www.w3.org/1999/xhtml"><input id="checkbox_1470ffb567f"
name="checkbox_1470ffb567f" type="checkbox"> <img alt="" class=
"t-error-icon" id="checkbox_1470ffb567f_icon" src=
"/mpromoter/assets/8fe900a87e3fabc9/core/spacer.gif" style=
"display: none;"></td>
<td colspan="1" rowspan="1" xmlns=
"http://www.w3.org/1999/xhtml"><input id=
"checkbox_0_1470ffb567f" name="checkbox_0_1470ffb567f" type=
"checkbox"> <img alt="" class="t-error-icon" id=
"checkbox_0_1470ffb567f_icon" src=
"/mpromoter/assets/8fe900a87e3fabc9/core/spacer.gif" style=
"display: none;"></td>
<td colspan="1" rowspan="1" xmlns=
"http://www.w3.org/1999/xhtml"><input id=
"checkbox_1_1470ffb567f" name="checkbox_1_1470ffb567f" type=
"checkbox"> <img alt="" class="t-error-icon" id=
"checkbox_1_1470ffb567f_icon" style="display: none;"></td>
<td colspan="1" rowspan="1"><input id="checkbox_2_1470ffb567f"
name="checkbox_2_1470ffb567f" type="checkbox"> <img alt=""
class="t-error-icon" id="checkbox_2_1470ffb567f_icon" src=
"/mpromoter/assets/8fe900a87e3fabc9/core/spacer.gif" style=
"display: none;"></td>
<td colspan="1" rowspan="1"><input id="checkbox_3_1470ffb567f"
name="checkbox_3_1470ffb567f" type="checkbox"> <img alt=""
class="t-error-icon" id="checkbox_3_1470ffb567f_icon" src=
"/mpromoter/assets/8fe900a87e3fabc9/core/spacer.gif" style=
"display: none;"></td>
<td colspan="1" rowspan="1"><input id="checkbox_4_1470ffb567f"
name="checkbox_4_1470ffb567f" type="checkbox"> <img alt=""
class="t-error-icon" id="checkbox_4_1470ffb567f_icon" src=
"/mpromoter/assets/8fe900a87e3fabc9/core/spacer.gif" style=
"display: none;"></td>
<td colspan="1" rowspan="1"><input id="checkbox_5_1470ffb567f"
name="checkbox_5_1470ffb567f" type="checkbox"> <img alt=""
class="t-error-icon" id="checkbox_5_1470ffb567f_icon" src=
"/mpromoter/assets/8fe900a87e3fabc9/core/spacer.gif" style=
"display: none;"></td>
<td colspan="1" rowspan="1" xmlns=
"http://www.w3.org/1999/xhtml">
<a href="#" id="removerowlink_1470ffb567f"><img alt="" src=
"/mpromoter/assets/8fe900a87e3fabc9/ctx/images/delete.ico"
title="Remove"></a>
</td>
</tr>
<tr class="t-forminjector" id="rowInjector">
<td></td>
</tr>
</tbody>
</table>
When I copy the xpath then it looks like this: //*[#id="checkbox_1_1470ffb567f"]
That checkbox's id is every time different ( in the end those numbers change every time when I open the page.) But the checkbox_1 part is the same.
You can use the contains() function:
//*[contains(#id, "checkbox_1_")]

How to create a two column email newsletter

I am trying to create a two column email flyer but I'm having trouble with the coding as Outlook hates CSS.
I'm using tables to keep it as simple as possible but I want two separate tables on the left and the right so I can add data into it as I wish.
I tried using float left and right on the two tables but Outlook ignores this style.
I know the two grey tables at the bottom are each in their own separate "holder" tables but this is so I can duplicate the grey "data" tables for when I add new articles.
<table class="all" width="auto" height="auto" border="0" cellspacing="0"><tr><td height="504">
<table width="750" height="140" border="0" cellspacing="0">
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="345" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td align="center" valign="bottom" bgcolor="#E6E6E6"><font color="#111111" face="Arial Narrow" size="+2">DECEMBER NEWSLETTER</font></td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"><font size="2"><strong>#4 - <span class="orange">04.12.13</span></strong></font></td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75" height="50" bgcolor="#E6E6E6" scope="row"> </td>
<td width="600" rowspan="2" scope="row"><img src="http://placehold.it/600x200"/></td>
<td width="75" bgcolor="#E6E6E6" scope="row"> </td>
</tr>
<tr>
<td width="75" height="81" scope="row"> </td>
<td scope="row"> </td>
</tr>
</table>
<table class="holder" width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" scope="row">
<table class="inlinetableleft" width="360">
<tr>
<td width="371" align="left">
<!------------LEFT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<th height="103" colspan="4" align="left" valign="middle" bgcolor="#CCCCCC" scope="row"> </th>
</tr>
</table>
<!--------------LEFT COLUMN END------------->
</td>
</tr>
</table>
<table class="inlinetableright" width="360">
<tr>
<td align="left">
<!------------RIGHT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="106" align="left" bgcolor="#CCCCCC" scope="row"> </td>
</tr>
</table>
<!-----------RIGHT COLUMN END-------------->
</td></tr>
</table>
</td>
</tr>
</table>
Here is a fiddle of my newsletter so far, it's the bottom two grey tables that I want to be side by side.
Fiddle
For HTML emails, nested tables are your friend :)
JSFiddle
Note: the border around the table is just to show you where the tables are.
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">
header content here
</td>
</tr>
<tr>
<td width="300">
<table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
<tr>
<td>Left Content</td>
</tr>
</table>
</td>
<td width="300">
<table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
<tr>
<td>Right content</td>
</tr>
</table>
</td>
</tr>
</table>

HTML Agility Pack xpath expression assistance

I have html like the following:
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="2">
<tr>
<td height="20" colspan="2">
</td>
</tr>
<tr>
<td height="20" colspan="2" class="fontDestaque2NegritoHome">
MATRÍCULA: PPAAG
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
</td>
<td align="right" valign="middle" class="tx_bd">
</td>
</tr>
<tr>
<td width="35%" align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Fabricante:</span>
</div>
</td>
<td width="59%" align="right" valign="middle" class="tx_bd">
<div align="left">
CESSNA AIRCRAFT</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Modelo:</span>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
T206H</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Número de Série:</span>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
T20608735</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left" class="tx_bold">
Tipo ICAO :
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
C206</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Tipo de Habilitação para Pilotos:</span>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
MNTE</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Classe da Aeronave:</span>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
POUSO CONVECIONAL 1 MOTOR CONVENCIONAL</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Peso Máximo de Decolagem:</span>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
1633 - Kg</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Número Máximo de Passageiros:</span>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
005</div>
</td>
</tr>
<tr>
<td colspan="2" align="right" valign="middle" class="tx_bd">
<div align="left">
</div>
</td>
</tr>
<tr>
<td colspan="2" align="right" valign="middle" background="../images/bgPontilhado.gif"
class="tx_bd">
<div align="left">
<img src="../images/bgPontilhado.gif" width="4" height="1"></div>
</td>
</tr>
<tr>
<td colspan="2" align="right" valign="middle" class="tx_bd">
<div align="left">
</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Categoria de Registro:</span>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
PRIVADA SERVICO AEREO PRIVADOS</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Número dos Certificados (CM - CA)</span>:
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
19040</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Situação no RAB:</span><span class="stop_litle">
</span>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="fontRed">ARRENDAMENTO OPERACIONAL/ALIENACAO FIDUCIARIA</span></div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Data da Compra/Transferência:</span>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
</div>
</td>
</tr>
<tr>
<td colspan="2" align="right" valign="middle" class="tx_bd">
<div align="left">
</div>
</td>
</tr>
<tr>
<td colspan="2" align="right" valign="middle" background="../images/bgPontilhado.gif"
class="tx_bd">
<div align="left">
<img src="../images/bgPontilhado.gif" width="4" height="1"></div>
</td>
</tr>
<tr>
<td colspan="2" align="right" valign="middle" class="tx_bd">
<div align="left">
</div>
</td>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Data de Validade do CA: </span>
</div>
</td>
<td width="3%" align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bd">21/05/16</span></div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="tx_bd">
<div align="left" class="tx_bold">
<div align="left">
Data de Validade da IAM:
</div>
</div>
</td>
<td align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bd">110513</span></div>
</td>
</tr>
<tr>
<td height="18" align="right" valign="middle" class="tx_bd">
<div align="left">
<span class="tx_bold">Situação de Aeronavegabilidade:</span>
</div>
</td>
<td height="18" align="right" valign="middle" class="tx_bd">
<div align="left">
Normal</div>
</td>
</tr>
<tr>
<td height="18" colspan="2" align="right" valign="middle" class="tx_bd">
<div align="left" class="tx_bold">
Motivo(s):
</div>
</td>
</tr>
<tr>
<td height="18" colspan="2" align="right" valign="middle" class="tx_bd">
<div align="left">
<blockquote>
<p>
<span class="tx_bold"></span>
</p>
</blockquote>
</div>
</td>
</tr>
<tr>
<td height="18" colspan="2" align="left" valign="middle" class="tx_bd">
Consulta realizada em: 16/8/2012 15:52:45<br>
</td>
</tr>
I want to grab the following text:
Cessna Aircraft
T206H
T20608735
C206
MNTE
POUSO CONVECIONAL 1 MOTOR CONVENCIONAL
1633 - Kg
005
PRIVADA SERVICO AEREO PRIVADOS
19040
ARRENDAMENTO OPERACIONAL/ALIENACAO FIDUCIARIA
21/05/16
110513
Normal
Some of the div's just contain the text I need. Other div's contain a span that contains the text I need. How would I construct the xpath for this?
Use:
//tr/td[#align='right' and #valign='middle' and #class='tx_bd']
/div[#align='left 'and not(*)]
/text()

Resources