- 综合排序
- 最热优先
- 最新优先
- 来自专栏愧怍的技术学习与分享
前端自动化测试
UI 测试 （UI Testing） 对于前端的测试，是脱离真实后端环境的，仅仅只是将前端放在真实环境中运行，而后端和数据都应该使用 Mock 的。 备注 其实还有个接口测试，不过这就不是前端要关心的内容了，所以就没列举在这上面。 自动化测试的误区 自动化测试和普通说的测试是有些不大一样的，有很多测试，其实都不能归类为前端自动化测试。 像这些 不稳定因素 在前端自动化测试中就会使用 mock 的方式，强制返回一定格式的数据给测试框架。到这里你可能会好奇，为什么要这么做？ 想想看，如果因为接口失效导致测试失败，是因为测试代码的问题吗？ 那跟测试代码有毛关系，明显是后端或者服务器的问题。我们要测试的是获取博客列表的函数，而不是在测试接口（接口自动化测试）。测试接口不应该是前端要做的事情。 编写这篇文章主要解惑我自己对往常对测试的看法，也借此机会养成 TDD 模式的开发的习惯。 参考文章 试试前端自动化测试！（基础篇） - 掘金 (juejin.cn)
93220编辑于 2022-12-27 - 来自专栏前后两端不设限
前端自动化测试
前言 本文主要是介绍基于React+Ant Design（以下用Antd表示Ant Design）的项目，在对于自己封装的，或者基于Antd封装的公共组件的自动化测试技术的选型和实践。 背景 当前前端项目越来越大，业务逻辑日益繁杂，协同开发的同事也越来越多，迭代频繁，许多页面有一些相似的功能，会复用一些组件，这些组件被剥离出来，一般放在component文件夹下，大家共同维护，这时会出现一些常见问题 技术选型 目前前端整体的测试框架较为常用的有： Jest Mocha Jest 源自Facebook，Jest 的一个理念是提供一套完整集成的 “零配置” 测试体验。 这里可以首先简单的看一下，Jest+Enzyme的基本语法： Jest的API更多着力于定义测试、断言、mock库 定义测试： describe: 定义一个测试套件（test suite） it: 定义一个测试 测试默认值，即检查输入框的值是否为默认值 测试清除按钮是否可用，通过模拟点击清除按钮，测试是否能按照预期清除输入框内填充的默认值 测试设置值，点击输入框，弹出选择框，选择值，检查输入框中的值是否为选择的值
2.6K20编辑于 2022-12-24 Playwright前端自动化测试
Playwright 是一个强大的前端自动化测试工具。 二、强大的自动化能力模拟用户交互：Playwright 可以模拟各种用户操作，如点击、输入、滚动、拖拽等。这使得测试可以更加真实地模拟用户行为，发现潜在的问题。 这使得开发者可以根据自己的项目需求和团队的技术栈选择合适的测试框架，并轻松地引入 Playwright 进行自动化测试。 使用 Playwright 进行前端自动化测试的步骤：快速安装一个 Playwrightpnpm dlx create-playwright文件目录e2e-auto ┣ node_modules ┣ 测试CI Demo代码地址自动化测试结果，还可以保存录屏回放。同时VSCode也有相应Playwright的插件Playwright Test for VSCode
95010编辑于 2024-10-03- 来自专栏三掌柜的技术空间
前端自动化测试入门
目录前言关于自动化测试框架选择基本原则编写测试用例实施自动化测试最后前言做大前端的小伙伴想必都知道，在当今快速发展的Web开发领域，随着各类型企业的降本增效的持续推进，对前端领域的要求就是快捷，如果想要前端高效 ，那么就需要借助自动化工具等协助，这就让前端自动化测试成为确保代码质量和提高开发效率的关键操作。 那么本文就来为大家分享前端自动化测试的整个流程和规范，帮助读者深入理解和掌握前端自动化测试的方法和技巧。关于自动化测试先来了解一下什么是自动化测试？ 再来了解一下什么是前端自动化测试，可能大部分前端开发者都听说过，但是使用它的人却不多。 框架选择关于前端自动化测试框架选择， 也就是说在进行前端自动化测试之前，我们需要选择一个适合的测试框架，由于篇幅原因这里只分享几个在日常前端开发中常用的几个框架，掌握这几个都其中一个到两个，就够用了，以下是一些常用的前端自动化测试框架
70912编辑于 2024-09-19 - 来自专栏javascript艺术
前端自动化测试框架cypress
前端自动化测试框架cypress 自动化测试 为了保障软件质量，并减少重复性的测试工作，自动化测试已经被广泛运用。 关于自动化测试，有一个测试金字塔模型，该模型把测试从下到上分为了单元测试、集成测试和UI自动化测试（E2E测试/UI界面测试）。 UI自动化测试（端到端测试） UI测试的主要目的是，从软件使用者的角度来检验软件的质量，而UI自动化测试则是以自动化的方式来代替人工执行测试。 Cypress简介 Cypress是为现代网络打造的，基于JavaScript的下一代前端测试工具。他可以对浏览器中运行的任何内容进行快速，简单和可靠的测试。 不同于其他只能测试UI层的前端测试工具，Cypress允许你编写所有类型的测试，覆盖了测试金字塔模型涉及的所有测试类型：端到端测试、集成测试、单元测试。
2.7K40编辑于 2022-01-11 - 来自专栏互联网杂技
前端自动化测试探索
由于前端偏向GUI软件的特殊性，尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不广泛，很多人依旧以手工测试为主。本文试图探讨前端自动化测试领域的工具和实践。 前端自动化测试可以在几个方向进行尝试： 界面回归测试 测试界面是否正常，这是前端测试最基础的环节 功能测试 测试功能操作是否正常，由于涉及交互，这部分测试比界面测试会更复杂 性能测试 页面性能越来越受到关注 多浏览器测试最出名的当属selenium , selenium可以自动化的获取多个浏览器下的截图，前端工程师来说还可以借助Node的webdriver 来轻松开发测试脚本。 当然如果你要自己实现一套类似ci的流程也不复杂，因为对于上面提到的自动化测试来说只需要一个队列系统处理批量提交的测试任务然后将运行结果反馈给用户即可。当然前端测试可能对于自定义的报表输出要求更高点。 实践经验 前端自动化测试可以说还是一个在不断探索的领域，实施过程中也难免遇到问题。有些需要注意的点可以作为经验参考。
1.8K100发布于 2018-04-03 - 来自专栏QQ音乐前端团队专栏
Puppeteer 初探之前端自动化测试
puppeteer功能 1.利用网页生成PDF、图片 2.爬取SPA应用，并生成预渲染内容（即“SSR” 服务端渲染） 3.可以从网站抓取内容 4.自动化表单提交、UI测试、键盘输入等 5.帮你创建一个最新的自动化测试环境 （chrome），可以直接在此运行测试用例 6.捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题 安装 puppeteer yarn add puppeteer # or "npm i puppeteer 体验第一个demo,数字专辑自动购买的UI自动化测试 这里测试的功能是自动拉登录购买一张数字专辑，并在购买成功后跳转到铭牌页，先看下整个流程吧。 } 接下来我们创建一个浏览器实例，并打开一个页面，细心的你一定发现在创建浏览器的时候我们传了headless参数，如果设为true的话就能可以在不打开外部浏览器的情况下完全利用v8引擎来进行页面的测试 trace.json 接下来我们打开Chrome的开发者工具，进入到Performance栏目下，把刚才的trace.json拖上去就能看到数据了 总结 通过上面两个例子，我们看到了puppeteer可以做UI自动化测试和页面性能检测
13.7K64发布于 2017-09-25 - 来自专栏IMWeb前端团队
前端自动化测试工具 overview
本文作者：IMWeb 邝伟科 原文出处：IMWeb社区 未经同意，禁止转载 总结最近了解的前端测试的相关内容，如有问题，欢迎指出。 前端测试化工具简单汇总和比较 Qunit jquery出的自动化测试库，没什么好说的，可以想象其跟jquery UI及jquery animation等库结局一样，逃脱不了各种被后来的库全方位的比较和“ 超越” Mocha && Jasmine Mocha 跟 Jasmine 是目前最火的两个单元测试框架，基本上目前前端单元测试就在这两个库之间选了，下面是这两个库的区别，大家可以根据自己的需求进行选择： Karma 是 Google Angular 团队开源的 JavaScript测试执行过程管理工具，其提供了强大的自动化测试功能，其主要提供能力如下： 提供真实环境，可以配置 各种chrome, firefox 等各种浏览器环境或者 Phantomjs等无头浏览器环境 可控制自动化测试流程，比如编辑器保存时自动全部全部测试用例 强大适配器，可以在karma上面配置jasmine，mocha等单元测试框架。
2K10发布于 2019-12-04 - 来自专栏IMWeb前端团队
前端自动化测试工具 overview
本文作者：IMWeb 邝伟科 原文出处：IMWeb社区 未经同意，禁止转载 总结最近了解的前端测试的相关内容，如有问题，欢迎指出。 前端测试化工具简单汇总和比较 Qunit jquery出的自动化测试库，没什么好说的，可以想象其跟jquery UI及jquery animation等库结局一样，逃脱不了各种被后来的库全方位的比较和“ 超越” Mocha && Jasmine Mocha 跟 Jasmine 是目前最火的两个单元测试框架，基本上目前前端单元测试就在这两个库之间选了，下面是这两个库的区别，大家可以根据自己的需求进行选择： Karma 是 Google Angular 团队开源的 JavaScript测试执行过程管理工具，其提供了强大的自动化测试功能，其主要提供能力如下： 提供真实环境，可以配置 各种chrome, firefox 等各种浏览器环境或者 Phantomjs等无头浏览器环境 可控制自动化测试流程，比如编辑器保存时自动全部全部测试用例 强大适配器，可以在karma上面配置jasmine，mocha等单元测试框架。
3.1K110发布于 2018-01-08 - 来自专栏全栈工程师修炼之路
Phantomjs网页前端自动化测试之利器
[TOC] 0x00 前言基础 描述:Phantomjs /ˈfæntəm/js是一个基于webkit的JavaScript API实现网页前端自动化测试。 PhantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。 src/phantomjs ln -sf /usr/local/src/phantomjs/bin/phantomjs /usr/local/bin/phantomjs phantomjs -v # 测试版本号
85531发布于 2020-10-26 - 来自专栏IMWeb前端团队
前端自动化测试解决方案探析
本文作者：IMWeb ouven 原文出处：IMWeb社区 未经同意，禁止转载 前端测试一直是前端项目开发过程中机器重要的一个环节，高效的测试方法可以减少我们进行代码自测的时间，提高我们的开发效率 ，如果你的代码涉及的测试用例较多，而且项目需要长期维护，这时就可以考虑使用一下自动化测试了。 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块，评估运行结果。预设条件应包括正常条件和异常条件，以达到自动运行测试过程、减少或避免人工干预测试的目的。 在前端自动化测试中，我们通常是通过不同的工具来解决不同场景下不同的问题的。 三、集成化测试解决方案 除了模块单元的测试驱动开发，在系统功能测试阶段，我们希望自动化完成业务功能正确性的检测，此时我们就要考虑集成测试方案了。目前前端集成化测试自动化工具也有比较多。
1.4K21发布于 2019-12-04 - 来自专栏全栈工程师修炼之路
Phantomjs网页前端自动化测试之利器
[TOC] 0x00 前言基础 描述:Phantomjs /ˈfæntəm/js是一个基于webkit的JavaScript API实现网页前端自动化测试。 PhantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。 usr/local/phantomjs ln -sf /usr/local/phantomjs/bin/phantomjs /usr/local/bin/phantomjs phantomjs -v # 测试版本号
76920编辑于 2022-09-29 - 来自专栏腾讯IMWeb前端团队
前端自动化测试解决方案探析
原文链接：http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html 前端测试一直是前端项目开发过程中机器重要的一个环节 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块，评估运行结果。预设条件应包括正常条件和异常条件，以达到自动运行测试过程、减少或避免人工干预测试的目的。 在前端自动化测试中，我们通常是通过不同的工具来解决不同场景下不同的问题的。 三、集成化测试解决方案 除了模块单元的测试驱动开发，在系统功能测试阶段，我们希望自动化完成业务功能正确性的检测，此时我们就要考虑集成测试方案了。目前前端集成化测试自动化工具也有比较多。 自动化测试不可避免地要求我们去编写测试用例，会花去一定的事件，我们在实际的项目开发过程中，决定要不要使用自动化的测试方案应该根据具体的场景来决定，如果业务规模并不复杂，而且系统功能流程清晰，则不建议使用测试用例
1.9K10编辑于 2022-06-29 - 来自专栏code秘密花园
前端自动化测试探索和实践
前言 ❝这篇文章是前端自动化测试系列的开始，自动化测试系列会从理论走向实践，真正带领大家学会使用前端自动化测试框架，并能在业务中落地。 看完整个系列，还不会使用自动化测试工具为生产提效，请来找我！ ❞ 众所周知的原因，前端作为一种特殊的 GUI 软件，做自动化测试困难重重。在快速迭代，UI 变动大的业务中，自动化测试想要落地更是男上加男 ?。 近期的学习过程中，翻阅了众多前端自动化测试相关的文章，「大多数都在讲如何使用自动化测试框架对前端代码进行测试，很少讲解为什么要引入自动化测试，引入自动化测试有哪些好处，哪些项目适合引入自动化测试」，但这些才是真正我们想要知道的 ❞ 「同理，在前端自动化测试方面，抛开项目类型、软件开发的人员配置和生命周期而谈论自动化测试的好处和必要性，也是耍流氓。」 相信看完本篇为文章，你一定对前端自动化测试有了一定的了解。 下一篇将会为大家带来自动化测试框架 Jest 与 React 的配合，让大家真正能够在 React 的项目中落地，为生产提效！
4.9K11发布于 2020-07-21 - 来自专栏IMWeb前端团队
前端自动化测试解决方案探析
前端测试一直是前端项目开发过程中机器重要的一个环节，高效的测试方法可以减少我们进行代码自测的时间，提高我们的开发效率，如果你的代码涉及的测试用例较多，而且项目需要长期维护，这时就可以考虑使用一下自动化测试了 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块，评估运行结果。预设条件应包括正常条件和异常条件，以达到自动运行测试过程、减少或避免人工干预测试的目的。 在前端自动化测试中，我们通常是通过不同的工具来解决不同场景下不同的问题的。 除了模块单元的测试驱动开发，在系统功能测试阶段，我们希望自动化完成业务功能正确性的检测，此时我们就要考虑集成测试方案了。目前前端集成化测试自动化工具也有比较多。 自动化测试不可避免地要求我们去编写测试用例，会花去一定的事件，我们在实际的项目开发过程中，决定要不要使用自动化的测试方案应该根据具体的场景来决定，如果业务规模并不复杂，而且系统功能流程清晰，则不建议使用测试用例
2.2K70发布于 2017-12-29 - 来自专栏前端Q
为什么需要前端自动化测试呢？
而接入前端自动化测试，可以帮助我们提前暴露bug并修复、降低bug产生的成本/提升测试的覆盖率，降低对其他功能原有逻辑的干扰。 接下来我们进入正题，向大家介绍前端自动化测试 前端自动化测试的种类 共四类： 单元测试 单元测试是最基础的自动化测试，用来检测项目当中的最小可测单元，例如工具函数、基础组件等 集成测试 在单元测试的基础上 自动化测试金字塔 介绍完自动化测试的种类，我们来简单比较一下这四种测试 有下之上，测试用例的数量逐步减少、粒度变粗、验证的功能变多变复杂。 满足自动化测试的条件 说了那么多，哪什么情况下，我们适合使用前端自动化测试呢？ $emit('click', evt) } } } </script> <style> //省略样式 </style> 总结 在开发中引入前端自动化测试，可以帮我们带来很多好处
1.6K30发布于 2021-11-26 - 来自专栏Young Dreamer
前端自动化测试漫长路之——Selenium初探
引言 最近想解决前端开发或测试中的两个问题：一是界面UI的布局适配，能否在测试的过程中，通过命令操作真机打开相应页面然后截屏，通过对图片识别分类，发现有问题的图片，然后及时修复；二是页面性能分析，很多时候页面只能在指定的 从上面的话我们可以知道3个点： 利用Selenium可以自动化操作浏览器，来实现web程序的自动化测试； Selenium是一个综合性的项目，提供了提供了不同语言版本的类库和工具，来支持浏览器的自动化； 一图胜千言，Selenium在自动化测试中扮演的角色如下图所示： ? Selenium如何用？ 从上面可以知道Selenium支持多种语言，如python、go、javascript等，对于前端而言，首选当然是javascript。 let driver = chrome.Driver.createSession(options, service); 小结 前端自动化测试的道路是漫长的，对selenium的挖掘才刚刚开始。
1.8K71发布于 2018-01-31 - 来自专栏禅林阆苑
前端自动化测试实践02—jest基本语法
前端自动化测试实践02—jest基本语法 TOC Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com 本节代码地址 https://github.com/csxiaoyaojianxian/JavaScriptStudy 下的自动化测试目录 1. matchers 匹配器 测试工具中最基本的就是断言匹配器，下面是 jest 中常用的匹配器。 ，跳过其他 case', () =>{ /* ... */ }) test('该 case 被跳过', () => { /* ... */ }) 5. snapshot 快照测试 快照测试适用于配置文件 DOM 测试 dom 测试一般用于测试 UI，例如需要测试下面 jquery 操作 dom 的代码 dom.js import { jsdom } from 'jsdom' import $ from
2.1K75发布于 2019-10-31 - 来自专栏一个会写诗的程序员的博客
前端自动化测试框架 Jest 极简教程
前端自动化测试框架 Jest 极简教程 Delightful JavaScript Testing. https://jestjs.io Jest是由Facebook发布的开源的、基于Jasmine 的JavaScript单元测试框架。 Jest 测试的生命周期 jest 测试提供了一些测试的生命周期 API，可以辅助我们在每个 case 的开始和结束做一些处理。 这样，在进行一些和数据相关的测试时，可以在测试前准备一些数据，在测试后，清理测试数据。 ，不同之处在于在每个测试开始前执行 afterEach(fn, timeout): 每个 test 执行完后执行 fn，timeout 含义同上 afterAll(fn, timeout): 当前文件中的所有测试执行完成后执行
2.1K20发布于 2019-02-22 - 来自专栏禅林阆苑
前端自动化测试实践01—持续集成之jest自动化测试环境搭建
[1-03.jpg] 1.2 持续集成 & 前端自动化测试 持续集成是互联网软件开发上线流程中的核心一环，在1.1节介绍中也不难看出，自动化测试是持续集成得以实现的核心步骤，缺乏了自动化测试，持续集成自然无从谈起 在日常的开发中，前端错综复杂的变化引发的bug往往令开发者头疼，或多或少经历过 修完东墙西墙倒 的经历，此时前端自动化测试就显得非常重要。 前端的自动化测试无非也是编写测试用例，在持续集成时执行跑通全部测试用例。 如果是一个短平快的小项目，引入前端自动化测试，编写测试用例，无疑只会增加开发成本，然而当项目扩大、迭代频繁、逻辑复杂、需求反复变更的情况下，回归测试的成本是巨额的，自动化测试的优势就能体现出来。 自动化测试的收益 = 迭代次数 * 全手动执行成本 - 首次自动化成本 - 维护次数 * 维护成本 尽早引入前端自动化测试不仅能够减少项目 bug 出现概率(尤其是回归测试中的 bug)，还能更好地进行代码组织
2.8K54发布于 2019-10-31
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号