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']
Related
I am testing some angular page as you can see in the screenshot. I tried my best to find the proper locators to select a value from the dropdown list but failed. In Java Selenium, it used to work as driver.findElement(By.xpath("//li[#role='option']//contains(text(),'"+valToBeSelected+"')].click() by xpath. What should I use in protractor?
Here is the screenshot for elements sources, I tried to copy the source code but it seems to be very large. Sorry I have to take three screenshots, please use the green commend line as the separator.
continue
continue
Then a list of as <div role="options" ...>China</div>, <div role="options" ...>Chad</div> etc.,
Click the a element to open up the select box:
element(by.xpath("//a[span = 'Please select your country of residence']")).click();
Then, locate the desired dropdown element by text:
element(by.xpath("//li[#role='option' and .//div[. = 'Algeria']]")).click();
There are certainly other options/locators here, but checking and relying on the elements texts would, at least, have a readability bonus.
Mouse over those HTML elements until you find the dropdown blue'd out, and grab a selector using that blue'd out area.
From what I can see, it looks like 'ui-select-choices-group' maaaay be the one.
So you'd use a CSS shorthand selector:
var dropdown = $('.ui-select-choices-group');
Then to access values in in:
dropdown.$('[value="Algeria"].click();
// Or
$('.ui-select-choices-group').$('[value="Algeria"]').click()
See if that works. This selector may be right, but it is a bit hard to tell for me without having both the HTML and the browser open, and mousing over the html elements in the code page to see what gets highlighted.
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]
I am using CSS selectors as the element locators for selenium test scripts.
Now, I want to check if an element has a rel="nofollow" attribute using CSS.
Does any one know how to check this?
The question isn't 100% clear on what you're trying to do, but I'll try to answer anyway.
If I'm reading you correctly, you're working within the Selenium script language, and you want to determine your the Selenium script that the page contains an <a> element that has rel='nofollow' attribute.
According to the Selenium reference page, this should be possible, as Selenium supports most CSS selectors (the exception except pseudo selectors, but they're not relevant for you here).
It also supports DOM references and XPath references, so one way or the other you should be able to check just about anything.
For CSS, the syntax is css=cssSelector, so in your case this would be css=a[rel=nofollow].
This selector will check the page for any <a> element with the rel=nofollow attribute. If you need to check if a specific element has this attribute, then modify the selector to include the ID or class of the element you want - eg a#myspecificelement[rel=nofollow]
This would be used with a Selenium command such as assertElementPresent() to check that the element is present, or a range of other possible Selenium commands.
Hope that helps.
a[rel="nofollow"]
Won't work in all browsers.
A better solution would be to use jquery who selectors are supported in all browsers
$('a[rel="nofollow"]')
I am using Firebug to inspect the elements of a webpage. On the right hand of the page there is a "style" tab that list all the CSS styling for a given tag. These CSS styling are coming from a linked CSS page.
What I am looking to do is somehow copy a set of divs with the CSS hardcoded in the div. This way I can copy and paste the elements and have the exact same styling. Is this possible to do with Firebug or perhaps another tool?
I used IE9 to accomplish this.
Open a page where you want to grab a style in IE9
Press F12 to display Developer Toolbar
In the Developer Toolbar press Find and select "Select element by click"
Then go to "View" > "Source" and select "Element source with style"
I don't know about Firebug, but you could build a script to do it.
List the CSS you want to copy (every property you believe is required to make it portable) and then loop through in JS and getComputedStyle(). Then build a ; delimited list of property:value pairs, and assign it to the style attribute if your element and all children.
This doesn't look like an easy task - and you will no doubt run into problems.
I'm not sure what exactly you're trying to do here but are you trying to apply the same style to multiple elements (divs)? If so you should use a css class. So your html will be
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
and css will be
.myClass
{
height:whatever;
width:whatever;
etc
}