Preface
Currently, in the actual application ofautomated testing, interface automated testing is widely used, but UI automated testing will not be replaced. . Let's see how the two compare:
- Interface automated testing skips the front-end interface and directly tests the server. It has higher execution efficiency and coverage, lower maintenance costs, and overall higher investment-output ratio, so it is more widely used in projects.
- UI automated testing simulates the user's operating behavior on the front-end page for testing. Although it is easily affected by other factors (such as computer freezes, browser freezes, network speed, etc.) during the execution process, the use case execution fails. , and the later maintenance cost is higher, but UI automated testing is closer to the actual situation when users use it, and can also find some bugs that cannot be found by interface automation.
Therefore, in the automated testing of actual projects, a solution is usually adopted that focuses on interface automation and covers key business processes through UI automation after the system is stabilized. The basis of UI automation is element positioning. Only after element positioning is completed, the positioned element can be manipulated, simulating manual testing to perform a series of page interactions, such as clicking, input, etc.
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: Positioning based on ID is the most commonly used positioning method, because ID is unique and positioning is accurate and fast.
- name: Positioning through the [name] attribute of the element may not be unique.
- class_name: Locate by class attribute name.
- tag_name: Positioning by tag name, generally not recommended.
- link_text: Specially used to locate hyperlink elements (i.e. a tag), which needs to completely match the content of the hyperlink.
- partial_link_text: also used to locate hyperlink elements, but can fuzzy match the content of the hyperlink.
- xpath: Positioning based on element path, divided into absolute path and relative path, can locate all target elements.
- css_selector: The element positioning method officially recommended by selenium, which is more efficient than xpath, but requires mastering 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 have smaller usage restrictions. If you don’t know about CSS, it is recommended to use xpath to get started faster; if you have a certain basic knowledge of CSS, it is more recommended to use CSS for element positioning.
Next, taking the Baidu homepage as an example, various positioning methods will be introduced in detail in actual use.
2. Practical application of element positioning
Taking the search box on Baidu's homepage as an example, we will introduce the four element positioning methods of id, name, class, and tag_name.
2.1 ID positioning
Position the input box on Baidu homepage through the id attribute.
-
# 通过input标签的id属性进行定位 -
find_element_by_id('su')
2.2 name positioning
Position the input box on Baidu homepage through the name attribute.
-
# 通过input标签的name属性进行定位 -
find_element_by_name('wd')
2.3 class_name positioning
Position the input box on Baidu homepage through the class attribute.
# 通过input标签的class属性进行定位
find_element_by_class_name('s_ipt')
2.4 tag_name positioning
Positioning 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 the "Feedback" at the bottom of the page as an example to introduce the two positioning methods of linkText and partialLinkText.
2.5 linkText positioning
Positioning is performed through the text information of the a tag, which 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 locates elements through the attributes and paths of page elements. In theory, it can selectively position all elements on the page. The following introduces several positioning methods of xpath.
First, let’s introduce the path node expression of xpath, as shown in the figure:
(1) xpath absolute path positioning
Let’s take the search box on Baidu’s homepage as an example.
find_element_by_xpath('/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input')
复制代码Under normal circumstances, you do not choose to use xpath absolute paths for element positioning. There are two reasons: first, the absolute path is cumbersome and lengthy, which affects the running speed; second, there are many levels involved, and any change in any level will cause the positioning to fail and need to be restarted. Making modifications is 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, it is necessary to find a unique element near the target element and then locate it through the hierarchical relationship between the two.
Next, we still take the page elements of Baidu homepage as an example to illustrate the xpath positioning method.
# 通过元素属性定位百度首页的搜索框
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 copies 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 below.
However, the copied xpath may be lengthy. It is recommended that you write the xpath 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 carried out using selectors. In CSS, a selector is a pattern used to select objects that need to be styled. Element positioning through CSS can theoretically position all elements on the page.
Compared with xpath, the syntax of css is more concise and the positioning speed is faster. However, the syntax of css is more complicated than xpath and is relatively difficult to remember.
(2) css positioning example
Below, we still take the search box on 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 to Selenium’s various element positioning methods. In the actual use of the project, when choosing the positioning method, it is recommended that you use the order of "id > name > xpath/css > others".
Although UI automated testing is not as widely used as interface automated testing, it is also an inaccessible part of automated testing. I hope this article can be of some help to friends who are learning UI automation.
Thank you to everyone who reads my article carefully. There is always a courtesy. Although it is not a very valuable thing, if you can use it, you can take it directly:
These materials should be the most comprehensive and complete preparation warehouse for [software testing] friends, and this warehouse also accompanies Thousands of test engineers have gone through the most difficult journey, and I hope it can help you!Friends in need can click on the small card below to receive it
