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. It is highly recommended to use CSS Locator instead of XPath to locate elements in document Selenium official website.the reason is that 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:

// HTML Source: class= "X-right-button" ...>//CSS can be written like this:css=button.x-right-button//  which. Represents class

Note: If you have spaces in class, use. Instead of spaces such as:

1 // HTML: 2 class= "X-btn-text Module_picker_icon" > ... 3 4 // CSS can be written like this: 5 Css=button.x-btn-text.module_picker_icon

If you want to position with a different property value, use the square brackets "Property name = attribute value", such as: <abbr>abc<abbr/>css=abbr[title= "ABC" If the button has an id attribute, such as:

1 //HTML:2<input id= "Ag_name" type= "text" ...>3 4 //CSS can be written like this:5css=Input#ag_name6 7 //or write directly8css=#ag_name9 //where # represents IDTen  One //However, in the actual case, if there is an element fixed ID, you can use the ID locator directly, so write: AId=Ag_name -  -This is usually the input element in the form, which requires the user to fill in the content and then submit the part, and also the simplest part.

 2. There is no 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 Document Chapter 6.6 pseudo-classes and Chapter 7 pseudo-elements  basically using XPath to locate the element, can use CSS selector to navigate to. It's two of the most similar is written: <table><tr><td><div><span>abcd</span><span>1234</span &GT;&LT;/DIV&GT;&LT;/TD&GT;&LT;/TR&GT;&LT;/TABLE&GT;XPATH=//TABLE/TR/TD/DIV/SPAN[1],  //button[@type = ' Submit '],  //input[@type = ' button ',  //a[@data-role= ' button ']css=table>tr>Td>div>span:nth-child (1) 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/to sum up, is: There is a fixed ID with the ID selector, with no fixed ID for the CSS selector. Pseudo-selements:contains () is very useful. This will be a few, basically positioning is not a problem.

Selenium-css Selector