Elements in Robotframework Locator[xpath and CSS]

1: By ID
2: By name
3: Through XPath
3.1 Through the absolute path of the XPath, from the outermost start to find
such as/html/body/div[1]/div[4]/div[2]/div/form/span[1]/input
3.2 Relative paths through XPath
3.2.1 FindElementsItself
XPath can also take advantage of the attributes of the element itself, such as xpath=//*[@id = ' kw1 ')
Represents a level, * denotes a tag name, @id =KW1 indicates that the element has an ID equal to KW1
You can also specify a label name, such as xpath=//input[@id = ' kw1]
Attributes that the element itself can take advantage of are not limited to the ID or name, for example: xpath=//input[@type = ' text ')
xpath=input[@autocomplete = ' off ')
3.2.2 Find elements through the ancestors of the elements
xpath=//span[@id = ' AA ']/span/input
3.2.3 Boolean-value notation
Using Boolean values to determine an element with multiple attributes, such as xpath=//span[@id = ' AA ' and @name = ' BB ']

3.2.4 contains usage [contains (@attribute, string)] such as: Using XPath's matching function,//input[contains (@id, ' NT ')]
All the relevant knowledge of XPath: http://www.w3school.com.cn/xpath/xpath_syntax.asp XPath representation method:

Username=driver.  Find_element_by_xpath("//form[input/@name = ' username ')"(the form has the input child element, which has the name attribute)Username  =driver.  Find_element_by_xpath("//form[@id = ' loginform ']/input[1]")      

Username=driver.  Find_element_by_xpath("//input[@name = ' username ']")     

Clear_button=driver.  Find_element_by_xpath("//input[@name = ' Continue '] [@type = ' button ']") (input element has name and type two attributes) 

XPath knowledge related sites: http://www.w3schools.com/https://www.w3.org/TR/xpath/http://www.zvon.org/comp/r/tut-XPath_1.html Plug-ins for viewing XPath:

• XPath checker-suggests XPath and can is used to test XPath results.
• Firebug-xpath suggestions is just one of the many powerful features of this very useful add-on.
• XPath helper-for Google Chrome

4: Via CSS Path
4.1CSS Path Knowledge: http://www.w3school.com.cn/cssref/css_selectors.asphttp://saucelabs.com/resources/articles/ Selenium-tips-css-selectors
4.2CSS selector knowledge "for Chrome->console" CSS selector boolean notation: and-> "[alt= ' no column layout ']| [src= '/images/nocol.png '] "-Select the alt attribute of ' no column layout ' and the src attribute as/image/nocol.png element.
Selector

Selector	Example	Example Description	CSS
. class	. intro	Select all elements of class= "Intro".	1
#ID	#firstname	Select all elements of id= "FirstName".	1
*	*	Selects all elements.	2
Element	P	Select all <p> elements.	1
element,element	Div,p	Select all <div> elements and all <p> elements.	1
element element	Div p	Select all <p> elements inside the <div> element.	1
element>element	Div>p	Selects all <p> elements of the parent element for the <div> element.	2
element+element	Div+p	Select all <p> elements immediately after the <div> element.	2
[attribute]	[Target]	Selects all elements with the target property.	2
[attribute=value]	[Target=_blank]	Select all elements of target= "_blank".	2
[attribute~=value]	[Title~=flower]	Select all elements of the title property that contain the word "flower".	2
[attribute|=value]	[Lang|=en]	Select all elements with the Lang attribute value beginning with "en".	2
: Link	A:link	Select all links that have not been accessed.	1
: Visited	a:visited	Select all links that have been visited.	1
: Active	A:active	Select the active link.	1
: hover	A:hover	Select the link on which the mouse pointer is located.	1
: Focus	Input:focus	Select the input element that gets the focus.	2
: First-letter	P:first-letter	Select the first letter of each <p> element.	1
: First-line	P:first-line	Select the first line of each <p> element.	1
: First-child	P:first-child	Select each <p> element that belongs to the first child element of the parent element.	2
: Before	P:before	Insert content before the contents of each <p> element.	2
: After	P:after	Insert content after each <p> element's content.	2
: lang (language)	P:lang (IT)	Select each <p> element with a value for the lang attribute that starts with "it".	2
element1~element2	P~ul	Select each <ul> element that has a <p> element in front of it.	3
[attribute^=value]	a[src^= "https"]	Select each <a> element whose src attribute value begins with "https".	3
[attribute$=value]	A[src$= ". pdf"]	Select all <a> elements whose src attribute ends with ". pdf".	3
[attribute*=value]	a[src*= "ABC"]	Select each <a> element that contains the "ABC" substring in its src attribute.	3
: First-of-type	P:first-of-type	Select each <p> element that belongs to the first <p> element of its parent element.	3
: Last-of-type	P:last-of-type	Select each <p> element that belongs to the last <p> element of its parent element.	3
: Only-of-type	P:only-of-type	Select each <p> element that belongs to the <p> element that is unique to its parent element.	3
: Only-child	P:only-child	Selects each <p> element that belongs to the unique child element of its parent element.	3
: Nth-child (n)	P:nth-child (2)	Selects each <p> element that belongs to the second child element of its parent element.	3
: Nth-last-child (n)	P:nth-last-child (2)	Ditto, counting from the last child element.	3
: Nth-of-type (n)	P:nth-of-type (2)	Select each <p> element that belongs to the second <p> element of its parent element.	3
: Nth-last-of-type (n)	P:nth-last-of-type (2)	Ditto, but starts counting from the last child element.	3
: Last-child	P:last-child	Select each <p> element that belongs to the last child element of its parent element.	3
: Root	: Root	Select the root element of the document.	3
: Empty	P:empty	Select each <p> element that has no child elements (including text nodes).	3
: Target	#news: Target	Select the currently active #news element.	3
: Enabled	Input:enabled	Select each of the enabled <input> elements.	3
:d isabled	Input:disabled	Select each of the disabled <input> elements	3
: Checked	Input:checked	Select each <input> element that is selected.	3
: Not (selector)	: Not (P)	Select each element of the non-<p> element.	3
:: Selection	:: Selection	Select the part of the element that is selected by the user.	3

4.2 The difference between the CSS and the rebotframework in the console:
-In Rebotframework: css=i[class^= ' X-icon ']
-In Consonle: $ (' i[class^= ' X-icon "])


4.3 * Choose with jquery
Example: jquery=.active [title= "Remove"]
Http://www.w3school.com.cn/jquery/jquery_selectors.asp


4.4CSS selector Knowledge "for selenium syntax"

*	Universal element selector to match any element
E	Tag Selector that matches all elements that use the E tag
. info	Class selector that matches all elements of the class attribute that contain info
#footer	ID selector that matches all elements of the id attribute equal to footer
E,f	A multi-element selector that matches all E or f elements, separated by commas between E and F
E F	A descendant element selector that matches all f elements that are descendants of the E element , separated by a space between E and F
E > F

Elements in Robotframework Locator[xpath and CSS]