寫在前面

使用 cypress 進(jìn)行端對(duì)端測(cè)試，和其他的一些框架有一個(gè)顯著不同的地方，它使用 JavaScript 作為編程語(yǔ)言。

傳統(tǒng)主流的 selenium 框架是支持多語(yǔ)言的，大多數(shù) QA 會(huì)的 python 和 Java 語(yǔ)言都可以編寫 selenium 代碼，遇到需要編寫 js 代碼的 cypress，以為又要學(xué)習(xí)一門編程語(yǔ)言，慢慢就放棄了。

其實(shí)學(xué)習(xí) cypress 只需要掌握一些基礎(chǔ)語(yǔ)法就夠了。

1、變量

在 js 里用 let 這個(gè)關(guān)鍵字定義變量，當(dāng)一行代碼結(jié)束后，可以用分號(hào) ; 隔開。

瀏覽器當(dāng)中都內(nèi)置了 js 的解釋器，上面的代碼可以直接在瀏覽器中運(yùn)行。按 F12 打開瀏覽器的開發(fā)者工具，點(diǎn)擊 console 標(biāo)簽頁(yè)，就可以輸入 js 代碼了。

除了瀏覽器環(huán)境，也可以通過(guò) node.js 環(huán)境運(yùn)行代碼。我們可以把上面的代碼保存到 demo.js 文件中，然后在命令行工具中輸入 node 指令運(yùn)行代碼。

2、條件分支

js 的條件分支主要需要注意條件表達(dá)式要用括號(hào)包裹。

在 js 的條件分支代碼中，如果代碼邏輯比較簡(jiǎn)單，經(jīng)常使用三元運(yùn)算符簡(jiǎn)化代碼，它的使用方式是通過(guò) ？表示。上面的代碼可以改成三元運(yùn)算符形式：

3、函數(shù) （Function)

定義函數(shù)時(shí)使用 function 關(guān)鍵字，然后是函數(shù)名，括號(hào)里填入?yún)?shù)，參數(shù)之間用逗號(hào)隔開，最后是花括號(hào)之間的代碼（即“函數(shù)體”），函數(shù)的返回值使用 return 關(guān)鍵字。

4、箭頭函數(shù) (Arrow function)

箭頭函數(shù)在 js 使用中非常普遍，他能簡(jiǎn)化普通函數(shù)的寫法。上面的普通函數(shù)改成箭頭函數(shù)：

5、回調(diào)函數(shù)（Callback）

在 js 代碼編寫中，經(jīng)常需要用到回調(diào)函數(shù)。它允許我們采用異步方式編程，當(dāng)執(zhí)行完一個(gè)任務(wù)以后，再通過(guò)回調(diào)觸發(fā)另外的任務(wù)。

在上面的例子中，print 函數(shù)允許程序隨機(jī)等待 5 秒內(nèi)的時(shí)間，再打印字符串，最終觸發(fā)回調(diào)函數(shù)。在調(diào)用該函數(shù)時(shí)，可以通過(guò)箭頭函數(shù)指定一個(gè)回調(diào)函數(shù)，比如打印"finished"。

回調(diào)函數(shù)如果不嵌套調(diào)用，是一個(gè)非常好的工具。但是一旦嵌套調(diào)用，會(huì)陷入“回調(diào)地獄” 。陷入回調(diào)地獄的代碼加入 try catch 異常捕獲之后，層次非常不清晰，嚴(yán)重影響閱讀。

6、Promise

Promise 是在異步編程中替代回調(diào)函數(shù)的編程方式。我們可以在函數(shù)中創(chuàng)建一個(gè) Promise 對(duì)象，這個(gè)對(duì)象需要傳遞一個(gè)函數(shù)作為參數(shù)，通常可以寫成箭頭函數(shù)的形式。

箭頭函數(shù)有兩個(gè)特定參數(shù) resolve 和 reject，resolve 負(fù)責(zé)把程序的正常結(jié)果返回出去， reject 負(fù)責(zé)程序出現(xiàn)異常時(shí)，把異常情況返回出去。

?

7、Async / Await

Promise 比普通回調(diào)函數(shù)的方式更容易編寫，但是也涉及到 resolve，reject 和 then 等很多概念，如果 then 很多，代碼也不好看。

Async/Await 是以更舒適的方式使用 promise 的一種特殊語(yǔ)法，同時(shí)它也非常易于理解和使用。我們只需要在普通函數(shù)前面加上 async 關(guān)鍵字，那么這個(gè)函數(shù)的返回值將是一個(gè) promise 對(duì)象。

