Selenium-css Selector

Yesterday I practiced using CSS (that is, cascading style sheets cascading Stylesheet) Selector to locate the elements (Elements) on the (locate) page. The document in Selenium's official website strongly recommends using CSS Locator instead of XPath to locate elements, because CSS locator is faster than XPath locator, especially under IE (ie does not have its own XPath parser ( Parser)). A lot of blog articles related to selenium have mentioned the use of CSS selector technology. Before I did not CSS Selector, even a see CSS on the headache. But I believe the CSS selector can pinpoint the elements I want to test. Because the front-end developers are using CSS selector to set the style of each element on the page, no matter how complex the position of that element, they can navigate, and I can navigate. Read this document to understand that most of the CSS selector http://www.w3.org/tr/css3-selectors/  if the button has a class attribute, such as:  <button id= " ext-eng=1026 "class=" X-right-button "...> can be written like this: Css=button.x-right-button. For class  If class takes a space, use. To replace spaces such as: <button class= "X-btn-text module_picker_icon" ... You can write:css=button.x-btn-text.module_picker_icon   if you want to position with a different property value, using the square brackets "Property name = property value", such as:<abbr>abc< Abbr/>css=abbr[title= "ABC"]  if the button has an id attribute, such as: <input id= "Ag_name" type= "text" ...> can write like this: css=input# ag_name  or directly write  css= #ag_name # represents the ID but in the actual should, if there is an element fixed ID, you can directly with the ID locator, so write: Id=ag_name This is usually the input element in the form, Users need to fill in the content and then submit the section, is also the most simpleThe single part.   does not have a fixed ID, usually the ID generated automatically by the JavaScript framework, such as, each loading page will change, such as: <button id= "ext-eng-1026", the next time may be <button id= " ext-eng-2047 "> This situation cannot be located by using the id attribute.   If you want to locate a button that shows OK, but there are several button,id on the page that are automatically generated, class is the same, and I want to use a simple point CSS locator, <button id= "ext-eng-1026" class= "X-right-button" >ok</button><button id= "ext-eng-1027" class= "X-right-button" >Cancel</ button>  can write:  css=button.x-right-button:contains ("OK"): Contains is a pseudo-class, begins with a colon, the contents in parentheses. Pseudo-classes is a pseudo-class provided by CSS to access information outside the DOM tree on the page, as well as pseudo-elements for the most precise positioning of a line of text on a page, even the first letter of a line of text. I was the first to hear about it yesterday. CSS3 Selector Documentation Chapter 6.6 pseudo-classes and Chapter 7 pseudo-elements   Basically with XPath can locate the element, all can use CSS selector to locate. It's two of the most similar are written: <table><tr><td><div><span>abcd</span><span>1234< /span></div></td></tr></table>xpath=//table/tr/td/div/span[1]css=table>tr>td >div>span:nth-child (1) *xpath was not tested on the page. A very good blog, do not see a pity. Http://saucelabs.com/blog/index.php/2009/10/selenium-tip-of-the-week-start-improving-your-locators/  in summary, that is: with a fixed ID ID selector,  does not have a fixed ID with CSS selector.  pseudo-selements:contains () is very useful. This will be a few, basically positioning is not a problem.

Selenium-css Selector