I want to store the count of li elements in an ul list. The list resides in an frame with the id content frame. I the li elements all contains an anchor tag with class listHead
First i tried this:
<tr>
<td>storeXpathCount</td>
<td>//ul/li/a[#class=listHead]</td>
<td>countMax</td>
</tr>
<tr>
<td>echo</td>
<td>${countMax}</td>
<td>${countMax}</td>
</tr>
The countMax returned is 0. If i change the target to //* i get an xpathCount of only 13. Inspecting the source showed that most of the page is within iframes. So, i tried adding select frame:
<tr>
<td>selectFrame</td>
<td>contentFrame</td>
<td></td>
</tr>
<tr>
<td>storeXpathCount</td>
<td>//ul/li/a[#class=listHead]</td>
<td>countMax</td>
</tr>
<tr>
<td>echo</td>
<td>${countMax}</td>
<td>${countMax}</td>
</tr>
The echo of countMax still returns 0, and if changed to //* 13. How do I get a count of the elements in the frame? I am using Selenium IDE 2.5.0 w. firefox.
It seems like your xpath attribute filter is missing quotes around the class name. Try:
//ul/li/a[#class="listHead"]
Related
Note: I'm not looking for a parent of an element. I'm looking for an element that contains other elements within it.
I’m using Rails 4.2.7 and I'm using Nokogiri to parse HTMl documents. I want to find the table in my document whose first row (first tr element) has at least one th element. How do I write a CSS selector for that? Note that I only want to select the table, not the th elements themselves. Here is an example of the table I would hope to select from within the document
<table>
<tbody>
<tr>
<th>Header 1</th>
</tr>
<tr>
<td>Other data</td>
</tr>
…
</tbody>
</table>
You can try to use the Array#select method that filter all the tables where the first tr contains a th element.
For example, suppose you have a Nokogiri object called doc:
require "nokogiri"
require "open-uri"
url = # your url
doc = Nokogiri::HTML.parse(open(url))
tables = doc.css("table").select do |table|
# consider only the first row of each table
first_row = table.css("tr").first
# check if that row's children contains a <th> element
first_row.children.map(&:name).include?("th")
end
I'm trying to style a ng-table layout, which contains a table in each row. The way this expanding functionality is implemented in angular, looks like this:
<tr ng-if="org.expanded" ng-repeat-end>
<td></td>
<td></td>
</tr>
The issue is more related to CSS.
The problem is that, when clicking on the plus icon next to the ServiceType column the 4 expanded columns aren't aligned with the parent tablecolumn headers i.e. Service Type, Location , Contact details and Last Updated.
How can I set it, that the values look nicely aligned(left)?
Also, I can't align the Last Updated column to the left.
Here is a plunkr sample of the problem:
http://embed.plnkr.co/UlMg7J/preview
http://plnkr.co/edit/UlMg7J?p=preview
For the last column not aligned issue I have replaced the table for phone,website..etc with divs and it started to align to the position you desired. What it was doing was it was creating extra headers (th) tags which is not desired.
Your Code:
<td data-title="'Contact Details'">
<table>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td>Fax:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>Website:</td>
</tr>
</table>
</td>
Changed Code:
<td data-title="'Contact Details'">
<div>Phone:</div>
<div>Fax:</div>
<div>Email:</div>
<div>Website:</div>
</td>
I'm testing with Selenium Webdriver in Firefox and ideally also in IE8.
Here is my html structure:
<table id="table">
<tbody>
<tr>
<td>Text1</td>
<td><a id="assign" href="/assign/1>Assign</a></td>
</tr>
<tr>
<td>Text2</td>
<td><a id="assign" href="/assign/2>Assign</a></td>
</tr>
<tr>
<td>Text3</td>
<td><a id="assign" href="/assign/3">Assign</a></td>
</tr>
</tbody>
</table>
Basically what I need to do is this:
Click on the assign link on the row that contains Text1
So far i came up with the XPATH: //*[#id='table']//tr/td//following-sibling::td//following-sibling::td//following-sibling::td//a that selects all the assign links. Changing it to //*[#id='table']//tr/td[text='Text1']//following-sibling::td//following-sibling::td//following-sibling::td//a returns "No matching nodes" from Firebug.
However, I want a CSS selector for this. So, i tried #table>tbody>tr:contains('Text1') but Firebug returns "Invalid CSS Selector".
Any suggestions ?
You should find the td that has preceding td sibling tag with Text1 text, then get the a tag:
//table[#id="table"]//td[preceding-sibling::td="Text1"]/a[#id="assign"]
Alternatively you can find 'tr' having 'td' with text = 'Text1' and then inside the 'tr' find 'td' having text 'Assign'
//table[#id='table']//tr[td[.='Text1']]/td[.='Assign']
About css selectors, there are no pure css selector for text based search. 'contains' is not standardized yet, so may not work in your case.
I am having an issue stylizing a class in the first table while keeping the rest of the tables the same. Let me show an example
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
So I want the class a of the first table to be different than the rest of the tables. How do I go about doing that?
Thank you for your time.
Edit:
I forgot to mention. I cannot add separate classes on each table. I can only give them all the same class. It is generated that way.
In newer browser you can use CSS3's nth-child():
table:nth-child(1) tr.a{
background-color:#ff0000;
}
This works if this is the 1st child of the parent element (e.g. say that these 3 tables are the children of the body.
You can be also more specific that this is the nth table element using the :nth-of-type() selector.
In a table all <th> are having class and <td> dont.
Is it possible to apply the styles from those <th> class to all its corresponding <td>'s with plain css and dont need of any script?
Additionally table is dynamic and so columns index may differ. So i cant use nth-child and only way i can navigate it with class.
Here is the Fiddle
Any better ideas for cross-browser?
Update:
table may have n number of columns and not limited to 2 columns
You could handle this using <col>, http://www.quirksmode.org/css/columns.html#background, only other way I see would need to add the classes everywhere or to use JS.
Try this
<table>
<tr>
<th class="a">`Column A`</th>
`<th class="b">`Column B`</th>
</tr>
<tr>
<td class="a">`aaa`</td>
<td class="b">`bbb`</td>
</tr>
<tr>
<td class="a">`ccc`</td>
<td class="b">`ddd`</td>
</tr>
</table>