首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

高效测试不用愁,丰富特性来加油 | 开源专题 No.73

cypress-io/cypresshttps://github.com/cypress-io/cypress Stars: 45.5k License: MIT picture Cypress.io...是一个快速、简单和可靠的浏览器测试工具,可以用于任何在浏览器运行的内容。...可以直接从命令行执行原子测试,无需安装 提供了丰富的文档作为 wiki 开源并由社区开发 可以通过提交问题报告错误和请求新功能 有贡献指南可供参考 getmoto/motohttps://github.com...该项目具有以下关键特点: 文档网站详细介绍如何设置、编写测试、进行同行评审等 公共部署可由任何支持 Internet 连接的浏览器运行测试 定期收集从一系列网络浏览器获取到结果的并存档 microsoft...测试场景可以涵盖多个选项卡、多个来源或者多用户,并针对不同用户创建不同环境进行运行。

7810
您找到你想要的搜索结果了吗?
是的
没有找到

Cypress.io:快速简单可靠的浏览器测试工具 | 开源日报 No.142

cypress-io/cypress[1] Stars: 45.5k License: MIT picture Cypress.io 是一个快速、简单和可靠的浏览器测试工具,可以用于任何在浏览器运行的内容...该项目具有以下特点和核心优势: 完全免费和开源 切换时没有明显延迟 通过简单地拖动鼠标指针不同计算机之间进行切换 无需安装软件 成本低廉且易获得组件(<15€) 可以使用 3D 打印的 snap-fit...该项目提供了三个主要功能模块以及外部服务设置指南。...通过三种不同的 pipeline 设计来构建 提供了最低硬件需求 可以 Beam 的无服务器 GPU 基础设施上进行部署 支持对 Alpaca 等外部服务进行设置 提供免费账户创建指南 Lissy93...为了帮助人们自己的家庭环境烘焙面包,该项目旨在提供一个框架,而不是具体食谱。它意图消除因每种面粉、酵母和家庭设备不同而导致的难以完全跟随食谱从而容易失败的问题。

23710

你不知道的Cypress系列(15) -- 支持跨域访问了!

转眼之间,你不知道的Cypress系列已经到第15篇了。Cypress中国群内、公众号iTesting里,我每天都能看到大量关于Cypress的使用讨论和私下问询。这让我感到无比荣幸。...比如,我的这条case实际上是通过google登录,那么我可以在这条case里直接访问登录的那个url,而不必访问cypress.io, 但是这个是很简单的情况,实际测试,很复杂,我们必须要拆分测试用例...好在Cypress团队也注意到了这个问题。在即将发布的9.6.0版本Cypress将支持跨域访问。...Cypress支持跨域 -- cy.origin() 在即将发布的9.6.0版本,我们可以通过cy.origin()命令来支持跨域访问。...要启用cy.origin(),我们需要在cypress.json配置如下: { "experimentalSessionAndOrigin": true} 此时,你就可以使用了,cy.origin(

2.3K52

如何对第一个Vue.js组件进行单元测试 (下)

我们可以通过设置和拆卸功能实现这一目标。这可以帮助我们在运行测试之前初始化,然后进行清理。        我们的例子,有一种方法可以每次测试之前创建我们的父级并在之后销毁它。        ...处理函数,我们绑定的每个属性,并在元素上设置一个基于名称和值的数据属性。        我们将一个对象传递给我们的指令,因此我们可以从data-test-开始生成数据属性。...当我们运行测试时,NODE_ENV被设置为'test'。因此,我们可以使用它来确定何时设置测试属性。        浏览器刷新您的应用并再次检查计数器:数据属性已消失。        ...因此,决定是否应该使用已有的选择器或设置v-test指令时,请问自己一个问题:我测试什么,并且使用此选择器对业务逻辑透视图有意义? 它与功能或端到端测试有何不同?        ...这也是您使用Selenium或Cypress.io等工具进行功能或端到端测试的方法。那有什么不同呢?        通过单元测试,我们正在测试单独的行为。通过功能或端到端测试,我们正在测试场景。

3.3K00

为什么需要前端自动化测试呢?

而接入前端自动化测试,可以帮助我们提前暴露bug并修复、降低bug产生的成本/提升测试的覆盖率,降低对其他功能原有逻辑的干扰。...具备大量的自动化测试平台 测试人员具备较强的编程能力 一些常见的测试工具 单元测试(Unit Test)有 Jest, Mocha UI测试Test Render, Enzyme, 端到端(E2E Test)Cypress.io...、Nightwatch.js、Puppeteer、TestCafe 说了这么多,其实应用的最广泛的,收益相对来讲最高的还是单元测试 所以后面我将具体给大家讲一下,如何将单元测试融入到我们的开发当中 如何编写单元测试...这种模式成为测试驱动开发(TDD) 很简单的道理,如果你写的代码逻辑有问题,那么按照错误逻辑写的单元测试,永远不可能验证出问题来。...$emit('click', evt) } } } //省略样式 总结 开发引入前端自动化测试,可以帮我们带来很多好处

1.3K30

Cypress web自动化20-跨域问题-a标签超链接

你可能会觉得这是 cypress 的缺陷,很多人会觉得之前用 selenium 都可以,然而,事实是,Cypress在你的应用程序暴露了一个安全漏洞,你希望它在Cypress失败。...如果你想让浏览器禁用web安装,需cypress.json中加个配置 {"chromeWebSecurity": false } 接着再运行之前的代码,就不会报错了 // # 上海-悠悠,QQ交流群...有些浏览器提供,一般chrome浏览器上是可以的,有些不提供。 如果你依赖于禁用web安全,你将无法不支持此功能的浏览器上运行测试。...设置chromeWebSecurity为false允许你做以下事情: 显示不安全的内容 导航到任何超域没有跨域错误 访问嵌入到应用程序的跨域iframe。.../cypress/issues/944可以更改这个限制。

3.1K20

Cypress系列(14)- 环境变量详解

Cypress 早就替我们想好了如何解决这问题,可以通过配置 来取代环境变量的方式 baseUrl 当你配置了 ,测试套件的 cy.visit() 、 cy.request() 都会自动以...baseUrl 的值作为前缀 baseUrl 并且,当你需要访问某些网址或者发起接口请求时,代码中就可以不用再指定请求的 或者 url 了 host 如何配置 baseUrl 细心的小伙伴已经知道,...文件设置 cypress.json 创建一个 文件 cypress.env.json 导出为 CYPRESS_* 传递为 --env (命令行运行添加) CLI 插件设置一个环境变量...测试运行时,可以使用 访问环境变量的值 Cypress.env() cypress.json 设置 cypress.json 的 env 键下设置的任何 key:value 都是环境变量 cypress.json...可以通过命令行将环境变量作为命令行参数传进来 它的优先级最高,会覆盖其他地方设置的重名环境变量 可以为 或 cypress run 添加 --env 参数 cypress open cmd 命令

1.6K20

Cypress系列(90)- Cypress.Cookies 命令详解以及如何跨测试用例共享 Cookies

如何操作 Cookie 的 参数讲解 enable true:启用,默认,启用后开发者工具(F12)的 Console 可以看到详细的 Cookie 操作日志 false:不启用,Console...通过每次测试之前清除 Cookie,可以确保始终从干净状态开始测试 从一个干净的状态开始,可以防止测试用例彼此耦合,也可以防止一项测试对应用程序的某些内容进行更改而影响下游的情况 实际场景 如果不保存...Cookie,则每次测试前都需要登录一次,这将大大浪费不必要的测试时间 Cypress 如何保存 Cookie 命令可以保存 Cookie,使它在多个测试用例间共享 Cypress.Cookies.preserveOnce...Cookie 成功多个测试用例之间共享 Cypress.Cookies.defaults(options) 作用 设置全局默认 Cookie 可以修改全局默认值并保留一组 Cookie,这些 Cookie...Cookie 也共享成功了 总结 这种方式感觉更适合在项目中使用 一般我们都会提前知道需要的 Cookie 是什么,此时就能提前 调用此命令去设置 Cookie 了 support/index.js

2.4K10

一天一夜,山月写完了这份高效组织 npm script 最佳实践

查看是否有 CI/CD,如果有跟着 CI/CD 部署的脚本跑命令 查看是否有 dockerfile,如果有跟着 dockerfile 跑命令 查看 npm scripts 是否有 dev/start,...(比如,一次我们的项目 npm run dev 时需要 webpack DllPlugin 构建后的东西) 别忘了设置环境变量或者配置文件 因此,设置一个少的 script,可以很好地避免后人踩坑,更重要的是..."build": "webpack", // 设置一个 dev 的钩子, npm run dev 前执行,此处有可能不是必须的 "predev": "npm run build",... CI 或前端托管平台 Vercel/Netlify ,对于部署前端项目,最重要的一步就是打包。...对于前端 e2e 测试而言,cypress 与 puppeteer 无疑是最流行的框架。 那如何对 Vue/React 组件进行更好地测试及文档呢?

2K20

Cypress(四)查询元素

1.相似: 如果使用Jquery,想通过类选择器查询元素,代码如下: $('.my-selector') Cypress里通过类查询同样的元素,代码如下: cy.get('.my-selector')...注:Cypress,当您想直接与DOM元素交互时,可以使用.then()将元素作为其第一个参数的回调函数进行调用。...如果您不想要重试功能,想要同步立马返回结果,你可以使用Cypress.$ 二.通过文字内容查询 除了通过jquery的选择器来查询元素,我们还可以方便的通过前端控件里的文件内容来查询,比如我们要查询下面的元素...三.查询元素设置超时时间 上面提到了,当缺少元素时,Cypress并不会立马返回失败而是继续重试,那么我们如何设置查找元素的超时时间呢?...代码如下: //设置超时时间为10s,这里的时间单位为毫秒 cy.get('.my-slow-selector', { timeout: 10000 }) 您还可以通过设置defaultCommandTimeout

1.8K20

Cypress系列(72)- 详解 Module API

