node.js

安裝使用Cypress總是會(huì)看見node.js，那就先看看node.js是什么。JavaScript以前運(yùn)行需要在瀏覽器中（瀏覽器內(nèi)置解釋器），通過node.js框架內(nèi)置v8引擎（也就是可以執(zhí)行js腳本所需的工具），這樣不在瀏覽器也可以直接運(yùn)行js代碼。

直接訪問node.js官網(wǎng) 下載對(duì)應(yīng)版本即可。下載安裝好之后，windows可以打開cmd，執(zhí)行node -version確認(rèn)是否安裝好。

npm 是node.js的包管理工具。

Cypress安裝及簡(jiǎn)單使用

Cypress官網(wǎng)有文檔介紹如何下載安裝。簡(jiǎn)單介紹下實(shí)踐過的安裝方式。

方式一：npm install（前提是安裝node.js）

1、新建文件夾，cmd切換到對(duì)應(yīng)的目錄，執(zhí)行npm init -y

2、切換到對(duì)應(yīng)的目錄，cmd執(zhí)行npm install cypress --save-dev

3、安裝完成后，npx cypress open 打開cypress執(zhí)行測(cè)試

方式二：安裝包

1、官網(wǎng)下載安裝包，解壓后可以雙擊打開

2、Cypress中創(chuàng)建project即可

打開項(xiàng)目執(zhí)行默認(rèn)的.cy.js文件可以看到效果

E2E Testing or Component Testing

E2E Testing

1.選擇E2E Testing， 第一次打開時(shí)，Cypress會(huì)引導(dǎo)你創(chuàng)建一些文件。
2.你點(diǎn)擊過Continue后，Cypress會(huì)讓你選擇執(zhí)行的瀏覽器（只能是Cypress支持的瀏覽器）。選擇Chrome，然后點(diǎn)擊那個(gè)“Start E2E Testing in Chrome”

3.因?yàn)槲覀兪裁礈y(cè)試用例都沒建呢，所以我們選擇上圖的第一個(gè)“Scaffold example specs”，這個(gè)就是給你的一些現(xiàn)成的測(cè)試腳手架，讓你快速了解下通過Cypress創(chuàng)建出來的測(cè)試用例是什么樣子的。不得不說，前端開發(fā)就是比后端開發(fā)講究。
繼續(xù)點(diǎn)擊“Okey”， 可以看到很多測(cè)試用例就生成好了。以后你寫的新的測(cè)試用例，也會(huì)一并顯示在這里。

這個(gè)時(shí)候，你切換到你項(xiàng)目根目錄下，就會(huì)發(fā)現(xiàn)多了很多文件，這些文件就是運(yùn)行一個(gè)Cypress測(cè)試的必要文件。

npm init 生成的package.json 包含了cypress安裝的各項(xiàng)配置

fixtures 默認(rèn)就在 cypress/fixtures 目錄下，主要存放靜態(tài)測(cè)試數(shù)據(jù)，實(shí)際場(chǎng)景例如：調(diào)用外部接口并依賴返回值，則可以使用fixtures，無法真正訪問（類似mock）；靜態(tài)的資源數(shù)據(jù)

e2e 默認(rèn)位于 cypress/e2e，主要存放測(cè)試文件，cypress執(zhí)行的也是這里面的js文件

所有在 integration 文件下，且文件格式是以下的文件都將被 Cypress 識(shí)別為測(cè)試文件

support 支持文件，主要放可重用配置，底層通用函數(shù)或者全局默認(rèn)配置。我們看一下這2個(gè)文件里的內(nèi)容。

先看command.js. Command 顧名思義就是命令。也可以理解為操作命令。比如Web瀏覽器里的單擊，拖拽，登錄，選擇，下拉框，打開網(wǎng)址等這些操作都可以在這個(gè)文件里封裝起來。再看一下e2e.js 里寫了說這里是放全局配置或者修改cypress 行為的地方。有點(diǎn)類似你再執(zhí)行所有腳本之前需要準(zhǔn)備的東西。

cypress.config.js 存儲(chǔ)任何Cypress特定的配置。

Component Testing

https://cloud.tencent.com/developer/article/2090262

cypress執(zhí)行測(cè)試
cypress文件結(jié)構(gòu)