如何实现前端项目的自动化测试？一文4个步骤带你成功实现！_前端 实现自动化测试

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

UI自动化测试可以帮助检测和修复应用程序或网站中的错误和缺陷，提高软件质量，减少软件发布后的问题。

但UI自动化测试在实战中却像是“带刺的玫瑰”。因为它能模拟用户真实的操作应用程序或前端网站，是最贴近用户真实行为的模拟测试，但是因为实践中的一些难题，导致UI自动化容易投入很大，却没有取的很好的效果。

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

二、UI自动化实践中会遇到什么难题？

有些人说UI自动化没有啥用，主要是UI自动化在实际应用中会遇到一些难题，导致没有取的很好的效果，UI自动化测试目前主要面临下列这些挑战：

1.UI自动化测试的投入产出比低。

想要取得好的效果，必须前期投入较大在资源进行脚本开发，但是往往后期使用时没有取的预想的效果，容易导致投入中断？

2.保障脚本的维护是个大问题。

项目频繁的迭代，导致前端页面变化很快，对应的脚本得不断的修改，如何保障脚本的维护是个大问题。

3.UI自动化测试的稳定性也是个挑战。

脚本执行时经常遇到各种奇奇怪怪的Bug，如何保障脚本的稳定性是个头疼的问题。

三、实践中如何解决以上4个难题？【重点】

实际过程中，以上4个难题该如何进行优化呢？咱们以前端的web UI自动化为项目，以Python+Selenium框架为背景，来看下项目若要执行自动化测试，应该怎么搞。

优化1：如何保障投入产出比？

很多人搞UI自动化测试没有想清楚到底要怎么搞？上来就拿个框架，先搞起来再说，投入了很多人力物力，然后搞到一半时却发现很多问题，最后就完犊子了。。。所以开始前，需要做好规划，要明确目标。如果是新起动的UI自动化测试，建议可以先选好框架，然后选择一个业务流程作为案例，以该案例为目标去执行框架的搭建和脚本的开发，完成开发后主要投入回归测试当中，看看实际执行的效果如何，然后统计投入的时间和人力成本，然后再进行下一步的推进。

优化2：如何保障脚本的维护？

当前项目都是频繁迭代的，这是不可改变的事实，所以脚本写完后一定需要维护修改。基于这个事实，我们能优化的就是减少修改的次数，在UI自动化中，最常用的优化方法就是使用PO模式进行封装。

那什么是PO模式呢？

PO，是Page Object的缩写，简单来说，就是将前端项目中的每个页面封装为一个“类”，页面上的元素都封装为实例的“属性”，页面上的功能操作都封装为实例的“方法”。这样封装后，无论将来页面怎么变化，我们只需要修改一次即可，可以大大的提升维护的效率。

PO模式是自动化测试项目开发实践的最佳设计模式之一

优化3：如何保障脚本执行的稳定性？

UI自动化脚本执行时可能会遇到各种问题，比如浏览器启动时间过长，比如页面加载过长，比如图片被挡住等等，你无法预知。优化方法，除了我们常用的各种显式或隐式等待处理外，我们还可以对原始的api进行封装。比如以Web UI常用的Selenium框架为例，当我们等待某个元素出现时，为了保障成功性，需要对“等待”做一个封装。除了显示等待外，还可以进一步优化，做个循环处理，就是等待3次，每次等待失败后可以重新刷新等待。比如封装一个“等待元素”出现，确保可以点击的方法，如下所示：

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)


![img](https://img-blog.csdnimg.cn/img_convert/21717c54806aaa1dc8b9e90bfc9f5c16.png)
![img](https://img-blog.csdnimg.cn/img_convert/5ea490855af38138c19fcba8621810bb.png)
![img](https://img-blog.csdnimg.cn/img_convert/dd65ea5c5caa989edef4aaa193761f77.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**