咱们单步调试如下图第 20 行代码，cy.visit 执行后，不会立刻去拜访 url 里指定的网站： 进入一个 generic 函数，这里发现 cy. 的函数，是运行时动静挂接上去的： 首先进行调用栈的保留工作？返回一个空的字符串： 创立一个 chain 实例： 单例模式吗？ 创立一个 chain 实例： 这里构造函数才正式调用： 这个 chainer.visit 是个什么函数？ 一个 enqueue 动作： enqueue 的实现就是：创立一个 Cypress action 实例： 无限状态自动机： 如何开启 Cypress 的调试模式？ 加一个 debug 操作： 断点停下来之后，进度条依然在走： 从 queue 里摘出一个 action，执行： 每个 command 增加到 queue 里之后，都有一个随同的 fn： 这个 useroptions 如何指定？ 打印出 command 名称，参数，还有以后的 subject： subject 就是全局 windows 对象： ...
npx 是 npm 自带的命令行工具： 在我的项目根目录下，应用命令行 npx cypress open 启动： 也能够利用 yarn 启动：yarn run cypress open 或者是间接执行 node_modules bin 文件夹下的二进制命令。 这样就能够胜利启动 Cypress Launchpad： package.json 增加如下的 script： "scripts": { "cypress:open": "cypress open" }而后能够用如下的命令启动： npm run cypress:open npm install 装置结束后，工程目录下有个 cypress\integration 文件夹，外面有很多 sample 文件。 每个 test 一开始都是一个 blank state，因而须要在 beforeEach 函数调用里进行初始化。 在这个 spec 执行的时候，cy 为什么就可用了？ 单步调试 todo.spec.js，在 webpack:// 文件夹下： 具体的实现地位？ 为什么会在这个 url 上面？https://example.cypress.io/__cypress/runner/cypress_runner.js https://example.cypress.io/todo ...
大多数测试工具（如 Selenium）通过在浏览器内部运行并通过网络执行近程命令来运行。Cypress 正好相同。 Cypress 在与 Web 应用程序雷同的运行循环(run loop)中执行。 Cypress 背地是一个 Node 服务器过程。 Cypress 和 Node 过程彼此一直通信、同步和执行工作。拜访这两个局部（也就是对应的前后台操作）使咱们可能实时响应 Web 应用程序的事件，同时在浏览器之外执行须要更高权限的工作。 Cypress 还通过间接在网络层运行，能够动静读取和更改网络流量。这使 Cypress 不仅能够批改进出浏览器的所有内容，还能够更改可能烦扰其主动操作浏览器能力的代码。 Cypress 最终管制了从上到下的整个自动化过程，这使其处于可能了解浏览器内外产生的所有的独特地位。 因为 Cypress 装置在测试开发人员的机器上，因而它还能够接入操作系统以执行自动化工作。这使得执行诸如截屏、录制视频、个别文件系统操作和网络操作等工作成为可能。 执行命令行 npx cypress open, 遇到谬误音讯： $ npx cypress openIt looks like this is your first time using Cypress: 10.4.0Cypress failed to start.This may be due to a missing library or dependency. https://on.cypress.io/require... refer to the error below for more details.[0815/165943.734:FATAL:v8_initializer.cc(525)] Error loading V8 startup snapshot filePlatform: win32-x64 (10.0.19044)Cypress Version: 10.4.0 ...
上面是我用 Cypress 开发的端到端测试。click 调用里的 force:true 参数是我起初加上去的。 如果不增加，会遇到谬误音讯： 在办法 $Cy.ensureAttached 外面跑进去的，这个办法位于 runner/cypress_runner.js 上面。 我想晓得这个 cypress_runner.js 的本地地位： 本地申请的 url：http://localhost:4200/__cypre... 远端端口：59701? 重定向到 __? 这个文件有20万行代码： 狐疑这个宏大的文件是 merge 起来的： 这里能看到所有的 ensure 查看： 断点触发时，从 callstack 是很难发现到底是哪一行 e2e spec 代码触发的这个 ensureAttached 查看： 然而能够通过输出参数里指定的 select，到 e2e 代码里搜寻： cx-hamburger-menu [aria-label=\"Menu\"]通过参数阐明，点击了 cx-hamburge 的 button 元素： 很容易就找到了： 具体逻辑就是，查看元素的 ownerDocument 属性： 这是 Web API 里 Node 元素的规范属性，见官网。 接口的只读 ownerDocument 属性: 返回节点的顶级文档对象。 应用例子： // Given a node "p", get the top-level HTML// child of the document objectconst d = p.ownerDocument;const html = d.documentElement;而后再判断这个 document 对象，是否有 activeWindow: ...
这个谬误音讯的剖析和解决方案，能够参考 Cypress 的官网文档。 这个谬误音讯提醒咱们，咱们编写的 Cypress 代码正在同一个“死去”的 DOM 元素交互。 显然，在实在的应用场景下，一个用户也无奈同这种类型的 UI 元素交互。 看个理论例子： <body> <div id="parent"> <button>delete</button> </div></body>这个 button 被点击之后，会将本人从 DOM 树中移除： $('button').click(function () { // when the <button> is clicked // we remove the button from the DOM $(this).remove()})下列这行测试代码会引起谬误： cy.get('button').click().parent()当 cypress 执行到下一个 parent 命令时，检测到施加该命令的 button 曾经从 DOM 树中移除了，因而会报错。 解决方案： cy.get('button').click()cy.get('#parent')解决此类问题的指导方针： Guard Cypress from running commands until a specific condition is met两种实现 guard 的形式： Writing an assertionWaiting on an XHR看另一个例子： 输出 clem，从后果列表里抉择 User clementine , 即所谓的 type head search 成果。 ...
鼠标 hover 下来，看到提示信息：This test both passed and failed when retried within a run 何谓 Flaky test？Cypress 官网有如下定义： 当一个测试能够在多次重试尝试中通过和失败而没有任何代码更改时，它被认为是不稳固的。例如，执行了一个测试并失败，而后再次执行该测试，代码没有任何更改，但这次它通过了。 当之前测试过的代码测试失败时，这是一个强烈的信号，表明代码呈现了新的谬误。 之前，测试通过，代码正确； 当初测试失败并且代码无奈失常工作。 一个好的测试套件的指标是使这个信号尽可能清晰和定向。 然而，flaky 测试则不同。 flaky 测试是应用雷同的代码显示通过和失败后果的测试。 鉴于此，测试失败可能意味着也可能不意味着存在新问题。 并尝试通过应用雷同版本的代码从新运行测试来重现失败，可能会也可能不会导致测试通过。 咱们开始认为这些测试不牢靠，最终它们失去了价值。 如果根本原因是生产代码中的不确定性，则疏忽测试意味着疏忽生产谬误。 一个统计数据供大家参考： Google 在其继续集成系统上运行了大概 420 万个测试。 其中，大概 63,000 个在一周内呈现了不稳固的运行。 尽管这占 Google 测试的不到 2%，但它依然对 Google 工程师造成很大的连累。以上数据来自这篇博客。 测试重试是使 Cypress Dashboard 可能检测不稳固测试的根本机制。 因而，须要启用测试重试能力利用 cypress 表板提供的任何不稳固的测试治理性能。 带有不稳固测试的测试运行将在仪表板“最新运行”页面中标有不稳固测试的数量。 Flaky 测试运行也能够通过此页面中的“Flaky”过滤器过滤进和过滤出。 如下图所示： https://github.com/SAP/sparta... 点 view details，再抉择某个具体的 cypress job 查看明细： 由测试重试触发的屡次测试运行尝试中的任何失败都将导致给定的测试用例被标记为不稳固。 第一次尝试失败，第二次尝试胜利： 对于 Spartacus 里 flaky test 的探讨。 ...
Cypress basics: Selecting elements Selecting a single element语法： cy.get('.selector')首先，让咱们看看 .selector 局部的内容。 Cypress 通过查问 DOM 来抉择元素。 如果您已经玩过 CSS 或应用过 jQuery，或者如果您相熟 JavaScript 中的 document.querySelector 命令，您可能曾经相熟此类选择器。 让咱们看看这是什么意思。 作为一个例子，咱们能够查看一个看起来像这样的页面： 页面代码如下： <h1>Shapes:</h1><div class="square"></div><div id="circle"></div><div shape="triangle"></div>咱们能够应用 h1 标签抉择一个元素。 如果咱们想抉择咱们的一个形态，咱们能够应用类、id 或属性来抉择单个元素。 cy .get('h1') // select by tag .get('.square') // select by class .get('#circle') // select by id .get('[shape="triangle"]'); // select by attribute要按类抉择元素，您须要应用 . 前缀并通过它抉择一个元素，你应该在 id 后面加上#。 您可能会在页面上找到的最常见属性是输出的占位符，甚至是测试 ID，其中您的选择器以方括号开始和完结。 如果抉择咱们抉择在咱们的页面上屡次找到的元素，例如咱们的 div 元素，Cypress 将抉择所有三个。 Select elements by filtering这是一个比拟有用的操作。 一旦你抉择了多个元素（例如通过 .get('li') 命令，它返回 7 个元素），你能够依据另一个选择器在这些元素中进行过滤。 上面的代码将只抉择红色、绿色和蓝色，因为这些是原色并且它们有一个类 .primary。 ...
Cypress 简介基于 JavaScript 的前端测试工具，能够对浏览器中运行的任何内容进行疾速、简略、牢靠的测试Cypress 是自集成的，提供了一套残缺的端到端测试，毋庸借助其余内部工具，装置后即可疾速地创立、编写、运行测试用例，且对每一步操作都反对回看不同于其余只能测试 UI 层的前端测试工具，Cypress 容许编写所有类型的测试，笼罩了测试金字塔模型的所有测试类型【界面测试，集成测试，单元测试】Cypress 底层协定不采纳 WebDriverCypress 原理Webdriver 运行的形式大多数测试工具（如：Selenium/webdriver）通过在内部浏览器运行并在网络上执行近程命令来运行因为 Webdriver 底层通信协议基于 JSON Wire Protocol，运行须要网络通信Cypress 运行的形式Cypress 和 Webdriver 形式齐全相同，它与应用程序在雷同的生命周期里执行 Cypress 运行测试的大抵流程运行测试后，Cypress 应用 webpack 将测试代码中的所有模块 bundle 到一个 js 文件中而后，运行浏览器，并且将测试代码注入到一个空白页中，而后它将在浏览器中运行测试代码【能够了解成：Cypress 将测试代码放到一个 iframe 中运行】 Cypress 运行测试的技术流程每次测试首次加载 Cypress 时，外部 Cypress Web 应用程序先把本人托管在本地的一个随机端口上【如：http://localhost:65874】在辨认出测试中收回的第一个 cy.visit() 命令后，Cypress 会更改本地 URL 以匹配你近程应用程序的 Origin【满足同源策略】，这使得你的测试代码和应用程序能够在同一个 Run Loop 中运行Cypress 运行更快的根本原因Cypress 测试代码和应用程序均运行在由 Cypress 全权管制的浏览器中且它们运行在同一个Domain 下的不同 iframe 中，所以 Cypress 的测试代码能够间接操作 DOM、Window Objects、Local Storages而毋庸通过网络拜访Cypress 稳定性、可靠性更高的起因Cypress 还能够在网络层进行即时读取和更改网络流量的操作Cypress 背地是 Node.js Process 管制的 Proxy 进行转发，这使得 Cypress 不仅能够批改进出浏览器的所有内容，还能够更改可能影响自动化操作的代码Cypress 绝对于其余测试工具来说，能从根本上管制整个自动化测试的流程Cypress 架构图 ...