same xpath for two td elements in div - html

i am trying to click on 2nd item(Not Know) in the Td element. I was able to click on the 1st item(known Issue) by using its xpath. How ever i am not able to do the same thing with the 2nd option. i am getting following error
Unable to locate an element with the xpath expression
//*[#id='group_tree']/div/div/div/div[1]/div/div[1]/table/tbody/tr/td[[contains(text(), 'Not Known')]
because of the following error:
below is my code:
driver.findElement(By
.xpath("//*[#id='group_tree']/div/div/div/div[1]/div/div[1]/table/tbody/tr/td[[contains(text(), 'Not Known')]"));
and my HTML is
<div style="display: block;">
<div>
<table cellspacing="0px" cellpadding="0px"
style="background-color: transparent;">
<tbody>
<tr>
<td><img class="tree" src="images/s.gifx" alt=""
style="margin-left: 16px;"></td>
<td class="tree_spacer"><img alt="" src="images/nav_bult.gifx"></td>
<td title="" class="tree_item_text"><a
name="37fd8721a9729140d11a2c59127b17a6">Known issue</a><span></span></td>
</tr>
</tbody>
</table>
<div></div>
</div>
<div>
<table cellspacing="0px" cellpadding="0px"
style="background-color: transparent;">
<tbody>
<tr>
<td><img class="tree" src="images/s.gifx" alt=""
style="margin-left: 16px;"></td>
<td class="tree_spacer"><img alt="" src="images/nav_bult.gifx"></td>
<td title="" class="tree_item_text"><a
name="ea1e8721a9729140d11a2c59127b17fb">Not known</a><span></span></td>
</tr>
</tbody>
</table>
<div></div>
</div>
</div>
i tried finding the element by name, by xpath and contains but everything is throwng error
Please Help

Before doing anything first check if your html is valid, I verified that your html misses matching </img> tags for the existing <img> tags.
Now, I assume you want the td elements with Known issue and Not known as text for a elements.
The following xpaths will give you those :
//td[#class='tree_item_text' and ./a/text()='Known issue']
//td[#class='tree_item_text' and ./a/text()='Not known']

Related

Format Image to Press Up Against Table (HTML)

I'm trying to get the social media sprites in this HTML table at https://www.alexcurriemedia.com/video/ to press up flush with the image above it. Cannot figure out a way to do this.
Can't add another table above it because the upper image is a wordpress shortcode that doesn't seem to work within the table.
Here is the code:
<table><center>[wds id="3"]
<td nowrap><a href="http://www.facebook.com/alexcurriemedia" target="_blank">
<div class='sprite Facebook1' width="100"></div></a></td>
<td nowrap><a href="http://www.twitter.com/alexcurriemedia" target="_blank">
<div class='sprite Twitter1'></div></a></td>
<td nowrap><a href="http://www.flickr.com/alexcurrie" target="_blank">
<div class='sprite Flickr1'></div></a></td>
<td nowrap><a href="http://www.alexcurriemedia.tumblr.com" target="_blank">
<div class='sprite Tumblr1'></div></a></td>
<td nowrap><a href="http://www.instagram.com/alex.currie" target="_blank">
<div class='sprite Instagram1'></div></a></td><td></td>
</center></table>
Thanks so much!!
The stray <p> tags that you see are likely a result of Wordpress automatically inserting them through the text editor. You should not place a <div> inside of an <a> tag if at all possible. While technically valid, I've seen it cause problems with things such as Wordpress's text editor. If you look at the source code in your browser, you will notice that the link is actually being rendered twice, like so:
<td nowrap="">
<a href="http://www.twitter.com/alexcurriemedia" target="_blank"><p></p>
<div class="sprite Twitter1"></div>
</a>
<p>
</p>
</td>
The following code should work better:
<table>
<tbody><tr>
<td nowrap>
</td>
<td nowrap>
<a class="sprite Twitter1" href="http://www.twitter.com/alexcurriemedia" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Flickr1" href="http://www.flickr.com/alexcurrie" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Tumblr1" href="http://www.alexcurriemedia.tumblr.com" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Instagram1" href="http://www.instagram.com/alex.currie" target="_blank"></a>
</td>
</tr>
</tbody>
</table>
Once you change that, simply add the following to your CSS:
.sprite {
display: block;
}
This will cause the content in each <td> to align at the top, rather than in the center as they are doing currently.
If you still have trouble with the <p> tags being automatically inserted, you may look into this function.
End result:

