At present, in the practical application of automated testing, interface automated testing is widely used, but UI automated testing will not be replaced. Let's see how the two compare:
- Interface automation testing skips the front-end interface and directly tests the server side. It has higher execution efficiency and coverage, lower maintenance costs, and a higher input-output ratio overall, so it is more widely used in projects.
- The UI automation test is to simulate the user's operation behavior on the front-end page for testing, although it is easy to be affected by other factors (such as computer freeze, browser freeze, network speed, etc.) during the execution process, resulting in the failure of use case execution , and the post-maintenance cost is high, but the UI automation test is closer to the real situation of the user when using it, and it can also find some bugs that cannot be found by interface automation.
Therefore, in the automated testing of actual projects, the solution is usually to focus on interface automation and cover key business processes through UI automation after the system is stable. The basis of UI automation is element positioning. Only after the element positioning is completed, can the positioned elements be operated, and a series of page interactions, such as clicking and input, can be simulated by manual testing.
1. Commonly used element positioning methods
For UI automation testing on the web side, element positioning usually uses the following 8 positioning methods provided by selenium:
- id: Locate according to id, which is the most commonly used way of locating, because id is unique, and locating is accurate and fast.
- name: Locating through the [name] attribute of the element, there may be cases where it is not unique.
- class_name: locate by class attribute name.
- tag_name: locate by tag name, generally not recommended.
- link_text: Dedicated to locating hyperlink elements (that is, a tags), which need to fully match the content of the hyperlink.
- partial_link_text: It is also used to locate hyperlink elements, but can fuzzy match the content of hyperlinks.
- xpath: Locate according to the element path, which is divided into absolute path and relative path, and can locate all target elements.
- css_selector: The element positioning method officially recommended by selenium is more efficient than xpath, but it needs to master some css basics.
In actual projects, it is more recommended to use xpath and css positioning methods, which can locate all elements in the page, and the usage restrictions are relatively small. If you don't know CSS, it is recommended to use xpath, which is faster to get started; if you have a certain foundation in CSS, it is recommended to use CSS for element positioning.
Next, taking the Baidu homepage as an example, various positioning methods are introduced in detail in actual use.
2. Practical application of element positioning
Taking the search box on Baidu's homepage as an example, this article introduces four element positioning methods: id, name, class, and tag_name.
2.1 id positioning
Use the id attribute to locate the input box on the Baidu homepage.
# 通过input标签的id属性进行定位
find_element_by_id('su')
2.2 name positioning
Use the name attribute to locate the input box on the Baidu homepage.
# 通过input标签的name属性进行定位
find_element_by_name('wd')
2.3 class_name positioning
Use the class attribute to locate the input box on the Baidu homepage.
# 通过input标签的class属性进行定位
find_element_by_class_name('s_ipt')
2.4 tag_name positioning
Locating by tag name is rarely used because the same tag is usually repeated on the page.
# 通过input标签名进行定位
find_element_by_tag_name('input')
Next, take "Feedback" at the bottom of the page as an example to introduce linkText and partialLinkText positioning methods.
2.5 linkText positioning
Locating through the text information of the a tag is only used to locate the hyperlink a tag.
# 通过a标签的文本信息进行定位
find_element_by_link_text('意见反馈')
2.6 partialLinkText positioning
Positioning is performed by fuzzy matching of part of the text information of the a tag.
# 通过对a标签的部分文本信息模糊匹配进行定位
find_element_by_partial_link_text('反馈')
2.7 xpath positioning
The xpath positioning method is to locate elements through the attributes and paths of page elements. In theory, all elements in the page can be selectively positioned. The following introduces several positioning methods of xpath.
First, introduce the path node expression of xpath, as shown in the figure:
(1) xpath absolute path positioning
The search box on the Baidu homepage is still used as an example for introduction.
find_element_by_xpath('/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input')Under normal circumstances, you will not choose to use the xpath absolute path for element positioning. There are two reasons: one is that the absolute path is cumbersome and lengthy, which affects the running speed; Modifications are not conducive to later maintenance.
(2) xpath relative path and element attribute combined positioning
If a certain attribute of the target element is unique, the target element can be positioned directly; otherwise, a unique element needs to be found near the target element, and then positioned through the hierarchical relationship between the two.
Next, still take the page elements of Baidu's homepage as an example to illustrate the way of xpath positioning.
# 通过元素属性定位百度首页的搜索框
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']")
# 通过文本信息定位(和text_link方法不同，不局限于a标签)
find_element_by_xpath("//a[text()='意见反馈']")
find_element_by_xpath("//span[text()='设置']")
# 通过父级定位子级元素，举例百度首页搜索按钮
find_element_by_xpath("//span[@class='bg s_btn_wr']/input")
# 通过子级定位父级元素，举例百度首页百度热榜的换一换
find_element_by_xpath("//span[text()='换一换']/..")
# 通过contains方法模糊匹配定位，举例百度首页搜索按钮
find_element_by_xpath("//input[contains(@class,'s_btn')]")
find_element_by_xpath("//a[contains(text(),'反馈')]")
(3) Browser copy xpath
In addition to the above two methods, there is another simple method, which is to find the target element in the F12 developer tool of the browser, and right-click to copy it, as shown in the figure below.
However, the copied xpath path may be very lengthy. It is recommended that you write the xpath path of the target element yourself according to your needs.
2.8 css_selector positioning
(1) Introduction to css positioning
css_selector positioning (hereinafter referred to as css positioning), its positioning method is performed by using a selector. In CSS, a selector is a pattern used to select an object to be styled. Element positioning through css can theoretically locate all elements on the page.
Compared with xpath, the syntax of css is more concise and the positioning speed is faster, but the syntax of css is more complicated than xpath, and it is relatively difficult to remember.
(2) css positioning instance
Next, take the search box on the Baidu homepage as an example to illustrate the css positioning method.
# 通过id定位，id名前加#
find_element_by_css_selector("#kw")
# 通过class定位，class名前加.
find_element_by_css_selector(".s_ipt")
# 通过标签定位
find_element_by_css_selector("input")
# 通过其它属性定位
find_element_by_css_selector("[name='wd']")
# 标签和属性组合定位
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']")
# 通过父级定位子级元素
find_element_by_css_selector("from#form>span[@class='bg s_ipt_wr']>input")
3. Summary
The above is a brief introduction of various element positioning methods of selenium. In the actual use of the project, it is recommended that you choose the positioning method in the order of "id > name > xpath/css > others".
Although UI automation testing is not as widely used as interface automation testing, it is also an inaccessible part of automation testing. I hope this article can be of some help to those who are learning UI automation.
Finally, I would like to thank everyone who has read my article carefully. Reciprocity is always necessary. Although it is not a very valuable thing, you can take it away if you need it:
These materials should be the most comprehensive and complete preparation warehouse for [software testing] friends. This warehouse has also accompanied tens of thousands of test engineers through the most difficult journey, and I hope it can help you! Partners can click the small card below to receive