Cypress web自动化1-windows环境npm安装Cypress
前言
web技术已经进化了,web的测试技术最终还是跟上了脚步,新一代的web自动化技术出现了?
Cypress可以对在浏览器中运行的任何东西进行快速、简单和可靠的测试。
"The web has evolved.
Finally, testing has too.
Fast, easy and reliable testing for anything that runs in a browser."
官方地址https://www.cypress.io/,详细的文档介绍https://docs.cypress.io/guides/overview/why-cypress.html
windows环境安装
系统要求:
- macOS 10.9 and above (64-bit only)
- Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)
- Windows 7 and above
如果你使用 npm
安装 Cypress,必须要求 Node.js 8
或更高版本
安装node.js
官网下载地址:https://nodejs.org/en/download/
下载后一路傻瓜式安装,安装完成后,运行cmd,输入node –v查看版本号,然后输入npm -v
C:\Users\dell>node -v
v10.2.0
C:\Users\dell>npm -v
6.14.5
npm安装
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了 npm,所以之前 npm也 一并安装好了。可以通过输入 "npm -v"来测试是否成功安装.
npm -v
如果npm版本过低,也可以通过以下指令升级npm版本
npm install npm -g
npm直接下载会很慢,先修改下载源http://registry.npm.taobao.org
npm config set registry http://registry.npm.taobao.org
改完之后查看是否改成功
npm config get registry
安装 Cypress
自己本地电脑新建一个目录,cd 到目录,执行 npm 指令安装
cd /your/project/path
npm install cypress --save-dev
安装会有点慢,耐心等待!
D:\Cypress>npm install cypress --save-dev
> cypress@4.5.0 postinstall D:\Cypress\node_modules\cypress
> node index.js --exec install
Installing Cypress (version: 4.5.0)
√ Downloaded Cypress
√ Unzipped Cypress
√ Finished Installation C:\Users\dell\AppData\Local\Cypress\Cache\4.5.0
You can now open Cypress by running: node_modules\.bin\cypress open
https://on.cypress.io/installing-cypress
npm WARN saveError ENOENT: no such file or directory, open 'D:\Cypress\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\Cypress\package.json'
npm WARN Cypress No description
npm WARN Cypress No repository field.
npm WARN Cypress No README data
npm WARN Cypress No license field.
+ cypress@4.5.0
updated 1 package in 1142.836s
1 package is looking for funding
run `npm fund` for details
启动cypress
先cd到node_modules/.bin目录
cd node_modules/.bin
cypress open
D:\Cypress\node_modules\.bin>cypress open
It looks like this is your first time using Cypress: 4.5.0
√ Verified Cypress! C:\Users\dell\AppData\Local\Cypress\Cache\4.5.0\Cypress
Opening Cypress...
接下来桌面会出现启动界面
也可以通过 npx
来启动,这样就不用cd 到 node_modules.bin 目录了
npx cypress open
还可以通过 yarn
来启动
yarn run cypress open
添加 npm 脚本
在前面安装的时候,会看到缺少个文件 npm WARN saveError ENOENT: no such file or directory, open 'D:\Cypress\package.json'
接下来在根目录 D:\Cypress 下新建一个 package.json 文件
{
"scripts": {
"cypress:open": "cypress open"
}
}
现在,您可以从项目根目录调用命令,如下所示:
npm run cypress:open
D:\Cypress\node_modules\.bin>npm run cypress:open
> @ cypress:open D:\Cypress
> cypress open
接下来就可以看到正确的启动 cypress 界面了
这里面有一些js的案例脚本可以直接点下,就能看到运行效果了!
mac的安装教程,查看官方文档https://docs.cypress.io/guides/getting-started/installing-cypress.html#Switching-browsers
QQ交流群:939110556