ExtJs HTML/DOM code optimization

Spent already a lot of resources to figure out how to optimize extJs HTML code.
I have simple combobox with a label and extjs throw on a page this:
<tr role="presentation" id="inputs[1].TypeId-inputRow" class="x-form-item-input-row">
<td role="presentation" id="inputs[1].TypeId-labelCell" style="" valign="top" halign="left" width="88" class="x-field-label-cell">
<label
id="inputs[1].TypeId-labelEl"
for="inputs[1].TypeId-inputEl"
class="x-form-item-label x-unselectable x-form-item-label-left"
style="width:83px;margin-right:5px;" unselectable="on">
Placement ID:
</label>
</td>
<td role="presentation" class="x-form-item-body x-form-trigger-wrap-focus" id="inputs[1].TypeId-bodyEl" colspan="2">
<table id="inputs[1].TypeId-triggerWrap" class="x-form-trigger-wrap" cellpadding="0" cellspacing="0" style="table-layout: auto;">
<tbody>
<tr>
<td id="inputs[1].TypeId-inputCell" class="x-form-trigger-input-cell">
<div class="x-hide-display x-form-data-hidden" role="presentation" id="ext-gen1311">
</div>
<input
id="inputs[1].TypeId-inputEl"
type="text"
class="x-form-field x-form-required-field x-form-text x-trigger-noedit x-form-focus x-field-form-focus x-field-default-form-focus"
autocomplete="off"
name="inputs[1].TypeId"
placeholder="DATA SOURCE"
readonly="readonly"
aria-invalid="false"
data-errorqtip=""
style="width: 137px;">
</td>
<td valign="top" class=" x-trigger-cell x-unselectable" style="width:22px;" id="ext-gen1310">
<div class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-first" role="button" id="ext-gen1309">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
How could I change tables inside a tables just for simple xtype: 'combobox'?
I have hundreds like that on a page, it slows down a lot because very heavy HTML code.
it could be done with simple div wit ha float on it, why does extJS renders all this table code?
If you want/need a simpler markup in Ext, the only way is to code your own component where you can define a simpler one.
There is no way of simplifying the Ext generated markup without a danger of breaking functionality or layout engine.

Table tr td cant get text in one lane

I'm trying to build a newsletter for an email campaign. I have to build it with tables and all that cause most of the email clients ignore thinks like div etc. now I have the problem that I would like to have the text obertauern ...... in one line and under it the line ( <hr> ) but its not working the way I would like to have it.
On the pic you can see what I'm trying to do and I put the html into jsfiddle.
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<td colspan="2">
<img src="head.jpg" width="700" border="0">
</td>
<tr>
<td colspan="2">
<p style="color:#00668a;text-align:left;font-size:18px;">
Wer den Sonnenskilauf im SalzburgerLand noch intensiv genießen möchte, den erwarten strahlender Sonnenschein, bestens präparierte Pisten und sensationelle Urlaubsangebote:
</p></td>
</tr>
<tr style="background-color:#deeef4;">
<td width="130" cellpadding="0" ><p style="color:#00668a;padding:10px">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span></p><a href="http://urlaub.salzburgerland.com/de/winterurlaub?utm_campaign=RK_WI_13&utm_medium=DE&utm_source=CARE-Verlag&utm_content=Newsletter" target="_blank">
<img src="ab1.jpg" width="250" height="138" border="0" style="padding:10px"></a>
<td width="200" height="163"><p>"Sund and Fun Wochen"</p>
<ul>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
</ul><img src="button.png" width="345" height="35" border="0"></td></td>
</tr>
</table>
jsfiddle
just use the border property to create the line and change the p to a div so you do not put a lot of space after it:
<tr>
<td colspan="2">
<div style="border-top: solid 1px #00668a;height:1px;">
Here is a jFiddle:
http://jsfiddle.net/qXxPb/2/
Try:
<td width="600" cellpadding="0" >
For the td where the text is located (or use something else than 600).
I fixed your jFiddle: http://jsfiddle.net/mSLf4/5/
Should work like that, you missed some tablecells and I made your sentence in an extra row + set the cell to span over 2 cells.
Should work now, next time validate your code first please.
<td colspan="2">...</td>
was the important line.

