01

—

什么是App Action

相信大家聽(tīng)了我那么多次鼓吹Cypress，早已知道，Cypress是市面上為數(shù)不多的沒(méi)有使用JSON Wire Protocol（WebDriver及99%其它自動(dòng)化框架的核心協(xié)議）的框架。Cypress運(yùn)行在瀏覽器之內(nèi)，并且和你的應(yīng)用程序運(yùn)行在同一生命周期，這意味著Cypress可以直接訪問(wèn)和控制應(yīng)用程序本身的行為。

而這種直接控制應(yīng)用程序到達(dá)要測(cè)試所需狀態(tài)的能力，就是“App Action”。

這句話同樣不好理解，我舉個(gè)例子，假設(shè)我要測(cè)試一個(gè)頁(yè)面功能，這個(gè)功能是付款成功后，會(huì)隨機(jī)出現(xiàn)一個(gè)優(yōu)惠券供我下次使用。我要測(cè)試這個(gè)優(yōu)惠券在付款成功后會(huì)出現(xiàn)，并且可以領(lǐng)取。自動(dòng)化測(cè)試為了保證測(cè)試用例的原子性，我：

• 要么準(zhǔn)備一個(gè)賬戶，這個(gè)賬戶有余額， 并且這個(gè)賬戶永遠(yuǎn)有我要的商品在購(gòu)物車，等著我付款（大家知道這不可能）。

  
  

• 要么注冊(cè)一個(gè)賬戶，用這個(gè)賬戶登錄，充錢，添加商品，然后加購(gòu)物車，然后付款，最后檢查優(yōu)惠券頁(yè)面。

注意：我的測(cè)試要求是測(cè)試付款成功后的優(yōu)惠券頁(yè)面。那么這個(gè)動(dòng)作抽象一下就是

1. 付款及其前置動(dòng)作2. 優(yōu)惠券頁(yè)面（真正的測(cè)試項(xiàng)）

在我們實(shí)際測(cè)試中，我們經(jīng)常會(huì)發(fā)現(xiàn)，可能整個(gè)測(cè)試寫(xiě)了100行代碼。測(cè)試付款后，檢查優(yōu)惠券的動(dòng)作只有10行代碼，其它90行都是動(dòng)作1，即我們花大量時(shí)間在做付款及其前置動(dòng)作。

有沒(méi)有覺(jué)得有點(diǎn)本末倒置？

如果有一種辦法，可以讓我們的應(yīng)用程序直接到達(dá)優(yōu)惠券頁(yè)面，我的代碼是不是只需要10行？是不是就避免了很多無(wú)效的操作？是不是運(yùn)行速度上可以更快，而且我可以只關(guān)注我要測(cè)試的部分？

這種直接控制應(yīng)用程序到達(dá)要測(cè)試所需狀態(tài)的能力，就是“App Action”。

App Action舉例

Cypress提供給我們一個(gè)應(yīng)用程序供練習(xí)，如下圖所示：

假設(shè)我要測(cè)試登錄，那么正常情況下，我的操作是下面這樣的：

1. 打開(kāi)首頁(yè)。2. 點(diǎn)擊右上角的Login。3. 在彈出的Login對(duì)話框中輸入用戶名，密碼登錄。

我的代碼是這樣：

it('iTesting Demo', () => {
  cy    .visit('/');
// 7到 13 行是Login的前置條件。  cy    .get('[data-cy="login-menu"]')    .click();
  cy    .get('[data-cy="login-module"]')    .should('be.visible');
//真正的Login 從這里開(kāi)始  cy    .get('[data-cy="login-email"]')    .type('[email protected]');
  cy    .get('[data-cy="login-password"]')    .type('Password');
  cy    .get('[data-cy="login"]')    .click();
});

由于Cypress可以直接訪問(wèn)應(yīng)用程序資源，并且可以控制應(yīng)用程序狀態(tài)，那么使用“App Action”的操作就是這樣：

1. 打開(kāi)首頁(yè)。2. Cypress直接操作應(yīng)用程序打開(kāi)Login界面。3. 輸入用戶名，密碼繼續(xù)測(cè)試。

使用Applicaiton Action的代碼就是這樣：

it('iTesting Demo', () => {  cy    .visit('/');  // Magic! Cypress通過(guò)將應(yīng)用程序窗口暴露出來(lái)，從而直接訪問(wèn)應(yīng)用 // 程序本身的各種方法。 實(shí)現(xiàn)我們一會(huì)講。    cy    .window()    .then(({ app }) => {      app.showLoginModule = true;    });         //真正的Login，從這里開(kāi)始  cy    .get('[data-cy="login-email"]')    .type('[email protected]');
  cy    .get('[data-cy="login-password"]')    .type('Password');
  cy    .get('[data-cy="login"]')    .click();});

由此可見(jiàn)，使用了App Action， 我們可以直接指定應(yīng)用程序到達(dá)測(cè)試需要的狀態(tài)，而不必再做無(wú)關(guān)的操作。

那么，這個(gè)是怎么實(shí)現(xiàn)的呢？

App Action如何實(shí)現(xiàn)

我們來(lái)看下關(guān)鍵代碼：

 // Magic! Cypress通過(guò)將應(yīng)用程序窗口暴露出來(lái)，從而直接訪問(wèn)應(yīng)用 // 程序本身的各種方法。實(shí)現(xiàn)我們一會(huì)講。  cy    .window()    .then(({ app }) => {      app.showLoginModule = true;    });

這段代碼直接把Login窗口打開(kāi)了，而不是通過(guò)頁(yè)面操作打開(kāi)。為什么這樣可以呢？

這就不得不說(shuō)到應(yīng)用程序源碼了：

從上圖可以看到，這個(gè)應(yīng)用程序是Vue的（React和Angular原理類似），通過(guò)Vue DevTools我們可以看出來(lái)，是屬性showLoginModule控制Login窗口的出現(xiàn)。

而如果我們能把應(yīng)用打開(kāi)的窗口（及其支持的方法）暴露給瀏覽器的Window對(duì)象，那么我們就可以通過(guò)cy.window來(lái)獲取。

具體怎么做呢？

在入口文件main.js里, 在初始化vue實(shí)例后，把我們的app實(shí)例暴露給window context就好。

const app = new Vue({  // ...}).$mount('#Example-app');// 上面是正常的vue代碼。
 // 起作用的是，添加了如下一行。window.app = app;

這樣做了后，當(dāng)應(yīng)用程序在瀏覽器中打開(kāi)時(shí)，你可以直接通過(guò)window.app來(lái)設(shè)置所有app支持的方法

因?yàn)閣indow我們已經(jīng)完全拿到了，所以我們可以直接用cypress來(lái)操作Login窗口的關(guān)閉和打開(kāi)。

window.app.showLoginModule = true 

所以，下面的關(guān)鍵代碼在Cypress測(cè)試中可以直接使用！

05

—

06

—