Using Selenium IDE, how to test CSS style information - selenium

I am testing a plugin which makes changes to the CSS of HTML elements – how can I use Selenium commands to verify/test these CSS changes?

You can use CSS classes and then check if the element has a specific class.
In Selenium IDE :
Command: assertAttribute
Target: document.getElementById('header')[0]#class
Value: myHeader

Unfortunately Selenium IDE is mis-sold as a Record and Replay tool. Selenium IDE is actually a record, tweak and replay tool.
The tweak part is because the IDE can't record everything that you want. I recommend that you create your test from scratch by hand to get it to check the elements CSS.

Related

Finding xpath of shadow dom elements with robot framework

I'm writing automated UI tests using Robot Framework with python. I'm testing a Polymer application that uses the shadow dom Robot's standard libraries don't seem to be able to locate elements in the shadow dom using xpath.
I've been sorting through selenium's repo/overflow/internets and polymer's repo/overflow/internets and haven't found the intersection of a solution for using robot with python (the selenium workaround isn't that graceful either). I was hoping someone had run into this issue with this specific framework that might be willing to share a solution (or note that there's not one).
Test Case
Wait Until Page Contains Element xpath=(//html/body/some-root-shadow-dom-element/input)
This of course results in an error because the shadow dom is not put into the main document of the DOM tree.
Open the browser console and type this into the console:
dom:document.querySelector("apply-widget").shadowRoot.querySelectorAll("div)
Make sure to hit enter after so it will be ran.

Selenium css selectors on element with huge list of classes

I've been working on automation of a product that uses Dojo. The html I'm working with is very messy.. I need to click on div that has following css selector
div.dijit.dijitReset.dijitInline.dijitLeft.dijitTextBox.dijitComboBox.dijitDateTextBox.dijitValidationTextBox.dijitTextBoxError.dijitComboBoxError.dijitDateTextBoxError.dijitValidationTextBoxError.dijitError
I'm using firefinder plugin in Firefox and it can see the element all the time, out of 2 chrome plugins I have (CSS selector tester and CSS and Xpath checker) only the first one can find the element.
When I run my selenium code I get org.openqa.selenium.NoSuchElementException.
I tried selecting classes with . and with [class=".."] as well and both failed.
Is there some selenium limitation on how many classes you can have assigned to your element before it stops seeing an element? What stable approach can I use to make my tests work?
Use FirePath plugin in firefox and look for unique classes so you only have 1 unique selector. Also look up CSS selectors, they will help you in the long run
http://www.w3schools.com/cssref/css_selectors.asp

Storing values in Selenium IDE with a non standard tag

I have a non standard tag in an HTML doc that I need to write a selenium test for.
Here is the tag: <evo:password>SomeText</evo:password>
And my selenium ide command I'm trying:
Command: storeEval
Target: xpath=/x:html/x:body/x:div/x:div[1]/x:div[2]/x:div/x:div/x:table/x:tbody/x:tr[2]/x:td[2]/x:strong/x:evo:password
Value: adminPass
Not sure what I need as my Target to get this to work and store the value between my tags.
I had to get creative with my selector. I ended up using a CSS selector and getting the last element with it.
css=strong:last
I'm sure you can also use :nth-child among other natural css selectors.

How can I write Selenium test case for a specific GWT Widget?

I'm very new to Selenium. I want to write Selenium test cases for GWT widget. I can wirte test case for HTML elements since they have id, but i'm not able to do the same in GWT. I want to test widgets such as textboxes, images, listbox etc.
Can anyone help me?
Thanks in advance,
Gnik
Now I set debugId for the GWT widgets. Using that Id I can access the elements and test.
For eg. In UiBinder set id as <g:TextBox ui:field="textBox" debugId="userBox"
In the java code, textBox.ensureDebugId("userBox");
I can access these widgets in Selenium as follows,
selenium.type("gwt-debug-userBox", "testing");
I don't know if selenium is the right tool to test GWT Widgets, I think there are special tools for that.
With Selenium you can automate the browser. If GWT doesn't provide ids for its html elements there are various other ways to locate your elements. For example you can use xpath or css selectors. Just check the Selenium documentation.
But again, be careful about what you want to test. You don't want to test that GWT Widgets create a proper Web application, that is done already. You probably want to use a special GWT test tool where you test the java side of your widget.

Selenium xpath flow

Can anyone tell me what is the exact flow of taking out xpath in Selenium-IDE.
After trying alot by putting alerts i m not getting how to take out the exact xpath.
Selenium displays the xpath according to xpath:position and some others ways also but i want to add the xpath traversing from html i.e the topmost position.How can i do that???
I've come to prefer CSS selectors over Xpath. The IDE won't create them for you, but with a little practice they're very easy to write. As a bonus, they make your tests much easier to maintain.
For example, let's say you have a button with the text "save". The locator would be:
css=button:contains('save')
Check out http://www.w3.org/TR/css3-selectors/ for more detail.
I use XPather to find out the xpath. Then I use the resulting path in the Selenium IDE to cross verify. You could also use other tools like XPath Checker or Firebug to do the same.
Write 1 line of code in javascript:
LocatorBuilders.order = ['id', 'link', 'name', 'dom:name', 'xpath:link', 'xpath:img','xpath:attributes', 'xpath:href', 'dom:index', 'xpath:position'];
change it the way you want (not all of them has to be there)
see:
chrome://selenium-ide/content/locatorBuilders.js
save as your_file.js
add your_file.js as "Selenium Core extensions" in the IDE options
Firefinder for Firebug helps matching both CSS and XPath locators
In general, with Firebug installed, you can Inspect Elements for their HTML and DOM structures to determine what best locator you can build.
the best way to find x PAth is :
open developer tool bar in chrome:
Find the x Path displayed below :
You can directly copy and paste this x path in your script