This article originally appeared on Walker AI

At present, in the actual application of automated testing, interface automated testing is widely used, but UI automated testing will not be replaced. Let’s take a look at the comparison:

  • Interface automation testing is to skip the front-end interface directly to the server side of the test, execution efficiency and coverage, lower maintenance costs, overall higher output ratio, so more widely used in the project.
  • While the UI test automation is simulated users in the operation behavior of the front page, although other factors in the implementation process received (such as computer caton, the browser caton, speed, etc.) and lead to the failure case execution, and later maintenance cost is higher, but the UI test automation closer to the user when using the real situation, You can also find bugs that interface automation can’t find.

Therefore, in the actual project automation test, usually adopt interface automation, system stability through UI automation to cover the key business processes. The foundation of UI automation is element positioning. Only when the elements are located can they be manipulated, simulating manual testing through a series of page interactions such as clicking, typing, and so on.

1. Common element positioning methods

For UI automation tests on the Web side, element positioning typically uses the following eight positioning methods provided by Selenium:

  • Id: The most common method is to locate the device based on the ID. The ID is unique, and the device can locate the device accurately and quickly.
  • Name: The [name] attribute of the element is used to locate the element. There may be non-unique cases.
  • Class_name: indicates the location by class attribute name.
  • Tag_name: indicates the tag name. This parameter is not recommended.
  • Link_text: It is used to locate hyperlink elements (a tag) that exactly match the content of the hyperlink.
  • Partial_link_text: Also used to locate hyperlink elements, but can vaguely match the content of the hyperlink.
  • Xpath: Locates according to the element path, which is divided into absolute path and relative path, and can locate all target elements.
  • Css_selector: Selenium’s official recommended method for locating elements. This method is more efficient than xpath, but requires some CSS basics.

In a real project, xpath and CSS positioning are more recommended, which can be used to locate all the elements on the page and are less restrictive. If you are not familiar with CSS, it is recommended to use xpath to get started faster. If you have some basic knowledge of CSS, it is recommended to use CSS for element positioning.

Next, take Baidu home page as an example, in the actual use of various positioning methods are introduced in detail.

2. Practical application of element positioning

This section uses the search box on the Baidu home page as an example to describe how to locate the four elements: ID, name, class, and tag_name.

2.1 id positioning

Through the ID attribute of baidu home page of the input box for positioning.

# Locate using the ID attribute of the input tag
find_element_by_id('su')
Copy the code

2.2 the name positioning

Locate the input box of baidu home page through the name attribute.

# is located by the name attribute of the input tag
find_element_by_name('wd')
Copy the code

2.3 class_name positioning

Locate the input box on baidu home page through the class attribute.

# is located by the class attribute of the input tag
find_element_by_class_name('s_ipt')
Copy the code

2.4 tag_name positioning

Positioning by tag name is rarely used because the same tag is often repeated on a page.

# Locate using the input tag name
find_element_by_tag_name('input') 
Copy the code

Next, the “feedback” at the bottom of the page is used as an example to describe the linkText and partialLinkText positioning methods.

2.5 linkText positioning

The device uses the text information on label A to locate only the hyperlink label A.

# Locate via the text message in the A tag
find_element_by_link_text('Feedback')
Copy the code

2.6 partialLinkText positioning

The partial text information of a tag is located by fuzzy matching.

# Locate by fuzzy matching part of the text information of a tag
find_element_by_partial_link_text('feedback')
Copy the code

Xpath 2.7 positioning

The xpath positioning method is to locate the elements through the attributes and paths of the page elements. Theoretically, all the elements in the page can be selected and positioned. The following describes several positioning methods of xpath.

First, let’s look at xpath’s path node expression, as shown below:

(1) Xpath absolute path location

The search box of baidu home page is still introduced as an example.

find_element_by_xpath('/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input')
Copy the code

In general, you do not choose to use an xpath absolute path to locate elements for two reasons: First, the absolute path is tedious and lengthy, which affects the running speed; Second, there are many levels involved. Any change at any level will lead to location failure and need to be modified again, which is not conducive to later maintenance.

(2) Locating relative paths of xpath and element attributes

If an attribute of the target element is unique, the target element can be located directly. Otherwise, you need to find a unique element near the target element and then locate it through the hierarchical relationship between the two.

Next, still take the page element of Baidu home page as an example to illustrate the way of xpath positioning.

# Locate the search box on the home page of Baidu through the element attributes
find_element_by_xpath("//input[@id='su']")
find_element_by_xpath("//input[@name='wd']")
find_element_by_xpath("//input[@class='s_ipt']")
find_element_by_xpath("//input[@autocomplete='off']")

# Locate by text message (unlike text_link, not limited to a tag)
find_element_by_xpath("//a[text()=' feedback ']")
find_element_by_xpath("/ / span [text () = 'Settings']")

# Locate child elements by parent, for example, baidu home page search button
find_element_by_xpath("//span[@class='bg s_btn_wr']/input")

# Locate the parent element through the child level, for example, baidu home page Baidu hot list change
find_element_by_xpath("//span[text()=' change ']/..")

# Through the contains method fuzzy matching positioning, such as baidu home page search button
find_element_by_xpath("//input[contains(@class,'s_btn')]")
find_element_by_xpath("/ / a [contains (text (), 'feedback')]")

Copy the code

(3) The browser copies xpath

In addition to the above two methods, there is an easy way to find the target element in the browser’s F12 developer tools, right-click and copy it, as shown below.

However, the copied xpath path can be lengthy, so it is recommended that you write your own xpath path for the target element as required.

2.8 css_selector positioning

(1) Overview of CSS positioning

Css_selector location (hereinafter referred to as CSS location). It is located using a selector. In CSS, a selector is a pattern used to select the object to which you want to add a style. Using CSS to locate elements, it is theoretically possible to locate all elements in the page.

Compared to xpath, THE syntax of CSS is cleaner and faster to locate, but the syntax of CSS is more complex than xpath and relatively hard to remember.

(2) The CSS locates the instance

The following uses the search box on the Baidu home page as an example to illustrate the CSS positioning method.

# is located by the ID, which is preceded by #
find_element_by_css_selector("#kw")

# is located by class, which is preceded by the class name.
find_element_by_css_selector(".s_ipt")

# locate by tag
find_element_by_css_selector("input")

# Locate by other attributes
find_element_by_css_selector("[name='wd']")

# tag and attribute combination location
find_element_by_css_selector("input#kw")
find_element_by_css_selector("input.s_ipt")
find_element_by_css_selector("input[name='wd']")
find_element_by_css_selector("[name='wd'][autocomplete='off']")

# Locate child elements by parent
find_element_by_css_selector("from#form>span[@class='bg s_ipt_wr']>input")

Copy the code

3. Summary

This is a brief introduction to Selenium’s various element positioning methods. In the actual use of the project, in the selection of positioning methods, it is recommended that we choose the order of “ID > Name > xpath/ CSS > Others”.

Although UI automation test is not widely used as interface automation test, it is also a part of automation test that cannot be obtained. I hope this article can produce some help for those who learn UI automation.

PS: more dry technology, pay attention to the public, | xingzhe_ai 】, and walker to discuss together!