How to implement automated testing of front-end projects? One article with 4 steps will help you achieve success!

This is actually what we often call "UI automated testing". In response to this question, I will first inform you of the following ideas for answering the question:

1. What is UI automation? What are the advantages?
2. What difficulties will you encounter in UI automation practice?
3. How to solve problems and implement UI into practice? [Key Points]
4. UI automation learning materials

1. What is UI automation? Why use UI automation?

1. What is UI automation?

In essence, UI automated testing is to use scripts or tools to replace manual execution of functional test cases and automatically complete the execution of test cases. It is often used to verify the functionality, compatibility, and stability of the user interface, and is mainly used to perform regression testing.

UI automation testing can simulate user interaction with an application or website, automatically perform operations on the user interface, such as clicking buttons, entering text, selecting options, etc., and checking whether the response and behavior of the application or website are as expected. In software Help detect whether there are bugs during the development process.

2. What are the advantages of UI automation?

UI automated testing can simulate manual execution of tests and is the testing method closest to the actual user operation. This is the most attractive part of UI automated testing. Then UI automated testing also has the following advantages: Advantage 1 : Improve testing efficiency.

Compared with manual testing, UI automated testing can quickly and accurately execute a large number of test cases, improve testing efficiency, and reduce the workload of manual testing.

Advantage 2: Improve test coverage.

UI automated testing can cover various functions and pages of an application or website, ensuring that each function has been tested, improving test coverage and reducing the risk of missed tests.

Advantage 3: Improve test consistency.

UI automated testing can ensure consistent test execution on different platforms, browsers or devices, reduce subjective factors in manual testing, and improve test consistency and reliability.

Advantage 4: Improve software quality.

UI automated testing can help detect and fix errors and defects in applications or websites, improve software quality, and reduce problems after software is released.

But UI automation testing is like a "rose with thorns" in practice. Because it can simulate the user's real operation of the application or front-end website, it is the simulation test closest to the user's real behavior. However, due to some difficulties in practice, it is easy to invest a lot in UI automation without achieving good results.

现在我也找了很多测试的朋友,做了一个分享技术的交流群,共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源,没人解答问题,坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化,性能,安全,测试开发等等方面有一定建树的技术大牛
分享他们的经验,还会分享很多直播讲座和技术沙龙
可以免费学习!划重点!开源的!!!
qq群号:110685036

2. What difficulties will you encounter in UI automation practice?

Some people say that UI automation is useless. The main reason is that UI automation will encounter some difficulties in practical applications, resulting in poor results. UI automation testing currently faces the following challenges:

1. The input-output ratio of UI automated testing is low.

If you want to achieve good results, you must invest a lot of resources in script development in the early stage, but often the expected results are not achieved when used later, which can easily lead to interruption of investment?

2. Ensuring script maintenance is a big problem.

Frequent iterations of the project lead to rapid changes in the front-end pages, and the corresponding scripts have to be constantly modified. How to ensure the maintenance of the scripts is a big problem.

3. The stability of UI automated testing is also a challenge.

We often encounter various strange bugs when executing scripts. How to ensure the stability of scripts is a headache.

3. How to solve the above four problems in practice? 【Key points】

In the actual process, how to optimize the above four problems? Let's take the front-end web UI automation as the project and use the Python+Selenium framework as the background to see what should be done if the project wants to perform automated testing.

Optimization 1: How to ensure the input-output ratio?

Many people who engage in UI automated testing have not thought clearly about how to do it? Just get a framework, start it first, invest a lot of manpower and material resources, and then find a lot of problems halfway through, and it's over in the end. . . So before you start, you need to plan well and clarify your goals. If it is a newly started UI automated test, it is recommended to select the framework first, then select a business process as a case, and use the case as the goal to build the framework and develop the script. After completing the development, mainly invest in regression testing. Take a look. How is the actual implementation effect? ​​Then calculate the time and labor costs invested, and then proceed to the next step.

Optimization 2: How to ensure script maintenance?

The current project is iterated frequently, which is an unchangeable fact, so the script must be maintained and modified after it is written. Based on this fact, what we can optimize is to reduce the number of modifications. In UI automation, the most commonly used optimization method is to use PO mode for encapsulation.

So what is PO mode?

PO is the abbreviation of Page Object. Simply put, it encapsulates each page in the front-end project as a "class", the elements on the page are encapsulated as the "properties" of the instance, and the functional operations on the page are encapsulated as instances. Methods". After encapsulation in this way, no matter how the page changes in the future, we only need to modify it once, which can greatly improve the efficiency of maintenance.

