首页 > 系统相关> 文章详细

Cypress web自动化1-windows环境npm安装Cypress

2021-06-03 15:53:29 阅读：194 来源： 互联网

标签：npm web node 安装 Cypress open 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

标签：npm,web,node,安装,Cypress,open,cypress
来源： https://blog.51cto.com/u_15249893/2852017

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Cypress web自动化1-windows环境npm安装Cypress