WebDriver API: how to locate the elements on the Web page, webdriverapi

WebDriver API: how to locate the elements on the Web page, webdriverapi

Through the front-end tool, we can see a webpage. The elements on the page are composed of a line of code, which are organized hierarchically. Each element has a differentTag NameAndAttribute Value. WebDriver uses this information to find different elements.

WebDriver provides eight element locating methods:

(1) id
(2) name
(3) class name
(4) tag name
(5) link text
(6) part of link text of partial link
(7) xpath
(8) css selector

Positioning elements on the Web page can be distinguished from other elements by attributes such as id, name, class name, and tag name. You can use the location attribute: XPath and CSS to provide Hierarchical relationship with the label namePath. XPath and CSS also provide the method for finding final elements through related elements;

The corresponding Positioning Method in Java is as follows:

Import org. openqa. selenium. by ;... findElement (. id () // The findElement (. name () // locate the findElement (. className () // locate the findElement (. tagName () // locate the findElement (. linkText () // locate the findElement (. partialLinkText () // locate the findElement (. xpath () // use the XPath language to locate the element findelement(by.css Selector () // used to locate the element in the CSS language

(1) id Positioning

HTML rulesId attributeIn the HTML documentMust be unique, Similar to the id card number. The id locating method provided by WebDriver is to search for elements through the element id attribute.
· Use id to locate the Baidu input box and Baidu search button as follows:

findElement(By.id("kw"))findElement(By.id("su"))

(2) Positioning by name

HTML requires nameElement name, Similar to the name of a person. The attribute value of name can be unique on the current page.
· Use name to locate the Baidu input box:

findElement(By.name("wd"))

(3) class positioning

HTML specifies the class to specify the class Name of the element. Its usage is similar to id and name;
· The following uses the class attribute to locate the Baidu input box and search button:

findElement(By.className("s_ipt"))findElement(By.className("bg s_btn"))

(4) tag location

HTMLNatureEach element is essentially a tag. Because a tag is often used to define a type of function, the probability of identifying an element by tag is very low. For example, when we open any page and view the front-end, a large number

,So it is difficult to distinguish different elements by tag name.
· If you use the tag name to locate Baidu's input boxes and Baidu buttons, you will find that they are exactly the same:

 

findElement(By.tagName("input"))

(5) link Positioning

Link positioning is different from the previous positioning methods.Text Link.
· The Code of several text links in the Baidu input box is as follows:

News hao123 map video

Looking at the code above, we found that locating through the name attribute is a good choice. However, this is to demonstrate the use of link positioning. The link positioning link is as follows:

FindElement (. linkText ("news") findElement (. linkText ("hao123") findElement (. linkText ("map") findElement (. linkText ("video") findElement (. linkText (" "))

(6) Positioning of partial link

Parial link positioning is a supplement to link positioning. Some text links will be long. At this time, we canLocate part of a text linkAs long as this part of information uniquely identifies this link.

A long and long text link

· Positioning through partial link is as follows:

FindElement (By. partialLinkText ("A long one") findElement (By. partialLinkText ("Text Link "))

(7) XPath Positioning

XPath is a language used to locate elements in XML documents. It has multiple positioning policies.Because HTML can be seen as an implementation of XML, Selenium users can use this powerful language to locate elements in Web applications.

1 'absolute path locating

If you still think of an element as a person, assume that this person does not have any attribute features (mobile phone number, name, and ID card number), but this person must be stored in a certain geographical location, for example, No. xx, xx Road, xx district, xx city, xx province. The element on the page also has such an absolute address.
· Refer to the code displayed by the baidu.html front-end tool. We can find the Baidu input box and search button in the following way.

findElement(By.xpath("/html/body/p/p[2]/p/p/p/from/span/input"))findElement(By.xpath("/html/body/p/p[2]/p/p/p/from/span[2]/input"))

XPath mainly uses the hierarchical relationship of tag names to locate the absolute path of elements,The outermost layer is the html language. There is a body text, which can be searched at the first level. If there are multiple identical tag names at the same level, the number of tag names is determined in the upper and lower order. For exampleP [2]The second p tag at the current level.

2 'locate using element attributes

In addition to absolute paths, XPath can also be located using element attribute values.
Take the Baidu input box and search button as an example:

//// Indicates a directory on the current page; // input indicates the Tag Name of the positioning element; // [@ id = 'kw '] indicates that the id attribute value of this element is equal to kw; findElement (. xpath ("// input [@ id = 'kw ']") // locate findElement (. xpath ("// input [@ id = 'su']") findElement (. xpath ("// input [@ name = 'wd ']") // locate findElement (. xpath ("// input [@ class ='s _ ipt']") // locate findElement (. xpath ("// * [@ class = 'bg s_btn ']") // if you do not want to specify a tag name, you can also use an asterisk (*) replacing // using XPath is not limited to the values of id, name, and class. Any attribute value of an element can be used as long as it uniquely identifies an element findElement (. xpath ("// input [@ maxlength = '000000']") // locate findElement (. xpath ("// input [@ autocomplete = 'off']") findElement (. xpath ("// input [@ type = 'submit ']")

3 'hierarchy and Attribute combination

If an element itself does not uniquely identify the attribute value of the element, we can find its upper-level element. If its upper-level element has a value that uniquely identifies the attribute, it can also be used;

// Baidu.html text

If the Baidu input box does not have any available attribute values, we can look for its upper-level Attribute. If the parent element does not have any available attribute values, we can continue to look up the "grandpa" element. The description is as follows through XPath:

FindElement (. xpath ("// span [@ class = 'bg s_ipt_wr ']/input") // span [@ class = 'bg s_ipt_wr'] locates the parent element through the class attribute, the following/input indicates the subelement findElement (. xpath ("// form [@ id = 'form']/span/input") // use the grandfather element form to find inputfindElement (. xpath ("// form [@ id = 'form']/span [2]/input "))

We can use this method to perform a first-level lookup until we find the outermost tag, which is an absolute path.

4 'use logical operators

If an attribute cannot be uniquely divided into one element, we can alsoConnect multiple attributes using logical operatorsTo find elements

// Baidu.html text

If we want to locate the element of the first line, if we use the id, it will be the same as the element of the second line. If we use the class, it will be the same as the element of the third line. If both id and class are used, this element is uniquely identified. At this time, two conditions can be connected through the logical operator "and; you can also use "and" to connect more attributes to uniquely identify an element;

findElement(By.xpath("//input[@id='kw' and @class='su']/span/input"))

FirebugFront-end debugging tools andFirePathThe plug-in can easily generate the XPath syntax.

Open the FireBug plug-in Firefox, click the mouse arrow in the upper left corner of the plug-in, click the elements to be located on the page, right-click the element line, and select "Copy XPath ", the XPath syntax of the current element is obtained. The FirePath plug-in is more convenient and convenient to use. After selecting an element, you can directly generate the XPath syntax of the current element in the XPath input box; (8) CSS positioning

CSS (Cascading Style Sheets)Is a language used to describe the performance of HTML and XML documents. CSS usageSelectorTo bind properties to page elements. These selectors can be used by Selenium as another locating policy. CSS allows you to flexibly select any property of a control. In general, the positioning speed is faster than that of XPath;
The common syntax of the CSS selector is as follows:

Selector	Example	Description
.class	.intro	Class selector, select all elements of class = "intro"
#id	#firstname	Id selector, select all elements of id = "firstname"
*	*	Select all elements
element	p	Element all Element
element > element	p > input	Select the parent element AllElement
element + element	p + input	Select the same level to connect AllElement
[attribute=value]	[target=_blank]	Select all elements of target = "_ blank"

· The following uses the Baidu input box and search button as an example to describe how to locate CSS:

// 1. Locate by class attribute, point number (.) specifies the position of the element findelement(by.css Selector (". s_ipt "zookeeper findelement(by.css Selector (". bg s_btn ") // 2. Locate by id attribute. The id (#) indicates that the findelement(by.css Selector (" # kw "))findElement(By.css Selector (" # su ") is located by id ")) // 3. Identify by Tag name. In CSS, use the tag name to locate the element without any symbol, and directly use the tag name as findelement(by.css Selector ("input") // 4. Locate by parent-child relationship with the parent element named span, find all the sub-elements whose tags are named input, findelement(by.css Selector ("span> Indium Ut ") // 5. You can use any attribute of the element in CSS to uniquely identify the element. Specify Selector ("input [autocomplete = 'off']" specify multiple findelement(by.css Selector ("input [maxlength = '000000']" specify multiple findelement(by.css Selector ("input [type = 'submit ']")) // 6. Combined positioning: Combine the positioning policy of the operator to use findelement(by.css Selector ("form. fm> span> input. s_ipt "extends findelement(by.css Selector (" form # form> span> input # su "))

We can use the Firebug tool and FirePath plug-in to help us generate the CSS syntax. The generation method is the same as that of Xpath;

Comparison between similar functions of XPath and CSS: