近期接觸了Cypress和TestCafe，兩個(gè)測(cè)試框架都基于Node.js，都不再使用Selenium+WebDriver，而且開箱即用，非常輕量級(jí)，就沖著不再使用WebDriver這一點(diǎn)，極大地勾起了我的好奇心。所以今天就來初略的學(xué)習(xí)一下，并以此文作為學(xué)習(xí)筆記。
本文學(xué)習(xí)筆記以Windows10 為背景，Mac 和 Linux請(qǐng)參考官網(wǎng)
.
注意： Cypress 和 TestCafe 都依賴Node.js，所以在學(xué)習(xí)之前確保電腦上已經(jīng)安裝了Node.js
本篇文章只是一個(gè)初略的Demo學(xué)習(xí)筆記，更多詳細(xì)內(nèi)容后期學(xué)習(xí)繼續(xù)更新文章。
安裝Node.js并配置npm環(huán)境變量
1、Node.js下載地址：https://nodejs.org/en/
2、安裝路徑
3、配置npm環(huán)境變量
安裝Cypress
方法一： 直接使用命令安裝(cmd 安裝 會(huì)比較慢，還是建議選擇下面的第2種方式，直接下載安裝包來安裝。)
npm install cypress
方法二： 或者去官網(wǎng)下載安裝包 https://www.cypress.io/
解壓后的文件如下，直接點(diǎn)擊Cypress.exe安裝文件啟動(dòng)即可
啟動(dòng)運(yùn)行Cypress
方法一： 使用cmd命令行啟動(dòng)
(npm高于v5.2的版本中自帶npx, 或者你也可以單獨(dú)安裝npx.)
npx cypress open
方法二： 如果是下載Cypress安裝包，解壓后的文件中直接點(diǎn)擊Cypress.exe安裝文件啟動(dòng)即可啟動(dòng)
方法三：
在package.json文件中加入以下內(nèi)容之后，就可以使用
npm run cypress:open 來啟動(dòng)Cypress比如我的package.json在 E:\WorkSpace\Ui_test\node_modules\cypress 下
{
"scripts": {
"cypress:open": "cypress open"
}
}
cd到上述文件夾E:\WorkSpace\Ui_test\node_modules\cypress下輸入
npm run cypress:open 即可啟動(dòng)Cypress。
方法四： 當(dāng)然還有幾種方式啟動(dòng)，請(qǐng)參考官網(wǎng)介紹；上面選擇了最方便的啟動(dòng)方式。
Cypress啟動(dòng)運(yùn)行界面
啟動(dòng)后的Cypress界面如下：
選擇項(xiàng)目地址，然后就可以繼續(xù)選擇并執(zhí)行項(xiàng)目里面的測(cè)試腳本。
Cypress測(cè)試腳本與執(zhí)行
先來說一下文件結(jié)構(gòu)：
|-- fixtures
|-- integration
| `-- example_spec.js
|-- plugins
| `-- index.js
`-- support
|-- commands.js
`-- index.js
fixtures 文件夾存放自定義 json 文件；
integration 文件夾編寫測(cè)試；
plugins 和 support 是非必須使用的文件夾，需要自定義指令的時(shí)候會(huì)用到。
添加自己的第一個(gè)測(cè)試用例
1、如果是cmd npm安裝的cypress， 用例腳本在\node_modules\cypress\cypress\integration\examples 文件下。
2、如果是下載解壓的cypress，用例腳本在\cypress\integration\examples文件下
新建sample_spec.js：
describe('My First Test', function () {
it('Does not do much!', function () {
cy.visit("https://www.baidu.com")
cy.get("#kw").type("cypress test")
cy.wait(60)
cy.get("#su").click()
cy.contains('cypress website').click()
})
})
然后運(yùn)行Cypress可以看到如下圖，然后直接點(diǎn)擊js文件，運(yùn)行測(cè)試用例，將會(huì)啟動(dòng)Chrome運(yùn)行腳本。
安裝TestCafe
一個(gè)基于Node.js的WebUI自動(dòng)化端到端測(cè)試框架，使用JS或TypeScript編寫測(cè)試。
npm install -g testcafe #全局安裝模式
更多安裝方式可參考官網(wǎng)
安裝之后使用測(cè)試命令測(cè)試一下是否安裝成功
testcafe chrome tests/
TestCafe創(chuàng)建一個(gè)簡(jiǎn)單的測(cè)試?yán)?/h2>
TestCafe允許使用JavaScript和TypeScript來編寫測(cè)試。
cd到你的項(xiàng)目文件下，要?jiǎng)?chuàng)建測(cè)試，請(qǐng)新建一個(gè)后綴名為.js或.ts文件。這個(gè)文件必須有一個(gè)特殊的結(jié)構(gòu)-測(cè)試必須組織到fixture中。
比如此處以sample.js 為例：
1、首先，導(dǎo)入·testcafe模塊
import { Selector } from 'testcafe';
2、然后使用fixture函數(shù)聲明一個(gè)fixture。
fixture `Getting Started`
.page `http://devexpress.github.io/testcafe/example`;
3、然后，創(chuàng)建測(cè)試函數(shù)test，你可以在其中輸入測(cè)試代碼，之后保存為sample.js。
import { Selector } from 'testcafe';
fixture `Getting Started`
.page `http://devexpress.github.io/testcafe/example`;
test('My first test', async t => {
// Test code
});
TestCafe運(yùn)行測(cè)試腳本
在你的項(xiàng)目文件夾下，cmd切換到你指定目標(biāo)瀏覽器和文件路徑，即可運(yùn)行測(cè)試。
testcafe chrome sample.js
TestCafe將自動(dòng)打開所選的瀏覽器并在其中開始執(zhí)行測(cè)試。
查看測(cè)試結(jié)果
當(dāng)測(cè)試運(yùn)行時(shí)，TestCafe收集關(guān)于測(cè)試運(yùn)行的信息，并在shell命令窗口中輸出報(bào)告。
有關(guān)如何配置測(cè)試運(yùn)行的詳細(xì)信息，可以參考官網(wǎng)
TestCafe編寫測(cè)試代碼
1、在頁(yè)面上執(zhí)行操作
每個(gè)測(cè)試都應(yīng)該能夠與頁(yè)面內(nèi)容交互。對(duì)于用戶要執(zhí)行的操作，TestCafe提供了：Click，hover， typetext，setFilesToUpload等等。他們可以叫做 鏈，操作鏈。
下面的fixture包含一個(gè)簡(jiǎn)單的測(cè)試，該測(cè)試在文本編輯器中鍵入開發(fā)人員名稱，然后單擊Submit按鈕。
import { Selector } from 'testcafe';
fixture `Getting Started`
.page `http://devexpress.github.io/testcafe/example`;
test('My first test', async t => {
await t
.typeText('#developer-name', '軟測(cè)小生')
.click('#submit-button');
});
所有的操作實(shí)現(xiàn)都使用對(duì)象控制器t的異步功能來實(shí)現(xiàn)。 此對(duì)象用于訪問測(cè)試運(yùn)行API。要等待操作完成，在調(diào)用這些操作或操作鏈時(shí)使用await關(guān)鍵字。
2、觀察頁(yè)面狀態(tài)
TestCafe允許測(cè)試人員觀察頁(yè)面狀態(tài)。為此，它提供了在客戶端上執(zhí)行代碼的特殊類型的函數(shù):Selector 用于直接訪問DOM元素，ClientFunction用于從客戶端獲取任意數(shù)據(jù)。你可以將這些函數(shù)作為常規(guī)的異步函數(shù)調(diào)用，也就是說，你可以獲得它們的結(jié)果并使用參數(shù)向它們傳遞數(shù)據(jù)。
Selector API提供方法和屬性來選擇頁(yè)面上的元素并獲取它們的狀態(tài)。
例如，單擊示例web頁(yè)面上的Submit按鈕將打開一個(gè)“謝謝”頁(yè)面；要訪問打開頁(yè)面上的DOM元素，就必須使用Selector函數(shù)。
下面的示例演示如何訪問文章標(biāo)題元素并獲取其實(shí)際文本。
import { Selector } from 'testcafe';
fixture `Getting Started`
.page `http://devexpress.github.io/testcafe/example`;
test('My first test', async t => {
await t
.typeText('#developer-name', '軟測(cè)小生')
.click('#submit-button');
const articleHeader = await Selector('.result-content').find('h1');
// 獲取文章標(biāo)題的文本
let headerText = await articleHeader.innerText;
});
更多內(nèi)容可參考選擇頁(yè)面元素
3、斷言
一般而言，功能測(cè)試還應(yīng)該檢查執(zhí)行操作的結(jié)果。例如，“謝謝”頁(yè)面上的文章標(biāo)題應(yīng)該顯示為用戶輸入的名稱。要檢查頁(yè)面Title是否正確，必須向測(cè)試添加斷言:
下面的測(cè)試演示了如何使用內(nèi)置的斷言。
import { Selector } from 'testcafe';
fixture `Getting Started`
.page `http://devexpress.github.io/testcafe/example`;
test('My first test', async t => {
await t
.typeText('#developer-name', '軟測(cè)小生')
.click('#submit-button')
// 使用斷言檢查實(shí)際的標(biāo)題文本是否等于預(yù)期的標(biāo)題文本
.expect(Selector('#article-header').innerText).eql('Thank you, 軟測(cè)小生!');
});
總結(jié)：
在接觸了Cypress和TestCafe之后，驚掉下巴，這兩個(gè)工具的輕量級(jí)之輕，與之前使用的Selenium相比，簡(jiǎn)直無法想象，從安裝到執(zhí)行第一個(gè)腳本，從上述的學(xué)習(xí)筆記中可以看出，10分鐘入門完全不是吹的。
遙想當(dāng)年Selenium+WebDriver的學(xué)習(xí)之路，可謂是很艱辛，也很復(fù)雜，很大原因也可能是由于那時(shí)是小白；再接觸到Cypress和TestCafe之后，愛不釋手，決定使用目前的項(xiàng)目來實(shí)施拓展一下。
