I am creating an email that has 2 sections of text, 2 images and a button in the middle. I am able to move the images into a fixed position just fine, but with text I only know how to move it left, center, or right. I basically want the text in between that. For example the first section of text I want it in between center and right.
Here is the Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="img" style="font-size: 0pt; line-height: 0pt; text-align: Center; width: 20px;"> </td>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<div align="center">
<td valign="top" class="column-280" style="width: 200px;">
<IMG STYLE="position:absolute; BOTTOM:-5px; LEFT:125px; WIDTH:125px; HEIGHT:150px" <img src="https://qa.travelinsured.com/images/email/red-clock.png?Status=Temp&sfvrsn=2" alt="Pete's Promise Badge" height="150" width="150" align="Right">
<div style="font-size: 0pt; line-height: 0pt; height: 12px;"><img alt="" width="1" height="12" src="http://www2.travelinsured.com/rs/travelinsured/images/empty.gif" style="height: 12px;" /></div>
<p> <div style="color: #656565; font-family: Arial; font-size: 13px; line-height: 18px; text-align: Center;">Time is running out!</p><br><p>There's still time to vote!</p><br><p>Please vote for Travel Insured's<br>Agent Loyalty Program today!</p>
Position as well as bottom, left, right, etc. all are not very consistent across clients and major clients like Outlook, Gmail and Yahoo do not support them at all. (ref: https://www.campaignmonitor.com/css/).
Your best bet is to use tables for all layouts. This means using nested tables as well as tds and padding to specify locations. It is not forgiving nor easily transferred to a mobile view, but for as close to an exact positioning need as you can get, it is really the only way to create it consistently across clients.
Related
I have a report which is completely of HTML based. I'm trying to automate and using selenium webdriver for finding the elements. In one of the part, below is the HTML format
<tbody>
<tr>
<td style="border: 1px solid #D1D1D1; background-color:#F4F4F4; color: #707070;padding :2px;">
<table style="width: 100%;
border-collapse: collapse; font-size: 15px;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;" role="presentation">
<tbody><tr>
<!--Action Date -->
<td></td>
<td width="100%" valign="top" align="right">
<span style="font-size: 12px;">12/7/20 10:21 AM</span>
</td>
</tr>
<tr>
<!-- Name and status column -->
<td style="" width="25" valign="top" align="center">
<img src="images/qual_checkmark_24.png" alt="">
</td>
<td width="535">
<span>First line of <strong>TEXT</strong></span>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="border: 1px solid #D1D1D1; background-color:#F4F4F4; color: #707070;padding :2px;">
<table style="width: 100%;
border-collapse: collapse; font-size: 15px;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;" role="presentation">
<tbody><tr>
<!--Action Date -->
<td></td>
<td width="100%" valign="top" align="right">
<span style="font-size: 12px;">12/7/20 10:18 AM</span>
</td>
</tr>
<tr>
<!-- Name and status column -->
<td style="" width="25" valign="top" align="center">
<img src="images/qual_arrowupcircleblue_24.png" alt="">
</td>
<td width="535">
<span>Second line of<strong>TEXT</strong></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I wanted to find the text in span tag (eg: first line of text, second line of text ) where i don't have any other attributes. I tried various other way of finding it via xpath, cssSelector and nothing works. Could someone help?
Try to use this XPath to select span nodes without attributes:
//span[not(#*)]
//tbody/tr[2]/td/span
you can use the parent as reference, in the html you provided the span is under the tr which is second element of tbody.
//tbody/tr[2] , will find all elements which are second child of tbody , and then direct child td/span
A combination of both answers would be probably best:
//tbody/tr/td/span[not(#*)]
It's still flexible and less error-prone at the same time.
There are two sets of <span> tags. One that holds the datetime e.g. 12/7/20 10:18 AM and the other that holds the text e.g TEXT.
To print the list of <span> tag texts you need to induce WebDriverWait for the visibilityOfAllElementsLocatedBy() and you can use Java8 stream() and map() and you can use either of the following Locator Strategies:
xpath:
List<String> myTexts = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//tbody//tr/td/table/tbody//tr//td/span[./strong]"))).stream().map(element->element.getText()).collect(Collectors.toList());
System.out.println(myTexts);
Below is the code used. Trying to get an image to display ony if the associated field is not empty. Thanks for any help you all can give! Message states the error is on Line 42, column 8.
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%;" width="100%">
<!-- START header -->
<tbody>
<tr>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:720px;border-top:1px solid #cccccc;border-right:1px solid #cccccc;border-left:1px solid #cccccc;" width="720">
<tbody>
<tr>
<td style="background:#ffffff;width:720px;height:auto; border-bottom: 1px solid #eaeaea; padding-top: 20px; padding-bottom: 20px; padding-left: 27px;" valign="top" width="720">
<font color="#222222">
<img alt="IQAir" id="" name="" src="https://hosting.fyleio.com/40620/public/SanSerif_Desktop_01.jpg?c=1561752071758" style="border: 0px; display: block; width: 300px;" />
</font>
<p style="line-height: 19px; margin-top: 0px; padding-top: 10px;"><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#666666;">Dear ${customer.firstName}, </span></span>
</span><br />
<br />
<br />
<span style="font-size:11.0pt"><span style="font-family:Calibri">It's our pleasure to inform you that your preliminary personalized perfect16 evaluation is almost ready. However, in order to be as accurate as possible we need the following missing information:<br />
<br />
<#if (transaction.custbody117)?has_content></#if><img src=${transaction.custbody135}#elseif<#if (transaction.custbody122)?has_content>img src=${transaction.custbody139}<#if (transaction.custbody118)?has_content>img src=${transaction.custbody140}<#if (transaction.custbody119)?has_content>img src=${transaction.custbody141}<#if (transaction.custbody120)?has_content>img src=${transaction.custbody142}>
<br />
<br />
<span style="font-size:11.0pt"><span style="font-family:Calibri">You may also contact our office for assistance with the missing information so we can continue the analysis of the project. </span></span><br />
<br />
<span style="font-size:11.0pt"><span style="font-family:Calibri"> </span></span><br />
<span style="font-size:11.0pt"><span style="font-family:Calibri">Please feel free to contact me if you have any questions.</span></span><br />
<br />
<br />
</span><br />
</p>
<p style="color: rgb(102, 102, 102); font-family: Arial, Helvetica-Neue, Helvetica, sans-serif; font-size: 8px; margin-bottom: 10px;">
<font color="#222222" face="Arial, Verdana, sans-serif"><span style="font-size: 12px;"> src="https://hosting.fyleio.com/40620/public/SanSerif_Desktop_01.jpg?c=1561752071758" style="background-color: rgb(255, 255, 255); border: 0px currentcolor; vertical-align: middle; width: 64px; height: 16px;" /> </span></font>
<span
style="color:#666666;">
<font face="Arial, Verdana, sans-serif"><span style="font-size: 12px;"><span style="font-size:10px;"><span style="font-family:arial,helvetica,sans-serif;"> <span style="background-color: rgb(255, 255, 255);">©</span> 2020 IQAir North America, Inc. All
rights reserved.</span>
</span>
</span>
</font>
</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top"> </td>
</tr>
<!-- END content -->
</tbody>
</table>
Seems like you missed closing this tag: <span style="font-size:11.0pt"/>
I am attempting to click a button using Robot Framework - Selenium.
The element of the button looks like this:
<div id="isc_7A" eventproxy="addButton" onfocus="isc.EH.focusInCanvas(addButton_label,true);" onblur="if(window.isc)isc.EH.blurFocusCanvas(addButton_label,true);" tabindex="-1" style="position: absolute; left: 6px; top: 1px; width: 65px; height: 22px; z-index: 201603; overflow: visible; cursor: pointer;" onscroll="return addButton.$lh()">
<div id="isc_79" eventproxy="addButton" style="position: relative; visibility: inherit; z-index: 201603; cursor: pointer;">
<table cellspacing="0" cellpadding="0" width="1" height="22">
<tbody>
<tr>
<td nowrap="true" class="stretchImgButton" align="center" valign="center" tabindex="-1" onfocus="addButton_label.$47()">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="stretchImgButton" style="margin:0px;border:0px;padding:0px;background-image:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;font-size:1px;padding-right:6px"><img src="https://hq-foxtrot-s1.hq-foxtrot.defencetest.local:10006/journal/images/tag_new.png" width="16" height="16" align="absmiddle" name="isc_79addButton_label$4u" style="vertical-align:middle" eventpart="icon" border="0" suppress="TRUE"></td>
<td class="stretchImgButton" style="margin:0px;border:0px;padding:0px;background-image:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;" nowrap="true">New Tag</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
My tests in PyCharm looks like this:
*** Settings ***
Documentation Create a new tag
Library SeleniumLibrary
*** Test Cases ***
This is some basic info about the test
[Documentation] This is some basic info about the test
[Tags] Smoke
Open Browser [website] chrome
Sleep 10sec
wait until page contains element css=#isc_7A
click button css=#isc_7A
I've also tried using the xpath of the element, but still no success. The xpath looks like this:
//*[#id="isc_7A"]
Need to check the specific cell value from a table in selenium.
As per the GUI view it is the 5th column of 1st Row and I need to keep reading the value of this cell until it changes to some other state from in progress state.Following is the XML:
<html>
<head><style>
BODY
{
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
scrollbar-face-color: #666699;
scrollbar-3dlight-color: #c2c8e2;
scrollbar-shadow-color: #c2c8e2;
scrollbar-highlight-color: #666699;
scrollbar-darkshadow-color: #666699;
scrollbar-arrow-color: #e6eef7;
scrollbar-track-color: #e6eef7;
background-color: rgb(255, 255, 255);
}
TD
{
color: #000000;
font-size: 8pt;
}
</style></head>
<body topMargin="0" leftMargin="0" onload="javascript:OnLoad();" onunload="javascript:closeWin();"><div id="divMainTbl" style="width: 1358px; height: 182px; overflow: auto; position: relative;" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0"><form name="frmDSV" id="frmDSV" style="margin-top: 0px; margin-bottom: 0px;" action="/epace/epace-cgi/pacecgi.exe?sessionid=" method="post" target="ifChildEvents"><table width="100%" id="tblQ" border="0" cellSpacing="0" cellPadding="0" nowrap="" xmlns:user="" xmlns:msxsl=""><tbody><tr style="background-color: rgb(241, 241, 241);">
<td noWrap="">
In Progress
</td>
</tr></tbody></table></form></div></body></html>
<DIV id="divMainTbl" style='position:
<TABLE id="tblQ" WIDTH="100%" BOR>
<TR>
-- Column <tds
</TR>
<tr style="background-color:#F1F1F1;">
<td class="HU2"> 1 </td>
<td nowrap width="2%" height="15" </td>
<td nowrap> Positions </td>
<td nowrap> Data Upload </td>
<td nowrap> Completed </td>
Looks like that's the only td you have. If so it's fairly easy.
//div[#id='divMainTbl']//td
Since the div has an id it easier to start from there and find the ONLY td accordingly.
There is a drop down with an arrow on the side which opens up a sub menu. I am not able to click on the dropdown in chrome whereas its working in ie.
I tried hover and click and actions build too. But it's not working.
The code is as follows:
<div id="navigatortab" class=" x-plain undefined sd_nav_tabpanel x-border-panel" style="left: 0px; top: 0px; width: 1600px;">
<div id="ext-gen32" class="support-servicedesk-navigator">
<table id="ext-comp-1014" class="x-btn support-servicedesk-sb support-servicedesk-sbactive caseMru x-btn-noicon" cellspacing="0" style="width: 180px; height: 26px; background-image: none; background-color: transparent;">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<tr>
<td class="x-btn-ml">
<td class="x-btn-mc">
<em id="ext-gen41" class="x-btn-split" unselectable="on">
<button id="ext-gen33" class=" x-btn-text" type="button">
<div class="mruIcon"></div>
<span>Cases</span>
</button>
</em>
</td>
<td class="x-btn-mr">
</tr>
<tr>
</tbody>
</table>
</div>