关于 Cypress 的启动和 cy.visit 的调试

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

这是一个开发好的 web 应用：

cy 的方法都是 generic 注入进去的：

记住这个文件名：cypress_runner.js

运行队列：

队列是一个 object：

Promise 似乎不是原生的 Promise：

如何才能看到 cy.visit 访问网站的准确动作？

cy.visit 会立即返回，而不会同步的去访问网站：

it('let me debug like a fiend', () => {cy.visit('/my/page/path')cy.get('[data-testid="selector-in-question"]')debugger // Doesn't work
})

这里是 Cypress 统一处理 action 的地方：

action(eventName, ...args) {// normalizes all the various ways// other objects communicate intent// and 'action' to Cypressdebug(eventName);switch (eventName) {case 'recorder:frame':return this.emit('recorder:frame', args[0]);case 'cypress:stop':return this.emit('stop');

使用 onBeforeLoad 钩子，我们可以在 Web 应用的主页，加载之前，注入一些数据给它：

it('can modify window._bootstrappedData', function () {// in this solution we use cy.visit({onBeforeLoad: ...})// to modify the window._bootstrappedData global so that// it's passed into our App.start() methodconst data = {env: 'test',api: 'https://test-api.company.com',}cy.visit('/bootstrap.html', {onBeforeLoad: (win) => {win._bootstrappedData = data},})cy.get('pre').invoke('text').should('eq', JSON.stringify(data))})})

关于 Cypress 的启动和 cy.visit 的调试相关推荐

Cypress系列（43）- visit() 命令详解
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用访问远程 URL 语法格式 cy. ...
Cypress 本身启动过程的调试
这个文件:node_modules\cypress\bin\cypress 里面的内容: #!/usr/bin/env noderequire('../lib/cli').init() 很多 requ ...
android 启动 uboot 参数,Android210 uboot 调试
目录 1.编译配置 2.u-boot.lds连接配置文件 3.Stage1之start.S 4.Stage2之入口start_armboot 1.编译配置编译前先进行配置:make smdkv210 ...
自动化测试框架[Cypress Custom Commands]
Custom Commands是替代PageObject模式非常好的选择,使用Custom Commands可以创建自定义命令或替换现有命令,自定义命令默认存放在/cypress/support/co ...
e2e测试框架之Cypress
谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...
mochawesome如何合并测试报告_Vue项目采用Cypress做e2e自动化测试，手把手一撸到底...
一.Cypress 介绍 cypress是一款支持现代浏览器的端到端的自动化测试工具. 项目地址 :https://github.com/cypress-io/cypress 目前22.5k star ...
如何运行 SAP Spartacus cypress 端到端测试
首先在本地启动 Spartacus instance, 比如执行 b2c.bat: 进入文件夹:projects/storefrontapp-e2e yarn install: 然后 yarn cy: ...
Cypress自动化测试系列之三
本文技术难度★★★,如果前编内容顺利执行,请继续. 如果Selenium尚无法灵活运用的读者,本文可能难度较大. "理论联系实惠,密切联系领导,表扬和自我表扬"--我就是老司机,曾 ...
cypress 自动化测试
文章目录前言一.简介二.原理三.特性四.优势五.安装使用 1. npm install cypress --save-dev # 安装cypress 1.1 在项目根目录下增加配置文件cy ...

关于 Cypress 的启动和 cy.visit 的调试

关于 Cypress 的启动和 cy.visit 的调试相关推荐

最新文章

热门文章