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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM