携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情
大家好， 我是阿萨。之前有一篇文章，介绍了UI自动化与API自动化已经开始互斥了吗？文中讲解了UI 自动化以及API 自动化的优缺点。前面1-2个月也学习了APIFox 合集， Postman 合集以及Wireshark 合集。API 自动化测试不用愁了。
可是有些同学还想学习UI 自动化。作为Web UI 自动化 Selenium 是必备技能，已经被玩烂了。随处可见。 这次我们学习一个高级的前端自动化框架。Cypress。
一, Cypress 能干什么？
学习任何一种工具，官网绝对是最佳学习途径。首先打开cypress 官网。www.cypress.io/
打开官网后，首先映入眼帘的就是下图：
Web已经进化了。
最终，测试也是如此。
快速，简单和可靠的测试，任何运行在浏览器中。
简单总结下：基于Javascript的快速，简单和可靠的测试，可以在浏览器中测试任何web内容。
二, 如何安装Cypress？
Cypress 共有三种安装方式：\
- npm 安装。
命令行输入如下命令:
cd /your/project/pathnpm install cypress --save-dev
- Yarn 安装.\
命令行输入如下命令：
cd /your/project/pathyarn add cypress --dev
- 直接下载安装包，安装。\
下载地址：docs.cypress.io/guides/gett…
浏览器输入上面地址后，直接就可以下载zip 包。\
Mac 电脑解压后直接就是Cypress.app。拖拽到Applications之后就完成安装。
三. 如何使用cypress 创建一个project？
-
打开Cypress.app.
-
点击 Add Projects.
-
选择E2E testing 开始配置。
-
点击 continue
-
-
选择浏览器
-
点开始按钮。
-
选择创建新的空白Spec
-
点击完成。
-
第一个脚本写好了，直接就开始在浏览器中运行了。
\
在Visual Studio Code 中打开刚才的文件夹。可以看到Cypress 自动为我们创建的文件。\
\
安装完成了。\
你学会了吗？如果觉得阿萨的内容对你有帮助，欢迎围观点赞。
\