雖然函數(shù)在定義的時(shí)候確定了返回值是 8，但是當(dāng)調(diào)用 print 函數(shù)時(shí)，得到的是一個(gè) Promise, 而不是 8 。如果需要獲取到其中返回值，可以通過(guò) then 方法：

如果覺(jué)得 then 寫法不喜歡，可以換成 await 獲取返回值：

之前的回調(diào)函數(shù)例子可以改寫成 async / await 的形式：

8、mocha & chai

當(dāng)編寫完一些 js 代碼之后，你需要對(duì)這些代碼進(jìn)行測(cè)試，保證代碼能按預(yù)期執(zhí)行，并得到預(yù)期結(jié)果。

而 mocha 是一個(gè)非常出色的 js 單元測(cè)試框架，chai 專門處理斷言。需要使用這兩個(gè)框架時(shí)，先通過(guò) npm 安裝：

接著就可以寫用例了，用例最好寫到以 test 命名的目錄中，每一個(gè) js 文件就是一個(gè)規(guī)范（spec），它表示被測(cè)試的函數(shù)應(yīng)該是怎樣的。

在這個(gè)規(guī)范文件中，包含了對(duì)功能的描述（describe）和測(cè)試用例（it）以及斷言情況（assert）。編寫好測(cè)試代碼后，進(jìn)入文件目錄，在命令行通過(guò) npx mocha 運(yùn)行。

正如你所看到的，一個(gè)規(guī)范包含 3 個(gè)部分：

01：describe

表示我們正在描述的功能是什么。在我們的例子中我們正在描述函數(shù) pow。描述的作用是組織測(cè)試用例（it)，在一個(gè)描述中，通常會(huì)包含多個(gè) it 用例。

02：it

需要執(zhí)行的用例，第二個(gè)參數(shù)是用于測(cè)試 pow 函數(shù)的代碼，通常來(lái)說(shuō)是一個(gè)函數(shù)。

03：assert

斷言，表示測(cè)試的結(jié)果是否符合預(yù)期。

cypress 框架 對(duì) mocha 進(jìn)行了集成，編寫測(cè)試代碼用的正是 mocha 的表示方法，所以學(xué)好 mocha, cypress 就學(xué)會(huì)了一半。

下面這個(gè)例子就是 cypress 執(zhí)行瀏覽器測(cè)試的代碼，可以看出，和 mocha 沒(méi)有區(qū)別，只是在 cypress 中，不能直接使用 assert 這種顯性斷言方式。

9、總結(jié)

要進(jìn)行瀏覽器端的自動(dòng)化測(cè)試，掌握核心的 js 用法是必不可少的，本文提到的 8 個(gè)知識(shí)點(diǎn)，都會(huì)頻繁用到。

• 通過(guò) let 關(guān)鍵字命名變量。
• 通過(guò) if 和三元表達(dá)式控制條件。
• 普通的 function 形式函數(shù)定義。
• 箭頭函數(shù)也經(jīng)常使用，有點(diǎn)類似匿名函數(shù)。
• 回調(diào)函數(shù)在 js 當(dāng)中非常常見，但是會(huì)遇到回調(diào)地域的問(wèn)題。
• Promise 是解決回調(diào)地獄的有效手段，promise 和 then 的用法會(huì)經(jīng)常碰到。
• Async / Await 是另一種更優(yōu)雅的使用 promise 的方式，更推薦使用。

---

最后：?為了回饋鐵桿粉絲們，我給大家整理了完整的軟件測(cè)試視頻學(xué)習(xí)教程，朋友們?nèi)绻枰梢宰孕忻赓M(fèi)領(lǐng)取?【保證100%免費(fèi)】

加入我的軟件測(cè)試交流群：110685036免費(fèi)獲取~（同行大佬一起學(xué)術(shù)交流，每晚都有大佬直播分享技術(shù)知識(shí)點(diǎn)）

軟件測(cè)試面試小程序

被百萬(wàn)人刷爆的軟件測(cè)試題庫(kù)！！！誰(shuí)用誰(shuí)知道！！！全網(wǎng)最全面試刷題小程序，手機(jī)就可以刷題，地鐵上公交上，卷起來(lái)！

涵蓋以下這些面試題板塊：

1、軟件測(cè)試基礎(chǔ)理論 ，2、web,app，接口功能測(cè)試 ，3、網(wǎng)絡(luò) ，4、數(shù)據(jù)庫(kù)?，5、linux

6、web,app，接口自動(dòng)化 ，7、性能測(cè)試?，8、編程基礎(chǔ)，9、hr面試題 ，10、開放性測(cè)試題，11、安全測(cè)試，12、計(jì)算機(jī)基礎(chǔ)

全套資料獲取方式 ：