I wanna know if i can identify the element based on text of the element, div or link using css only. Is that possible? Because i am not able to use contains method for cssselector.
Please provide the css selector syntax for the below html.
Ex- "Hi There"
No.
You can use XPATH to do it.
Related
Below is the HTML snippet of the textbox that i am trying to identify using chromdriver
You could use the following Xpath:
//input[#placeholder="Scan Serial No"]
ry using multiple attributes
//input[#placeholder="Scan Serial No"][contains(#class,'FC2 ELX_UserPrompt')]
For getting selectors there are a few techniques I use.
First I use the built in tools of the Chrome Developer Tools. Open these with ctr+shift+i. Then locate the element you want, ctrl+shift+c then click on the element. This highlights the element you want in the Elements tab. right click on the highlighted element and choose Copy>Copy selector. This will give you a unique css selector for that item. This works well for everything except dynamic elements that have changing id's or locations on the page.
For dynamic elements I use advanced css selectors. where you can leverage the html tag in addition to any css attributes to locate the element. Here is a decent write up on how to use these https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/#comments
For you particular element you could do something like input[placeholder='Scan Serial No']
You can use following xpath:
name of class in xpath
//input[#class='FC2 ELX_UserPrompt binding_Screen_cc607e87_a82b_4cac_8c38_939be2ba00ff_SerialNo??']
name of class and placeholder
//input[#class='FC2 ELX_UserPrompt binding_Screen_cc607e87_a82b_4cac_8c38_939be2ba00ff_SerialNo??'][#placeholder='Scan Serial No']
I've an element with text List which I want to use. I can write xpath like -
//li[text()='List']
but instead of using xpath, I want to use css. How should I write css for it? I tried with following by referring https://saucelabs.com/resources/selenium/css-selectors but didn't work.
li:contains('List')
The CSS feature :contains('some text') is deprecated, you should only use xpath in your case. There is no way to do that using CSS
I try to use css locators over xpath when I can.
I have the following xpath locator that I would like to change to css:
//table[#id='service_schedule_sets']//a[text()='OptimalTest']
I would like to use a css locator. I wish to avoid using contains as there are support issues in later versions of css (i.e. contains was removed from css2 and css3 (css2 removal was a very last minute thing) that selenium covers up but I would like to avoid.
I am trying:
css=table#service_schedule_sets a[.='OptimalTest')
but it doesn't find the element.
The HTML is:
<td>
OptimalTest
</td>
Notes:
I want to use the text in the link ('OptimalTest') not the href.
I do not want to use link=OptimalTest approach as it is not specific enough.
CSS selectors do not support node selection based on their text content.
Actually there was a suggestion for a pseudo class :contains which would suit your needs, but it was removed from CSS 3 spec.
I'm trying to click the second element where "class=uiComposerAttachment photoAttachment"
Something different from XPath, is using the nth-child locator in CSS. Note this isn't supported in IE8 and below, but other modern browsers will be fine. Example to get the 2nd element:
css=*.uiComposerAttachment:nth-child(2)
You have to find the Xpath of the class and use the Xpath then try.
click | //*[#class='uiComposerAttachment photoAttachment']
Use this in the selenium IDE
Can you provide snapshot, how you find the Xpath of the class
try this
//*[#class='uiComposerAttachment photoAttachment'][2]
If there are multiple elements with same xpath you can try below format of xpath to click the desired element.
As per your application, you have 2 elements with same xpath. So you can use the below xpath to click on the second element.
xpath=(//select[#name='listPartition'])[position()=2]
As class is same, you need to identify element as per position.
This is second element that you mentioned, so you can use
xpath=(//*[#class="uiComposerAttachment photoAttachment"])[2]
How would you get the following tag using CSS?
<p>You can only use the text inside the tag</p>
As in xpath I'd use the following:
//p[contains(text(), "inside the tag")
PS: I can't close the xpath, it tries to auto complete with code... :S
I believe CSS3 selectors can only filter attributes, not the text within tags. So you could do something like a[href~="aspx"] to match links to aspx pages, but that's as far as content-based matching can go.
For what you want to do, you'll probably have to use javascript or server-side processing.
Have a look at quirksmode and W3 for more information.
This is what I was looking for!
p:contains("inside the tag")