With the development of the IT industry, products have become increasingly complex, and web-side businesses and processes have become more cumbersome. Currently, UI testing is only for a single page, which requires a large amount of operations. In order to meet the needs of multi-page functions and processes and save man-hours, this UI automation test program was designed. It aims to provide interfaces to integrate into the Snail automated testing framework to facilitate the design of use cases.
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 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.
现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：110685036
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.
1.id positioning
Position the input box on Baidu homepage through the id attribute.
# 通过input标签的id属性进行定位 find_element_by_id('su')2.name positioning
Position the input box on Baidu homepage through the name attribute.
# 通过input标签的name属性进行定位 find_element_by_name('wd')3.class_name positioning
Position the input box on Baidu homepage through the class attribute.
# 通过input标签的class属性进行定位 ind_element_by_class_name('s_ipt')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.
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('意见反馈')6.partialLinkText positioning
Positioning is performed through fuzzy matching of part of the text information of the a tag.
# 通过对a标签的部分文本信息模糊匹配进行定位 find_element_by_partial_link_text('反馈')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.
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 choose in the order of "id > name > xpath/css > other".
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.
Finally, I would like to thank everyone who has read my article carefully. Looking at the increase in fans and attention, there is always some courtesy. Although it is not a very valuable thing, if you can use it, you can take it directly!
Software Testing Interview Document
We must study to find a high-paying job. The following interview questions are from the latest interview materials from first-tier Internet companies such as Alibaba, Tencent, Byte, etc., and some Byte bosses have given authoritative answers. After finishing this set I believe everyone can find a satisfactory job based on the interview information.
