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?
Related
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**
[](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
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
Hello all you smart CSS people... I've got a Doozey!
https://tritonmedicine.com/services is the page in question
It's the title down the page a bit, next to the picture
How do I style ONLY the ::before pseudo-class/id for the "preventative care" title? I'm trying to add the word "ADULT" in front of it, but if I use the id#1506, it won't work. If I only use the class (.tab-pane.active), it puts "ADULT" in front of every active title. What am I doing wrong here?
This DOESN'T work:
#1506.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
This DOES work (but styles them all, which I don't want):
.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
Any assistance is much appreciated :)
You can't select id that start with number in CSS selectors
For more CSS-Tricks
Solution
try somthing like these tab1506 or tabPane1506 or tp1506
But there is another solution of your problem, you can use
Attribute selector:
[id="1506"].tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
For more read here
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
I want to do the following:
.feed > :not(:nth-child(n+5):nth-child(-n+10))
But apparently that's not available in css. Is there any way around this?
You can use
.feed > :not(:nth-child(n+5)), .feed > :not(:nth-child(-n+10)) {
background: red;
}
Demo
Explanation
That's because :nth-child(n+5):nth-child(-n+10) means :nth-child(n+5) AND nth-child(-n+10).
But according to de Morgan's laws,
not(A AND B) = not(A) OR not(B)
Then, if you want to negate it, instead of :not(:nth-child(n+5):nth-child(-n+10)), you need the OR operator ,:
:not(:nth-child(n+5)), :not(:nth-child(-n+10))
It seems like you're trying to select all elements that aren't the 5th - 10th child of .feed. Another way to do that would be to select the 1st-4th child elements, and then the 11th+ child elements.
This will do it:
.feed > :nth-child(-n+4), .feed > :nth-child(n+11) {
...
}
http://jsfiddle.net/9ZSeZ/1/