Selenium css selectors on element with huge list of classes - selenium

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

Related

CSS selector with in Selenium IDE records are different when copied from browser development tools

For some websites Selenium IDE will record a CSS selector in a different way than the one I get when you copy the selector from the developer tools.
Here's an example page :
https://www.barnesandnoble.com/w/the-woman-they-could-not-silence-kate-moore/1138489968?ean=9781728242576
Price selector on Selenium IDE
id=pdp-cur-price
Price selector from dev tools
div.price-current-old-details:nth-child(3) > span:nth-child(1)
or
span#pdp-cur-price.price.current-price.ml-0
Add to cart button from IDE
css=.add-to-cart-button
Add to cart button from dev tools
form.focus > input:nth-child(5)
or
input.add-to-cart-button.btn-addtocart.btn-pdp-addtocart.btn.btn--commerce.mr-xs
This of course doesn't help when running the selenium script.
What solutions worked for you in getting accurate CSS selectors?
Despite the fact Selenium IDE and Developer Tools suggests near perfect locator strategies, it is always advisable to formulate more canonical locator strategies tweaking the element attributes, so the desired WebElements are uniquely identified within the DOM Tree.
You can find a couple of relevant detailed discussions in:
Chrome DevTools not find elements not search
Why XPath does not highlighted the yellow mark in Chrome84?
Chrome 84 Inspect element, find results not highlighted in yellow like before
The locators you get by IDE are correct while automatically generated locators from the dev tools are far from being so effective.
I advice you to learn how to create correct and effective locators.
There are many tutorials describing that, for example these

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.

java automation selenium,how to identify the locator in google chrome? except developers tool

i want to identify the web element for the selenium script using any plug in example in firefox we use a firepath . is plug in for chrome to identify the webelement .i have tried with developers tool but using developers tool not getting clear locator?
In most browsers just right-click on chosen element on webpage and choose 'Inspect'/'Inspect element' etc and the developer tools would open with marked HTML code for that element.
If that html code didn't show you unique ID for that element it means that you need to:
use xpath to find element by unique text inside (dont use xpath is slow)
or css selector to find it by unique attribute of that element
or asks dev team to add proper unique id/attibute to that element, and thats the best option

Testing for CSS Selenium locators from the browser

In general, when I want to test the validity of a locator to be used in Selenium, I test it using the Firebug console.
i.e., I write: $$("a#someLink") in the Firebug console and the corresponding link becomes highlighted in Firefox.
However, if I test in Firebug for a locator like:
table#someTable tr:nth-of-type(2) td:nth-of-type(2)
Firebug doesn't show anything... Even though the locator works fine from Selenium...
I guess Selenium uses some 'hacks' for CSS locators, which Firebug does not understand...
Is there any way around it? Would using Xpath locators allow me to test for those kinds of locators?
Thank you very much
Firebug has an extension called FireFinder, which allows you to test xpath or css locators and it shows all the matches on the page. Here's a link.

Using Selenium IDE, how to test CSS style information

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.