GWT - Celltable image flickering on Chrome

We have a custom implementation of CellTable in which there is a custom column to render label and image. As part of hovering on a table row, we call table.redrawRow(rowNum) to render some context menu.
However, doing that, cause the text and image column to re-render the image (make a server call to fetch the image). This causes a flickering effect. This only happens in Chrome (version I am using - Chrome27)
The table row looks like this:
<tr __gwt_row="0" __gwt_subrow="0" class="GAH0TQLMKD">
<td class="GAH0TQLKKD GAH0TQLNKD GAH0TQLOKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-65" tabindex="0">
<div style="border-collapse: separate; border-spacing:0">
<div style="display:table-cell;vertical-align:middle">
<img src="icon.png" alt="" style="vertical-align:middle; border: 0;width:16px;height:16px; ">
</div>
<div class="GAH0TQLMJD" style="display:table-cell"><b>Contiki</b></div>
</div>
</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-66">Travels</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-67">Blah</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-68">Blah</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-69">2013-07-10</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-70">5</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-71">07/10/2013 01:53 AM</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD GAH0TQLILD GAH0TQLDAD" align="right">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-72">
<div class="GAH0TQLFAD">
<div style="width:64px; height:17px"></div>
</div>
</div>
</td>
</tr>
I don't see flickering on Firefox or IE9.
Note: My Cache-Control headers are set to no-cache.
Any thoughts? Ideas?
If you ask the browser not to cache the image, and you ask it to draw the image, it'll re-download it.
So either change your caching strategy for the image, and/or your strategy for updating the table (using a redrawRow during a hover to display something new seems suboptimal; the cells should rather listen to the mouse events and update their DOM dynamically)

CSS HTML organize 5 images - cross-browser compatible

I've got 5 images I'd like to organize in an ASP.NET MVC view. So what I need is an HTML+CSS solution (I prefer not to use jQuery for this, for maximal compatibility).
I want to organize the images like so:
Image1 Image2
Image3 Image4
Image5
At first I tried using tables, with the HTML being:
<div class="table1">
<table border=1>
<tbody>
<tr>
<td>
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Body.Contouring.jpg" />
</td>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Breast.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table2">
<table border=1>
<tbody>
<tr>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Skin.jpg" />
</p>
</td>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table3">
<table border=5>
<tbody>
<tr>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" alt="" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
and the css part:
.mainArticleImage {
height: 95px;
width: 120px;
}
.ImageCenterContainer {
margin: 0 auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
text-align:center;
}
but that doesn't work on IE.
This approach also didn't work too well either.
What is the best, simplest, cross-browser way to carry out what would seem to be an easy task?
How about this: http://jsfiddle.net/um6d7/
#Brian Flanagan
(this reply was too long for a comment)
I'm using IE8, but this solution should work for older IE versions as well. Shouldn't it to be fairly simple to organize 5 pictures on a screen? :-P
I should also mention that I didn't copy and paste your solution "as is", since I didn't want my css to refer to general tags such as img and div, but the changes are meaningless in terms of logic. The actual code I used:
HTML:
<div id="imagesContainer">
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage middle" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG"/>
</div>​
CSS:
#imagesContainer {width:550px; overflow:hidden;}
.articleImage {width:180px; float:left; display:inline; margin:15px;}
.middle {margin:15px 90px;}
any suggestions?