There is some drop down in my html. I can select all the Drop Down ,if they have certain class by following code.
var select = dd.down('select');
select.hasClassName('test');
But there are some drop down is also with class like 'test-1','test-2' etc.
How can I select those element?
The Prototype 'find by selector' method works like this:
$$('any css selector here');
This returns an array of extended elements that match your CSS selector. Notably, the selector can be any valid CSS3, so you can use partial matches to find what you're looking for. If you want only the select elements that have test in their classname, you would do this:
$$('select[class*="test"')
There are many other logical operators you can use in your CSS selectors, there's a great article here that explains them: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
Related
I want to select the text "Auto-Publish" in Span. How can I do it with a CSS selector? with Xpath I know how to do it. I am using Nightwatch for UI automation. I want to make a generic function in the page object which will take a value as a parameter.
SelectFilterValue(value){
.click(`//span[text()="${value}"]`)
}
I can't do it like this since it's an XPath and I have to specify that it's an XPath. If it was a CSS selector I could do it since I don't have to specify that it's a CSS selector. Or is there is any way that I can do it with Xpath too?
CSS does not have any method like text. So in HTMLDOM, it is not possible at this point of time to locate the element based on text.
Moving further, You could do below in nightwatch.js
.useXpath().click('//span[contains(text(), "' + desiredText+ '")]')
and before calling this assign Auto-Publish to the desiredText variable.
Give a specific id to span tag and then edit css. You can also use inline css which will be the best option.
<span style="color:blue;">
Is there a way to get the css selector for a page object you defined in SitePrism? For instance if I have
class myPageObject < SitePrism::Page
...
element :my_element, '.my-element-class'
...
end
How could I use the selector in a test to get .my-element-class?
No - SitePrism doesn't store the parameters passed to element in any accessible way
Old post but adding for info
A specific element on a page will only have 1 xpath (Or possible a subset of these), but it is very definitely finite. This is because of the way xpath is inherently structured. It represents the DOM.
CSS Selectors can be defined in a multitude of ways, and as such it can be considered than a single element could have infinite css selectors.
If you want to find out the specific class property of an element, that is possible by doing my_page.my_element['class'] - However this will return a space delimited string of just the class properties of the current element.
I am trying to retrieve the value in the data-appid field, I have tried using following-sibling but its not really a sibling per se. Not sure how to go about retrieving this. Any pointers will really be great.
<div class="section app" data-appid="532054761" data-updateid="10184169">
The sibling axis applies to elements, not attributes.
You can reference data-appid simply as an attribute of the div element. For example,
//div/#data-appid
will select 532054761
If you need to be more specific about the particular div element for which you want its data-appid, you can use a predicate to select a particular div element. For example:
//div[#data-updateid='10184169']/#data-appid
You need to use getAttribute() method
Try the following code
String dataAppId = driver.findElement(By.xpath("//div[#class='section app']")).getAttribute("data-appid");
System.out.println(dataAppId);
I have my website setup to use the KendoUI framework and I have pulled in some external internet code with forms. To make it look like Kendo i have set the following to make all my select's into a kendoDropDownList:
$("select").kendoDropDownList();
This works fine. However there is one particular select that I like to convert into a kendoComboBox.
Is there a way to replace or remove the kendoDropDownList from my element and put the kendoComboBox instead.
Thanks in advance
Karel
If you need to single out one select, then you'll need to use a more specific jQuery selector (an id, text, CSS class, containing div, etc.).
For example, if your select elements have id's, you could do something like:
$("select:not([id='myComboBox'])").kendoDropDownList();
$("select[id='myComboBox']").kendoComboBox();
Really, you just need to do something to separate that select from the rest of them.
If you are unfamiliar with jQuery selectors (or just need a refresher), you can find the full documentation here: http://api.jquery.com/category/selectors/
Here's an example fiddle of this working: http://jsfiddle.net/ATNkC/1/
I often need to query for elements within the sidebar. However, the css selector that I have to use is temporary and pretty ugly:
<div id="rt_mod_side_foo_body_bar">
I would like to abstract this so instead of writing:
within '#rt_mod_side_foo_body_bar'
I can do:
within :sidebar
How can this be accomplished with Capybara?
Instead of a symbol, how about a method?
def sidebar
"#rt_mod_side_foo_body_bar"
end