I have a ton of tests written in xpath that I need to convert to css.
I don't want to use an automation tool as I want to take the opportunity to learn the way to do things using the css approach in selenium.
Where can I find examples of 'before' and 'after' when changing from xpath to css for locators
I know you've answered it yourself, but I swear by this site, has a very nice diagram showing you exactly what you are asking:
https://www.simple-talk.com/dotnet/.net-framework/xpath,-css,-dom-and-selenium-the-rosetta-stone/
Here are 30 examples of 'before' and 'after' xpath to css:
Note that css also uses 0 based positioning and xpath uses 1 based, as in:
Example:
xpath=(//li[contains(#id,'topic_roles_input')]//input[#type="checkbox"])[1]
css=li#topic_roles_input input[type=checkbox]:nth(0)
The list:
//ul[contains(#id,'district-switcher')]//li/ul/li[4]/a
css=ul#district-switcher li > ul > li:nth(3) > a
//ul[contains(#id,'district-switcher')]//a[contains(text(),'District Management Council')]
css=ul#district-switcher a:contains('District Management Council')
//ul[contains(#id,'district-switcher')]//a[contains(text(),'${QA_run_number}')]
css=ul#district-switcher a:contains('${QA_run_number}')
//h3[contains(#id,'active-district')]
css=h3#active-district
//ul[contains(#class,'home-menu')]//a[contains(text(),'Calendar')]
css=ul.home-menu a:contains("Calendar")
//tr[1]//td[contains(#class,'starts_on')]
css=tr td.starts_on
//tr[1]//td[contains(#class,'ends_on')]
css=tr td.ends_on
//ul[contains(#class,'home-menu')]//a[contains(text(),'Schools')]
css=ul.home-menu a:contains('Schools')
//table[contains(#id, 'schools')]//tbody//tr//td/a
css=table#schools tbody tr td a
//a[contains(text(),'6DAYERS')]
css=a:contains('6DAYERS')
//ul[contains(#class,'home-menu')]//a[contains(text(),'Students')]
css=ul.home-menu a:contains(Students)
//body//td[contains(text(),'QA-001')]
css=td:contains('QA-001')
//ul[contains(#class,'home-menu')]//a[contains(text(),'Roles')]
css=ul.home-menu a:contains(Roles)
//table//tr//td[contains(text(),"Language Therapist")]
css=table tr td:contains(LanguageTherapist)
//table//tr//td[contains(text(),"Speech Therapist")]
css=table tr td:contains(Speech Therapist )
//table//tr//td[contains(text(),"DELETE_ME")]
css=table tr td:contains(DELETE_ME)
//ul[contains(#class,'home-menu')]//a[contains(text(),'Activities')]
css=ul.home-menu a:contains(activities)
xpath=(//li[contains(#id,'activity_roles_input')]//input[#type="checkbox"][1])
css=li#activity_roles_input input[#type="checkbox"]:nth(0)
//table[contains(#id,'activities')]//tr//td[contains(text(),"Activity001")]
css=table#activities tr td:contains("Activity001")
//ul[contains(#class,'home-menu')]//a[contains(text(),'Practitioners')]
css=ul.home-menu a:contains(Practitioners)
//table//tr//td[contains(text(),'mdurrant+${QA_run_number}_001#dmcouncil.org')]
css=table tr td:contains(mdurrant+${QA_run_number}_001#dmcouncil.org)
//ul[contains(#class,'home-menu')]//a[contains(text(),'Topics')]
css=ul.home-menu a:contains(Topics)
xpath=(//li[contains(#id,'topic_roles_input')]//input[#type="checkbox"])[1]
css=li#topic_roles_input input[type=checkbox]:nth(0)
//a[contains(text(),'Topic001')]
link=Topic001
//ul[contains(#class,'home-menu')]//a[contains(text(),'Settings')]
link=Settings
//ul[contains(#class,'home-menu')]//a[contains(text(),'Settings')]
css=ul.home-menu a:contains(Settings)
xpath=(//li[contains(#id,'setting_roles_input')]//input[#type="checkbox"])[1]
css=li#setting_roles_input input[type=checkbox]:nth(0)
xpath=(//table/tbody/tr//td/a[contains(#class,'delete_link')])
table > tbody > tr td > a.delete_link
//td[contains(text(),'Setting001')]
css=td:contains('setting001')
//a[contains(text(),'Practitioners')]
css=a:contains(Practitioners)
//tr[td[contains(.,'6 Day')]][1]/td[8]/a#href
tr td:contains('6 Day'):nth(0) + td + td a[href]
Related
Let's say I want to find all tr elements, children of tbody, having either class trEven or trOdd (unfortunately there are also elements not having these classes). How can I get all of them in a single query?
I tried $("tbody > tr.trOdd + tbody > tr.trEven")
but it returns 0 elements.
Use commas for multiple css selectors:
$("tbody > tr.trOdd,tbody > tr.trEven")
FTR, your css would have matched
tbody
tr.trOdd
tbody
tr.trEven <-- this one
I have used .table-striped class for one of my tables. Unfortunately, I use more tables inside this table, which also became striped.
How to make inner tables be not striped?
Why not create a new style much like .table-striped and use the immediate child selector [>] [MDN link]1 so it only selects the immediate tr and not all the tr children in the table?
.table-striped__immediate-only > tbody > tr:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}
How do you convert the following xpath to css?
By.xpath("//div[#id='j_id0:form:j_id687:j_id693:j_id694:j_id700']/div[2]/table/tbody/tr/td");
Here's what I tried but it didn't work:
By.cssSelector("div[#id='j_id0:form:j_id687:j_id693:j_id694:j_id700'] > div:nth-of-type(2) > table > tbody > tr > td");
By.cssSelector("div > #j_id0:form:j_id687:j_id693:j_id694:j_id700 > div:nth-of-type(2) > table > tbody > tr > td");
Thank you.
Try this
#j_id0:form:j_id687:j_id693:j_id694:j_id700 tbody td
Notice the whitespaces instead of > and that allows you to skip child tags
I also do not like that long id. If the ending part of the id is unique you can use partial search
[id$='_id700'] tbody>tr>td
One should learn how to write css selectors, but a for a quick fix, try: cssify
For example, I put in your xpath and it spit out: div#j_id0:form:j_id687:j_id693:j_id694:j_id700 > div:nth-of-type(2) > table > tbody > tr > td
How can I "collect" CSS statements? I have several th classes that I want to align the same like table.t-data-grid thead tr th.*
How can I collect eg the following?
table.t-data-grid thead tr th.depot, table.t-data-grid thead tr th.amount ... {
}
Do you really need that complex a selector? The less complex your selector is, the better is its performance. So just put in just as much as is necessary to target the correct elements.
It looks like, you would be better of with just
.t-data-grid .depot, .t-data-grid .amount { ... }
I have a HTML <table>.
I want to have columns 2 and 4 of that table be hidden by CSS. Is there a method to have CSS detect the column number of a td element?
Use jQuery if you can:
$("table td:nth-child(2)").addClass("col2");
$("table td:nth-child(4)").addClass("col4");
CSS:
.col2, .col4 { display: none }
Some CSS 3 answers have been given. A CSS 2-compatible solution would be the following, assuming you can identify the table somehow (pretend it has the class "foo"):
table.foo > tbody > tr > td:first-class + td, /* column 2 */
table.foo > tbody > tr > td:first-class + td + td + td /* column 4 */
{display: none;}
Note that this doesn't select th elements or headings in thead or tfoot. You could copy the two selectors to read "th", but if you can trust the integrity of your markup to not have anything but th and td inside a tr and tr only in thead, tfoot, or tbody (the only valid possibilities); you could do something like this:
table.foo > * > tr > :first-class + *, /* column 2 */
table.foo > * > tr > :first-class + * + * + * /* column 4 */
{display: none;}
This works fine in browsers newer than IE6, generally, which is almost always acceptable.
If IE6 support is mandatory -- and be utterly sure it is before bothering to go down this road -- a combination of valid CSS2/3 and Javascript in a conditional comment is the simplest solution (avoid using Javascript for layout when the job doesn't require it).
Add classes to the appropriate rows, and then you can use that to hide those rows.
There are nth-child selectors, but those will only work on more recent browsers.
Take a look at the nth-child and nth-of-type psudo classes.
Something like
td:nth-of-type(2) { visible: false; }
td:nth-of-type(4) { visible: false; }
You can do that with CSS 3 selectors - specifically :nth-child. Note that this solution won't work on most browsers at present (it basically only works properly in Firefox 3.1b and higher).
If you don't have access to change the classes, and you can't use JavaScript, then I'm afraid you're out of luck.
You can, but since that is CSS3, it won't work on IE and older versions of Firefox and some other browsers. Check out :nth-child.
IMHO, the best you could do is add a class to each row you want to target.
Tanks to everybody, I had to use jquery, I could not find how to do that from pure CSS2 , IE doesn't support CSS3 :(