身为前端的你，到现在还不了解Cypress吗？
文章目录
- 身为前端的你，到现在还不了解Cypress吗？
- 什么是Cypress
- Cypress优点
- 安装Cypress
- 运行Cypress
- 简单写一个自己的测试
什么是Cypress
现在你写项目还在手动测试有没有bug，还在操作键盘和鼠标在客户端 点点点么？还在为界面上的某个功能测试而发愁？ Cypress E2E测试框架 （功能测试框架），E2E的意思就是我们不管你写的代码，我们只想知道我要的这个交互的效果对不对，这个功能能不能使用，不能使用就代表代码有bug，这就是所谓的(⊙﹏⊙) E2E测试。
Cypress是为现代网络打造的下一代前端测试工具。解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。
或许提到这个E2E测试框架有人会想到Selenium 但是这个框架从底层上都不同于Selenium，个人感觉Selenium这个代码看起来很不舒服，大量的异步任务，api比较复杂，还得花一些精力来记忆这个api。
- 可以看一下Selenium 代码风格，很多需要记忆的api。最下面有Cypress代码风格（一目了然）。
const {Builder, By, Key, until} = require('selenium-webdriver');
(async function example() {
let driver = await new Builder().forBrowser('firefox').build();
try {
// Navigate to Url
await driver.get('https://www.google.com');
// Enter text "cheese" and perform keyboard action "Enter"
await driver.findElement(By.name('q')).sendKeys('cheese', Key.ENTER);
let firstResult = await driver.wait(until.elementLocated(By.css('h3>div')), 10000);
console.log(await firstResult.getAttribute('textContent'));
}
finally{
driver.quit();
}
})();
当然在你真正使用了Cypress你会发现这个东西，真强大，而且无比好用！
Cypress优点
- 1.界面美观友好。
- 2.支持手机模拟。
- 3.测试的每一步都有对应的截图。
- 4.全程都会有录屏。
- 5.支持debug调试，随时暂停。
- 6.自动等待ui更新，减少异步代码。
安装Cypress
由于是外网，不翻墙的话下载的很慢，翻了墙下载的也不快，所以进行这一步其实也是无比的困难，我在网上也查询了很多下载的教程，发现比较复杂，不太好操作，然后最后发现我们万能的淘宝镜像有这个包，很是欣喜（博主最开始使用的yarn并没有设置淘宝镜像，下载速度。。–），
//npm 下载
npm init -y
//设置淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm i cypress -D
//使用 yarn下载
yarn init -y
yarn config set registry https://registry.npm.taobao.org
yarn add cypress --dev
Cypress淘宝镜像手动下载zip包
如果是用命令在项目中安装的话，可能也需要下载好几分钟请耐心等待。
如果手动下载的话，解压的过程会很漫长（博主电脑大概半个小时）
运行Cypress
下载好之后目录如下
在项目根目录下使用如下命令：
// npm高于v5.2自带npx
npx cypress open
// yarn
yarn run cypress open
然后目录中会多出这样一个文件夹，里面的integration文件夹是存放测试代码的。
接下来会自动打开下面这个（GUI工具）
点击单个之后会开始测试，进入测试界面如下
红色的 代码测试没有通过可能代码有bug，绿色的代表ok，鼠标放到上面会显示每一张的截图，便于观察。
当然我们也可以简化这个命令，只需要在package.json中的scripts中配置自己喜欢的操作就行了。如下：
再使用npm run cypress-open命令就行了。
简单写一个自己的测试
在我们的根目录下的cypress目录中的integration目录下创建一个我们自己的测试文件（先清空里面原有的文件）sample_spec.js即使里面不写任何内容，也可以直接运行，只是在GUI界面点击这个文件后，会有一些问题。
sample_spec.js测试模块
describe('使用百度搜索vue', () => {
it('搜索', () => {
cy.visit('https://baidu.com')
cy.get('input#kw').eq(0).type('vue')
cy.contains('百度一下').click()
cy.contains('vue').should('exist')
cy.contains('https://cn.vuejs.org/').should('exist')
})
})
这个简单测试的内容呢就是 使用百度搜索vue看看是否会存在vue，和vue官网的地址，运行结果如下
这样我们就完成了一个简单的测试小实例。
通过这个简单的入门之后我们就可以，安安静静的看官方文档了
听说cypress使用webstorm比vscode好用，不得不说webstorm中这个插件很强大（奈何博主没有装webstorm呀）
官方文档中文版
当然这个中文文档可能跟原版的有所差异，文档支持中英文切换哦。
