I have an element whose html is like :
<div class="gwt-Label textNoStyle textNoWrap titlePanelGrayDiagonal-Text">Announcements</div>
I want to check the presence of this element. So I am doing something like :
WebDriver driver = new FirefoxDriver(profile);
driver.findElement(By.cssSelector(".titlePanelGrayDiagonal-Text"));
But its not able to evaluate the CSSSelector.
Even I tried like :
By.cssSelector("gwt-Label.textNoStyle.textNoWrap.titlePanelGrayDiagonal-Text")
tried with this as well :
By.cssSelector("div.textNoWrap.titlePanelGrayDiagonal-Text")
Note : titlePanelGrayDiagonal-Text class is used by only this element in the whole page. So its unique.
Contains pseudo selector I can not use.
I want to identify only with css class.
Versions: Selenium 2.9 WebDriver
Firefox 5.0
When using Webdriver you want to use W3C standard css selectors not sizzle selectors like you may be used to using in jquery. In your example you would want to use:
driver.findElement(By.cssSelector("div[class='titlePanelGrayDiagonal-Text']"));
From reading over your post what you should do since that class is unique is just do a FindElement(By.ClassName("titlePanelGrayDiagonal-Text"));
Also the CssSelector doesn't handle the contains keyword it was something that the w3 talked about but never added.
I haven't used css selectors, but this is the xpath selector I would use:
"xpath=//div[#class='gwt-Label textNoStyle textNoWrap titlePanelGrayDiagonal-Text']"
The css selector should then probably be something like
"css=div[class='gwt-Label textNoStyle textNoWrap titlePanelGrayDiagonal-Text']"
Source: http://release.seleniumhq.org/selenium-remote-control/0.9.2/doc/dotnet/Selenium.html
Did you ever tried following code,
By.cssSelector("div#gwt-Label.textNoStyle.textNoWrap.titlePanelGrayDiagonal-Text");
I believe using a wildcard in CSS would be more helpful. Something as follows
driver.findElement(By.cssSelector("div[class$='titlePanelGrayDiagonal-Text']");
This will look into the class attribute and see what that attribute is ending with. Since your class attribute is ending with "titlePanelGrayDiagonal-Text" string, the added '$' in the css statement will find the element and then you can perform whatever action you're trying to perform.
Related
Please, I am new to WebSharper does anyone know how I can convert View (doc) or Async (doc) to Doc in webSharper? I have tried to open "WebSharper.UI.Next.Client" but does not seem to be compatible with the Doc I am using. The code giving such error is the one I found on the WebSharper website https://try.websharper.com/snippet/adam.granicz/00003b
On the conversions: the functions are Doc.EmbedView and Doc.Async respectively.
The problem with the references was that WebSharper.UI has another separate version still called on its earlier name WebSharper.UI.Next for back-compatibility in older projects. It is recommended to use WebSharper.UI only.
The snippet you have linked was not updated accordingly, I have done it now, and will check others too. The main differences are that Next is no longer used in the namespace names and default HTML combinators take attribute and children lists both (An empty div is now div [] [] while previously there it was a div [] or divAttr [] []).
I have following element (radio-button)which I need to select
input class="pull-left" data-class="then-radio-button" id="condition_fields_24934_condition_action_hide" name="condition_fields[24934][condition_action]" type="radio" value="hide"
How do I select it considering that part of id name is dynamic - particularly in my example it's 24934 which changes every time I run the test?
I use Ruby for writing the tests.
Thank you in advance!
Have you consider using cssSelector instead? In such case css is the best option and you can use partial search with that.
[id^='condition_fields_'][data-class='then-radio-button']
Translation: id->starts with condition_fields_ and having data-class then-radio-button
Edit
For additional filtering adding value may be helpful as well.
[id^='condition_fields_'][data-class='then-radio-button'][value='hide']
Mapping element by suffix:
cssSelector = [id*='_condition_action_hide']
or by prefix:
cssSelector = [id^='condition_fields_']
I'm wondering if xpath has a way to test an element for a class. I currently have the ID, I would just like to be able to test to ensure JS added a class.
My element where I'm testing to see if id=foo contains class=red.
<span id="foo" class="red">test</span>
I'm assuming you would use xpathCount?
getXpathCount(("//a[#id='foo']") not sure what goes next).equals(1);
I've also tried this without success,
getXpathCount("//span[#id='foo'].span[contains(#class,'red')]").equals(1);
The xpath to use would be
//a[#id='foo' and #class='red']
This line will not work but I think I have used correct xpath?
driver.findElement(By.xpath("//a[contains(#class,'cke_button_bold')]")).click();
to locate a button like below :
<a id="cke_73" class="cke_off cke_button_bold">
id is a dynamic number so can be used as fixed locator here. And class is a compound class which is not supported by WebDriver findElement method...
I created simple html file and your xpath works with FirefoxDriver in WebDriver 2.1.0.
Also you can try to use
driver.findElement(By.className("cke_button_bold"))
Classname is supported by webdriver Api
Step 1:
Find the CSS Selector
Possible CSS Selectors here:
css=a[id*='cke']
css=.cke_off cke_button_bold
The above can be used Or Already we are having the method .ClassName But for avoiding duplication of Elements and Ambiguity we can use CSS Selector.
I'm looking for a more elegant solution to check that a range of HTML elements are visible in the browser.
I had the idea of creating a CSV file with element type and IDs, reading it into an array and using that to check the elements are present in the browser.
So the CSV file/array would look something like this,
"select","srch-op-select"
"text_field","srch-filter"
"button","srch-button"
"image","srch-showhide-icon"
"div","srch-showhide"
I then thought I could use case statement to do the checking, something like this,
myElements.each do |row|
type = row[0]
id = row[1]
case type
when "button" : assert(browser.button(:id,id).exists?)
when "checkbox" : assert(browser.checkbox(:id,id).exists?)
when "div" : assert(browser.div(:id,id).exists?)
when "image" : assert(browser.image(:id,id).exists?)
when "label" : assert(browser.label(:id,id).exists?)
when "link" : assert(browser.link(:id,id).exists?)
when "radio" : assert(browser.radio(:id,id).exists?)
when "select" : assert(browser.select_list(:id,id).exists?)
when "span" : assert(browser.span(:id,id).exists?)
when "table" : assert(browser.table(:id,id).exists?)
else $log.debug "---Unsupported element type "+type
end
end
Obviously this case statement would be come large and unwieldy if you wanted to cover all supported element types or factor in the different methods of selecting a HTML element.
Can anyone suggest a more elegant and flexible solution?
Replace your case statement with this:
assert(browser.send(type.to_sym, :id, id).exists?)
Akephalos
Thankfully, we then found Akephalos. Akephalos provides a Capybara driver that allows you to run your cucumber integration tests in the headless browser HtmlUnit. HtmlUnit is a “GUI-Less browser for Java programs”. It models HTML documents and provides an API that allows you to invoke pages, fill out forms, click links, etc… just like you do in your “normal” browser. With our fork of Akephalos to resolve a couple of issues that we ran into along the way, we were up and running with very reliable, headless browser tests.
HtmlUnit is written in Java, and Akephalos uses jruby-jars to start up and interact with the HtmlUnit browser. It has fairly good JavaScript support (it was able to deal with everything we were able to throw at it, including jQuery 1.4.2 and 1.4.3, jQuery Mobile, and jQuery live).
edit: extracted from http://robots.thoughtbot.com/post/1658763359/thoughtbot-and-the-holy-grail