如果想从头学起Cypress可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 前面介绍 Cypress 如何通过命令行运行...运行Cypress,这种方式可以更加灵活地定制测试行为 当想在运行后直接访问测试结果时,此功能很有用 如何有用 挑选测试用例运行 整合所有测试用例,提供一份完整HTML格式的测试报告 重新运行单个失败的...(results) }) .catch((err) => { // 抓取错误信息并打印 console.error(err) }) 运行命令 可以 cmd 窗口或 npm 脚本运行下列命令...8080', }, env: { login_url: '/login', products_url: '/products', } }) 运行命令 可以... 2_open.js 设置的 config 或 env 会当成 CLI 模式下设置的 参数列表 和 cypress open 命令行运行的参数一样 ? 待更新 完整的 module api 项目

54941

Cypress web自动化18-cypress.json文件配置baseUrl

cypress.json文件 如果我的web服务部署环境是 http://49.235.x.x:8080 于是项目的根目录找到cypress.json文件 { "baseUrl": "http://49.235...设置窗口大小 也可以设置浏览器的默认宽和高,如果设置果,浏览器默认的宽高是 660*1000 ?...可以 cypress.json 文件改变这个值 { "baseUrl": "http://49.235.x.x:8080", "viewportWidth": 1280, "viewportHeight...": 600 } 后面测试用例如果需要指定特定大小窗口,也可以用cy.viewport()命令去设置 参考前面这篇[https://www.cnblogs.com/yoyoketang/p/12878064...spec.js 后缀的文件了 跨域问题 解决chrome 下的跨域问题: cypress.json 添加: “chromeWebSecurity”: false 我添加了这个设置,但是还是无法一个用例里面访问两个不同域名网址

1.3K30

Vue 应用的代码覆盖率

本文中,我将展示如何测量应用的源代码以收集其代码覆盖率信息。其后我们将利用该代码覆盖率报告来引导端到端测试的编写。 应用 示例应用可在 ?...istanbul 设置放在一个单独的 .nycrc 文件(译注:?...@vue/cli-plugin-e2e-cypress 插入到 package.json 的 NPM script 命令 test:e2e 设置环境变量 NODE_ENV=test 。...可以看到,虽然我们已经测试了录入数字和除法等,但仍需编写一个测试以覆盖“清理当前数字”、“改变正负号”、“设置小数点”、“乘法”等功能。...提示: 如果想要在任何一次 Vue 捕获错误时都让 Cypress 测试失败,在你的应用代码做如下设置: // 从代码覆盖率中排除这些行 /* istanbul ignore next */ if (

2.9K10

Cypress系列(44)- 命令行运行 Cypress

Runner) 测试用例的运行过程,测试用例的每一条命令,每一个操作都将显式地显示测试运行器 最简单的命令 进入项目根目录下 yarn run cypress open ?...版本 cypress open --global --port cypress open --port 8080 --project 用来指定待运行的项目,如果你的项目包含多个子项目,可以用此参数来运行指定的子项目...--browser 只要系统上可以检测到,browser 参数可以设置为 chrome ,canary,chromium,electron,Cypress 会试图自动找到已经装好的浏览器 cypress...cypress.json 设置了环境变量 CYPRESS_RECORD_KEY,你可以忽略 --key 参数。...BUILD_NUMBER 通常这个标识符被设置为持续集成环境的环境变量 --group 一次运行,把符合条件的测试用例分组展示 cypress run --group admin-tests --

2.3K50

Cypress必须掌握的一些核心概念

Cypress如何查询元素的?...如果你对JQuery有一定的了解,使用jquery查询元素是一般使用如下类似的代码: > $(".element-selector") Cypress里则同样的这样查询元素,代码如下: >...Cypress与JQuery的不同 当JQuery无法从指定的选择器查找到DOM元素时,会发生什么?...对于Cypress而言,可能产生以下两种可能: 一直找,直到找到该DOM元素 超过默认或设置的超时时间了 对于下selenium webdriver,当未找到指定的元素时,会抛出各种异常提示等,需要我们手动写代码来处理这些异常...有点爱了~~,能让我少写好多好多的代码 在这方面Cypress封装的DOM查询机制,也许更适合web自动化测试,也更适合软件测试从业者,可以将精力聚焦提升自动化测试与业务测试协作上来。

97010

Cypress系列(10)- Cypress 编写和组织测试用例篇 之 动态跳过测试用例

如果想从头学起Cypress可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 上一节只讲了如何跳过执行 or 只执行某些测试用例集...or 测试用例 实际项目中,可能存在需要在运行动态地去决定某个测试是否需要执行 如何动跳过执行某些测试用例 测试代码 ?...运行以下命令 进入 Cypress 安装目录,cmd敲 yarn cypress:open --env flag=1 打开 Cypress Test Runner 之后运行上面的代码文件 测试结果 ?...知识点 我们可以通过指定环境变量来动态判断是否执行指定的测试用例 设置环境变量有很多种方法,这里用的是命令行方式,格式: ,若需要指定多个环境变量则需要逗号来隔开,而不是空格 --env key=val1...,key2=val2 ,当测试用例内调用该方法时,方法后面的代码都不会执行,方法前面若是调用 Cypress 的方法则也不会执行(如: cy.visit() 、 cy.log() ),只有非 Cypress

1.1K20

Cypress系列(66)- 测试运行最佳实践

如果想从头学起Cypress可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 动态生成测试用例 直接看这篇文章哦:https...www.cnblogs.com/poloyy/p/13039624.html 动态挑选待运行测试用例 什么是动态挑选待运行测试用例 指给测试用例添加一个或多个相应描述关键字,在运行时,指定相应的关键字,运行或排斥测试用例 如何动态挑选待运行测试用例...,cmd 执行: npm install --save-dev cypress-select-tests 设置插件 cypress/plugins/index.js 文件输入以下代码 const...--env grep = works # 仅运行文件名带有 foo 的文件 yarn cypress open --env fgrep = foo # 仅运行文件名带有 foo 的文件,且仅运行文件带有...--env grep ='功能A' #仅运行文件名不带有 foo 的文件 yarn cypress open --env fgrep = foo,invert = true #仅运行不带有 works

75040
领券