converting xpath to css - css

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

Related

Can't Access Static Drop-down Inside an Iframe

I want to click on a dropdown inside an iframe and select some options, but i keep getting this error in cypress
cypress-iframe commands can only be applied to exactly one iframe at a time. Instead found 2
Please see my code below
`
it('Publish and Lock Results', function(){
setClasses.clickTools()
setClasses.clickConfiguration()
setClasses.publishAndLockResult()
cy.frameLoaded();
cy.wait(5000)
cy.iframe().find("body > div:nth-child(6) > div:nth-child(1) > div:nth-child(1) > form:nth-child(2) > table:nth-child(5) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > div:nth-child(5) > p:nth-child(2)").click()
})
```**Please see screenshot of the element**
[![enter image description here](https://i.stack.imgur.com/WpUfn.png)](https://i.stack.imgur.com/WpUfn.png)

There should be an iframe identifier that you can use (anything else for the iframe, a unique id, class or attribute, like data-test)
let iframe = cy.get(iframeIdentifier).its('0.contentDocument.body').should('not.be.empty').then(cy.wrap)
iframe.find("body > div:nth-child(6) > div:nth-child(1) > div:nth-child(1) > form:nth-child(2) > table:nth-child(5) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > div:nth-child(5) > p:nth-child(2)").click()
From what the output is suggesting, you've got two iframes on that page that it's trying to send commands to, and you have to pick one
Answer adapted from source: cypress.io blog post on working with iframes

Target specific link with CSS

I need to target the middle link specifically, I want to only alter the middle link.

Here's four ideas:
.sermons-links > :nth-child(2)
.sermons-links > a:nth-of-type(2)
.sermons-links > a[href=""]
.sermons-links > a[href="http://www.wpbuilder.co.za/wp-content/uploads/2020/01/8-Des-2019-preek.mp3"] + a

Cheerio: group together multiple searches

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

Convert xpath into cssSelector

I am trying to convert xpath
//*[#id='formStartQuote']//div[#class='popular-countries']//ul[1]/li[1]
into cssSelector.
I tried all possible ways say
#formStartQuote > div.popular-countries ul:nth-of-type(1) > li:nth-of-type(1)
#formStartQuote div.popular-countries ul:nth-of-type(1) > li:nth-of-type(1)
#formStartQuote > div.popular-countries > ul:nth-of-type(1) > li:nth-of-type(1)
Nothing worked for me.
Do anyone has a solution for this?

Selenium - looking for examples of converting xpath locators to css

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]

Resources