- 综合排序
- 最热优先
- 最新优先
- 来自专栏前后两端不设限
前端自动化测试
前言 本文主要是介绍基于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 - 来自专栏愧怍的技术学习与分享
前端自动化测试
备注 其实还有个接口测试，不过这就不是前端要关心的内容了，所以就没列举在这上面。 自动化测试的误区 自动化测试和普通说的测试是有些不大一样的，有很多测试，其实都不能归类为前端自动化测试。 那跟测试代码有毛关系，明显是后端或者服务器的问题。我们要测试的是获取博客列表的函数，而不是在测试接口（接口自动化测试）。测试接口不应该是前端要做的事情。 看到很多文章都是在演示测试 1+1 =2，介绍测试框架，很少从实际项目中出发进行测试。不过原因无非就是实际项目写的少，就别说测试代码了。 关于 UI 测试和 e2e 测试，我非常推荐看看 cypress 的Todo 示例，测试的特别清楚，这里放张官方测试结果供参考。 编写这篇文章主要解惑我自己对往常对测试的看法，也借此机会养成 TDD 模式的开发的习惯。 参考文章 试试前端自动化测试！（基础篇） - 掘金 (juejin.cn)
94820编辑于 2022-12-27 Playwright前端自动化测试
Playwright 是一个强大的前端自动化测试工具。 二、强大的自动化能力模拟用户交互：Playwright 可以模拟各种用户操作，如点击、输入、滚动、拖拽等。这使得测试可以更加真实地模拟用户行为，发现潜在的问题。 这使得开发者可以根据自己的项目需求和团队的技术栈选择合适的测试框架，并轻松地引入 Playwright 进行自动化测试。 使用 Playwright 进行前端自动化测试的步骤：快速安装一个 Playwrightpnpm dlx create-playwright文件目录e2e-auto ┣ node_modules ┣ 测试CI Demo代码地址自动化测试结果，还可以保存录屏回放。同时VSCode也有相应Playwright的插件Playwright Test for VSCode
1K10编辑于 2024-10-03- 来自专栏三掌柜的技术空间
前端自动化测试入门
目录前言关于自动化测试框架选择基本原则编写测试用例实施自动化测试最后前言做大前端的小伙伴想必都知道，在当今快速发展的Web开发领域，随着各类型企业的降本增效的持续推进，对前端领域的要求就是快捷，如果想要前端高效 那么本文就来为大家分享前端自动化测试的整个流程和规范，帮助读者深入理解和掌握前端自动化测试的方法和技巧。关于自动化测试先来了解一下什么是自动化测试？ 框架选择关于前端自动化测试框架选择， 也就是说在进行前端自动化测试之前，我们需要选择一个适合的测试框架，由于篇幅原因这里只分享几个在日常前端开发中常用的几个框架，掌握这几个都其中一个到两个，就够用了，以下是一些常用的前端自动化测试框架 1、环境搭建根据实际情况，选择合适的测试工具，并根据官方文档搭建测试环境，这里使用 npm 安装 Jest，具体命令行如下所示：npm install --save-dev jest2、编写测试用例还有就是编写测试用例是自动化测试的核心 /sum');test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3);});3、运行测试接着就是使用测试工具提供的命令行工具运行测试
72712编辑于 2024-09-19 - 来自专栏互联网杂技
前端自动化测试探索
由于前端偏向GUI软件的特殊性，尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不广泛，很多人依旧以手工测试为主。本文试图探讨前端自动化测试领域的工具和实践。 前端自动化测试可以在几个方向进行尝试： 界面回归测试 测试界面是否正常，这是前端测试最基础的环节 功能测试 测试功能操作是否正常，由于涉及交互，这部分测试比界面测试会更复杂 性能测试 页面性能越来越受到关注 多浏览器测试最出名的当属selenium , selenium可以自动化的获取多个浏览器下的截图，前端工程师来说还可以借助Node的webdriver 来轻松开发测试脚本。 当然如果你要自己实现一套类似ci的流程也不复杂，因为对于上面提到的自动化测试来说只需要一个队列系统处理批量提交的测试任务然后将运行结果反馈给用户即可。当然前端测试可能对于自定义的报表输出要求更高点。 实践经验 前端自动化测试可以说还是一个在不断探索的领域，实施过程中也难免遇到问题。有些需要注意的点可以作为经验参考。
1.8K100发布于 2018-04-03 - 来自专栏禅林阆苑
前端自动化测试实践05—cypress-e2e入门
前端自动化测试实践05—cypress-e2e入门 TOC Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com 本节代码地址 https://github.com/csxiaoyaojianxian/JavaScriptStudy 下的自动化测试目录 是为现代网络打造的下一代前端测试工具，安装更简单，可以测试任何在浏览器中运行的内容，测试执行效率更高，此处选用 Cypress 作为端到端测试工具。 向快速，一致和可靠的无侵入测试看齐。 屏幕截图和视频： 可以查看测试失败时候系统自动截取的图片，或者整个测试的录制视频。 2. :e2e"，直接执行即可启动测试，在这之前需要先启动项目和mock服务。
5K97发布于 2019-11-04 - 来自专栏javascript艺术
前端自动化测试框架cypress
前端自动化测试框架cypress 自动化测试 为了保障软件质量，并减少重复性的测试工作，自动化测试已经被广泛运用。 关于自动化测试，有一个测试金字塔模型，该模型把测试从下到上分为了单元测试、集成测试和UI自动化测试（E2E测试/UI界面测试）。 UI自动化测试（端到端测试） UI测试的主要目的是，从软件使用者的角度来检验软件的质量，而UI自动化测试则是以自动化的方式来代替人工执行测试。 Cypress简介 Cypress是为现代网络打造的，基于JavaScript的下一代前端测试工具。他可以对浏览器中运行的任何内容进行快速，简单和可靠的测试。 不同于其他只能测试UI层的前端测试工具，Cypress允许你编写所有类型的测试，覆盖了测试金字塔模型涉及的所有测试类型：端到端测试、集成测试、单元测试。
2.7K40编辑于 2022-01-11 - 来自专栏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 - 来自专栏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 - 来自专栏QQ音乐前端团队专栏
Puppeteer 初探之前端自动化测试
puppeteer功能 1.利用网页生成PDF、图片 2.爬取SPA应用，并生成预渲染内容（即“SSR” 服务端渲染） 3.可以从网站抓取内容 4.自动化表单提交、UI测试、键盘输入等 5.帮你创建一个最新的自动化测试环境 （chrome），可以直接在此运行测试用例 6.捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题 安装 puppeteer yarn add puppeteer # or "npm i puppeteer 体验第一个demo,数字专辑自动购买的UI自动化测试 这里测试的功能是自动拉登录购买一张数字专辑，并在购买成功后跳转到铭牌页，先看下整个流程吧。 console.log("点击立即购买按钮"); await page.tap('.js_sale_buyalbum'); await page.screenshot({ path: '2.png trace.json 接下来我们打开Chrome的开发者工具，进入到Performance栏目下，把刚才的trace.json拖上去就能看到数据了 总结 通过上面两个例子，我们看到了puppeteer可以做UI自动化测试和页面性能检测
13.7K64发布于 2017-09-25 - 来自专栏测试游记
Java自动化测试(web自动化测试框架2 29)
close(driver); } } 强制类型转换driver TakesScreenshot screenshot = (TakesScreenshot) driver; 在执行测试的时候 class-name="com.zhongxin.listeners.ScreenShotListener"></listener> </listeners> <test name="登录<em>测试</em> maxRetryCount) { retryCount++; return true; } return false; } } 在<em>测试</em>代码头部增加
87210发布于 2020-09-23 接口自动化测试(2)—unittest测试框架
接口自动化测试（2）— 使用 unittest 测试框架进行接口自动化测试在接口自动化测试中，unittest 是 Python 自带的单元测试框架，它也非常适合用于编写和执行接口测试。 通过集成 unittest 与 HTTP 请求库（如 requests），我们可以轻松实现对 RESTful API 或其他接口的自动化测试。 下面将结合实际案例，介绍如何使用 unittest 来进行接口自动化测试。1. 基本概念接口自动化测试的目标是验证接口的正确性、可靠性和稳定性。 2. 安装依赖在进行接口自动化测试时，首先需要安装 requests 库，它是一个流行的 HTTP 请求库，用于与接口进行交互。 通过装饰器跳过某些测试。使用测试套件批量执行多个测试用例。通过合理组织测试代码，接口自动化测试可以帮助我们高效地验证接口的正确性，提升开发效率并减少回归错误。
39310编辑于 2025-07-30- 来自专栏全栈工程师修炼之路
Phantomjs网页前端自动化测试之利器
[TOC] 0x00 前言基础 描述:Phantomjs /ˈfæntəm/js是一个基于webkit的JavaScript API实现网页前端自动化测试。 PhantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。 yum install bzip2 # 安装bzip2 tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2 mv phantomjs-2.1.1-linux-x86 src/phantomjs ln -sf /usr/local/src/phantomjs/bin/phantomjs /usr/local/bin/phantomjs phantomjs -v # 测试版本号 {object} //完整截图几种方式 //方式1:设置viewPortSize page.viewportSize = {width: 4800,height: 8000}; //方式2:通过
86231发布于 2020-10-26 - 来自专栏全栈工程师修炼之路
Phantomjs网页前端自动化测试之利器
[TOC] 0x00 前言基础 描述:Phantomjs /ˈfæntəm/js是一个基于webkit的JavaScript API实现网页前端自动化测试。 PhantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。 jq 命令执行如下: wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 yum install bzip2 # 安装bzip2 tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2 mv phantomjs-2.1.1-linux-x86 usr/local/phantomjs ln -sf /usr/local/phantomjs/bin/phantomjs /usr/local/bin/phantomjs phantomjs -v # 测试版本号
77520编辑于 2022-09-29 - 来自专栏IMWeb前端团队
前端自动化测试解决方案探析
本文作者：IMWeb ouven 原文出处：IMWeb社区 未经同意，禁止转载 前端测试一直是前端项目开发过程中机器重要的一个环节，高效的测试方法可以减少我们进行代码自测的时间，提高我们的开发效率 ，如果你的代码涉及的测试用例较多，而且项目需要长期维护，这时就可以考虑使用一下自动化测试了。 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块，评估运行结果。预设条件应包括正常条件和异常条件，以达到自动运行测试过程、减少或避免人工干预测试的目的。 在前端自动化测试中，我们通常是通过不同的工具来解决不同场景下不同的问题的。 三、集成化测试解决方案 除了模块单元的测试驱动开发，在系统功能测试阶段，我们希望自动化完成业务功能正确性的检测，此时我们就要考虑集成测试方案了。目前前端集成化测试自动化工具也有比较多。
1.4K21发布于 2019-12-04 - 来自专栏IMWeb前端团队
前端自动化测试解决方案探析
前端测试一直是前端项目开发过程中机器重要的一个环节，高效的测试方法可以减少我们进行代码自测的时间，提高我们的开发效率，如果你的代码涉及的测试用例较多，而且项目需要长期维护，这时就可以考虑使用一下自动化测试了 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块，评估运行结果。预设条件应包括正常条件和异常条件，以达到自动运行测试过程、减少或避免人工干预测试的目的。 在前端自动化测试中，我们通常是通过不同的工具来解决不同场景下不同的问题的。 除了模块单元的测试驱动开发，在系统功能测试阶段，我们希望自动化完成业务功能正确性的检测，此时我们就要考虑集成测试方案了。目前前端集成化测试自动化工具也有比较多。 自动化测试不可避免地要求我们去编写测试用例，会花去一定的事件，我们在实际的项目开发过程中，决定要不要使用自动化的测试方案应该根据具体的场景来决定，如果业务规模并不复杂，而且系统功能流程清晰，则不建议使用测试用例
2.2K70发布于 2017-12-29 - 来自专栏code秘密花园
前端自动化测试探索和实践
前言 ❝这篇文章是前端自动化测试系列的开始，自动化测试系列会从理论走向实践，真正带领大家学会使用前端自动化测试框架，并能在业务中落地。 看完整个系列，还不会使用自动化测试工具为生产提效，请来找我！ 近期的学习过程中，翻阅了众多前端自动化测试相关的文章，「大多数都在讲如何使用自动化测试框架对前端代码进行测试，很少讲解为什么要引入自动化测试，引入自动化测试有哪些好处，哪些项目适合引入自动化测试」，但这些才是真正我们想要知道的 事实上，UI 测试（UI Test）和端到端测试（E2E Test）是稍有区别的： ❝UI 测试（UI Test）只是对于前端的测试，是脱离真实后端环境的，仅仅只是将前端放在真实环境中运行，而后端和数据都应该使用 端到端测试（E2E Test）则是将整个应用放到真实的环境中运行，包括数据在内也是需要使用真实的。 ❞ 就前端而言，UI 测试（UI Test）更贴近于我们的开发流程。 Reference [1] Lin Jiyu：前端自动化测试: https://jecyu.github.io/Fe-Auto-Testing/ [2] Stefano Magni：component
4.9K11发布于 2020-07-21 - 来自专栏前端Q
为什么需要前端自动化测试呢？
而接入前端自动化测试，可以帮助我们提前暴露bug并修复、降低bug产生的成本/提升测试的覆盖率，降低对其他功能原有逻辑的干扰。 接下来我们进入正题，向大家介绍前端自动化测试 前端自动化测试的种类 共四类： 单元测试 单元测试是最基础的自动化测试，用来检测项目当中的最小可测单元，例如工具函数、基础组件等 集成测试 在单元测试的基础上 满足自动化测试的条件 说了那么多，哪什么情况下，我们适合使用前端自动化测试呢？ , Enzyme, 端到端（E2E Test）Cypress.io、Nightwatch.js、Puppeteer、TestCafe 说了这么多，其实应用的最广泛的，收益相对来讲最高的还是单元测试 所以后面我将具体给大家讲一下 $emit('click', evt) } } } </script> <style> //省略样式 </style> 总结 在开发中引入前端自动化测试，可以帮我们带来很多好处
1.6K30发布于 2021-11-26 - 来自专栏腾讯IMWeb前端团队
前端自动化测试解决方案探析
原文链接：http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html 前端测试一直是前端项目开发过程中机器重要的一个环节 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块，评估运行结果。预设条件应包括正常条件和异常条件，以达到自动运行测试过程、减少或避免人工干预测试的目的。 在前端自动化测试中，我们通常是通过不同的工具来解决不同场景下不同的问题的。 三、集成化测试解决方案 除了模块单元的测试驱动开发，在系统功能测试阶段，我们希望自动化完成业务功能正确性的检测，此时我们就要考虑集成测试方案了。目前前端集成化测试自动化工具也有比较多。 自动化测试不可避免地要求我们去编写测试用例，会花去一定的事件，我们在实际的项目开发过程中，决定要不要使用自动化的测试方案应该根据具体的场景来决定，如果业务规模并不复杂，而且系统功能流程清晰，则不建议使用测试用例
1.9K10编辑于 2022-06-29 - 来自专栏啄木鸟软件测试
摆脱前端测试恶梦：摇摆不定的测试（2）
来源：https://juejin.cn 作者：前端小工 对抗软弱性的方法 我们已经确定了导致松散性的三个原因。我们可以在此基础上建立我们的反击策略! test: script: rspec retry: max: 2 when: runner_system_failure 在这个例子中，我们要配置的是 { "retries": { // Configure retry attempts for 'cypress run` "runMode": 2, // Configure retry attempts for 'cypress open` "openMode": 2, } } 你可以在Cypress的配置文件中激活测试重试 为了获得帮助，看看你的测试框架是否能够获得更多关于你的构建的信息。当涉及到前端测试时，你通常可以在你的测试中利用一个console.log 。
1.6K20发布于 2021-07-22
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号