PO pattern is one of the best design patterns for automated test project development practice

Optimization 3: How to ensure the stability of script execution?

You may encounter various problems when executing UI automation scripts, such as the browser startup time is too long, the page loading is too long, the picture is blocked, etc., you cannot predict it. Optimization methods, in addition to the various explicit or implicit waiting processes we commonly use, we can also encapsulate the original API. For example, take the Selenium framework commonly used in Web UI as an example. When we wait for a certain element to appear, in order to ensure success, we need to encapsulate the "waiting". In addition to displaying the wait, you can further optimize it and make a loop process, that is, wait 3 times. After each wait fails, you can refresh the wait. For example, encapsulate a "wait for element" method to appear and ensure that it can be clicked, as shown below:

def element_click_wait(self, located_type, located_key, assert_condition=None, message="执行点击超时",time_out=10, refresh=False):
        """
        【适用于页面跳转时等待元素出现,确保可以点击的场景】
        等待1个元素点击是否正常,并验证点击是否成功,每隔一段时间轮询点击1次,直到超时抛出异常为止
        @:param located_type 定位方式(8种:id name class tag link plink xpath css)
        @:param located_key 定位关键字
        @:param assert_condition 验证点击是否完成的断言条件语句【默认不验证点击是否成功】
        @:param message 点击失败提示信息
        @:param time_out 等待时长,默认为10秒
        @:param refresh 刷新标志,如果为True,则在等待超时后,刷新页面,重新再执行一轮等待执行(相当于刷新后重新执行一次)
        如果是False,则不执行刷新,直接超时报错
        """
        driver = self.driver
        is_type_true = 0  # 用户判断定位方式参数是否正确
        for i in range(int(time_out)*2):  # 循环次数为配置的2倍,以便处理刷新重试的情景
            try:
                time.sleep(1)
                if located_type == "id":
                    driver.find_element_by_id(located_key).click()
                elif located_type == "name":
                    driver.find_element_by_name(located_key).click()
                elif located_type == "class":
                    driver.find_element_by_class_name(located_key).click()
                elif located_type == "tag":
                    driver.find_element_by_tag_name(located_key).click()
                elif located_type == "link":
                    driver.find_element_by_link_text(located_key).click()
                elif located_type == "plink":
                    driver.find_element_by_partial_link_text(located_key).click()
                elif located_type == "xpath":
                    driver.find_element_by_xpath(located_key).click()
                elif located_type == "css":
                    driver.find_element_by_css_selector(located_key).click()
                else:
                    is_type_true = 1
            except:
                if i == (int(time_out)-1):  # 第1次循环到点判断
                    if refresh:  # 执行刷新后重新再执行1轮
                        refresh = False
                        self.element_refresh_wait()  # 刷新页面
                        continue
                    else:  # 不执行刷新重试
                        AutomationLog.LogMsg("点击失败,第1次等待超时啦!---【"+located_type+","+located_key+"】", 2)
                        raise ex.TimeoutException(message)
                elif i == (int(time_out)*2-1):  # 刷新后再执行1轮还是失败了
                    AutomationLog.LogMsg("点击失败,第2次等待也超时啦!---【" + located_type + "," + located_key + "】", 2)
                    raise ex.TimeoutException(message)
                elif assert_condition:  # 正常执行循环(验证点击是否成功,成功则结束循环,否则继续循环)
                    try:
                        WebDriverWait(driver, 1).until(assert_condition)
                        break
                    except:
                        continue
                else:  # 正常执行循环(不验证点击结果)
                    continue
            if is_type_true == 1:
                AutomationLog.LogMsg("定位方式写错啦,请检查located_type参数!---【" + located_type + "】", 2)
                raise ex.InvalidArgumentException("定位方式参数出错!")
            elif assert_condition:  # 正常执行循环(验证点击是否成功,成功则结束循环,否则继续循环)
                try:
                    WebDriverWait(driver, 1).until(assert_condition)
                    break
                except:
                    continue
            else:  # 正常执行循环(不验证点击结果)
                break

Of course, in addition to the above practical experience, you can also find development cooperation to encode the IDs of common UI elements to be tested. This can also greatly improve the efficiency of success and easily solve positioning problems.

4. Recommended UI automation learning materials

UI automation is divided into web automation and app automation. If you want to learn more about UI automation, it is recommended that you watch the following videos to learn the system!

Finally, I would like to thank everyone who 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.
 

Insert image description here

Guess you like

Origin blog.csdn.net/IT_LanTian/article/details/132839811