?
?

😏作者簡(jiǎn)介：博主是一位測(cè)試管理者，同時(shí)也是一名對(duì)外企業(yè)兼職講師。
📡主頁(yè)地址：【Austin_zhai】
🙆目的與景愿：旨在于能幫助更多的測(cè)試行業(yè)人員提升軟硬技能，分享行業(yè)相關(guān)最新信息。
💎聲明：博主日常工作較為繁忙，文章會(huì)不定期更新，各類(lèi)行業(yè)或職場(chǎng)問(wèn)題歡迎大家私信，有空必回。

?
?

1. 接上回

??上一篇我們介紹了一些Cypress中的一些高頻使用技巧，那么今天就由博主我繼續(xù)來(lái)為大家?guī)?lái)關(guān)于Cypress的一些高階技巧。

?
?

2. 自定義命令

??在Cypress中，自定義命令是一個(gè)強(qiáng)大的輔助功能，說(shuō)直白點(diǎn)就是它允許你將重復(fù)使用的代碼片段抽象成可重用的命令。而通過(guò)這些自定義的命令，我們可以讓我們的自動(dòng)化測(cè)試腳本更加的趨于模塊化，可想而知的是，模塊化的腳本其自身的可維護(hù)性、復(fù)用性和可閱讀性就會(huì)更上一個(gè)臺(tái)階。

??要使用自定義命令，我們就需要在support/commands.js中建立自己的命令。比如我們需要將登錄這個(gè)業(yè)務(wù)動(dòng)作進(jìn)行抽象，那就先編寫(xiě)一段登錄的相關(guān)業(yè)務(wù)代碼。

我們寫(xiě)一個(gè)十分簡(jiǎn)單的登錄操作，語(yǔ)法如下，可以看到整個(gè)的業(yè)務(wù)代碼十分的簡(jiǎn)單，只需要將用戶名和密碼進(jìn)行傳參即可。

Cypress.Commands.add('login', (username, password) => {cy.visit('/login');cy.get('#username').type(username);cy.get('#password').type(password);cy.get('button[type="submit"]').click();
});

??那么我們?cè)赾ommands.js中將這段業(yè)務(wù)代碼添加完成后，在實(shí)際的測(cè)試腳本中就可以直接對(duì)其進(jìn)行使用。
使用起來(lái)是不是很方便，因?yàn)槠浔旧砭褪菍I(yè)務(wù)方法繼續(xù)抽象，所以直接調(diào)用其方法名就可以達(dá)到登錄代碼同樣的效果。

describe('login_test', () => {it('should log in successfully', () => {cy.login('your_username', 'your_password');});
});

?

2.1 參數(shù)傳遞

??我們?cè)诙x業(yè)務(wù)方法的時(shí)候傳參不僅僅可以傳一些基礎(chǔ)的業(yè)務(wù)參數(shù)，還可以在此基礎(chǔ)上根據(jù)自己的業(yè)務(wù)場(chǎng)景來(lái)定義一些比較靈活的參數(shù)類(lèi)別。比如我們?cè)趯?duì)特定元素進(jìn)行業(yè)務(wù)操作時(shí)，我們可以統(tǒng)一的定義一個(gè)操作類(lèi)或方法，來(lái)對(duì)此進(jìn)行特定的傳參，類(lèi)似于selenium中find_elelment方法。

??我們先在commands.js中定義，這里我們要傳遞的參數(shù)是一個(gè)元素選擇器。這樣我們就可以靈活的在頁(yè)面上選擇到任何一個(gè)能捕捉到的元素。

Cypress.Commands.add('clickAndVerify', { prevSubject: 'element' }, (element, text) => {cy.wrap(element).click();cy.contains(text);
});

??使用的時(shí)候只需要直接調(diào)用即可。

cy.get('.my-button').clickAndVerify('Clicked Button Text');

?

2.2 鏈?zhǔn)秸{(diào)用

??自定義命令毫無(wú)意外的也支持了鏈?zhǔn)綄?xiě)法，無(wú)疑這讓我們?cè)谠O(shè)計(jì)腳本的過(guò)程中可以更加靈活的應(yīng)對(duì)各類(lèi)復(fù)雜業(yè)務(wù)場(chǎng)景。

??同樣的現(xiàn)在commands.js中定義，這里我們?cè)诜祷豨et的時(shí)候進(jìn)行了鏈?zhǔn)秸{(diào)用。

Cypress.Commands.add('login', (username, password) => {cy.visit('/login');cy.get('#username').type(username);cy.get('#password').type(password);cy.get('button[type="submit"]').click();return cy.get('.user-dashboard'); 
});

??使用的時(shí)候只需要直接調(diào)用即可。

cy.login('your_username', 'your_password').should('be.visible');

?

2.3 自定義斷言

??同樣的，既然可以進(jìn)行抽象，我們也完全可以將斷言的操作加進(jìn)自定義命令，以驗(yàn)證特定的狀態(tài)或條件，包括一些特殊的驗(yàn)證邏輯。

??commands.js中定義，斷言元素存在切包含text。

Cypress.Commands.add('shouldBeVisibleAndContain', { prevSubject: 'element' }, (element, text) => {cy.wrap(element).should('be.visible').and('contain', text);
});

??直接調(diào)用方法即可對(duì)元素進(jìn)行斷言。

cy.get('.my-element').shouldBeVisibleAndContain('Expected Text');

?

2.4 處理異步操作

??對(duì)于上一篇末尾處說(shuō)到的異步操作處理，同樣可以在自定義命令中進(jìn)行抽象，其實(shí)在被測(cè)對(duì)象中異步操作是很常見(jiàn)的，比如等待某個(gè)條件成立后再繼續(xù)執(zhí)行后續(xù)的操作，類(lèi)似的這種場(chǎng)景我們都可以在自定義命令中繼續(xù)抽象和服用，以優(yōu)化腳本的整體運(yùn)行效率和維護(hù)性。

??在commands.js中定義，等待特定的條件后再執(zhí)行后續(xù)的操作。

Cypress.Commands.add('waitForApiResponse', () => {cy.intercept('GET', '/api/data').as('apiCall');cy.wait('@apiCall');
});

??調(diào)用，不再贅述。

cy.waitForApiResponse();

?

2.5 Cypress對(duì)象

??除了以上說(shuō)的這些方法外，我們還可以將一些元素和值包裝成Cypress對(duì)象，這樣做的作用就是讓這些抽象后的對(duì)象可以在自定義命令中使用更多的Cypress自帶命令。

??在commands.js中定義，我們使用cy.wrap()將對(duì)象包裝成Cypress對(duì)象，使用自帶的日志命令。

Cypress.Commands.add('logAndDebug', (subject) => {cy.wrap(subject).debug().log('Subject:', subject);
});

??調(diào)用，不再贅述。

cy.get('.my-element').logAndDebug();

?
?

3. 注意點(diǎn)

??我們?cè)谑褂米远x命令的同時(shí)也需要注意一些特殊的情況與場(chǎng)景。

?

3.1 關(guān)于腳本業(yè)務(wù)上下文

??在自定義命令中，當(dāng)然也存在著上下文的關(guān)系，我們要確保了解Cypress中命令的上下文，其中this與prevSubject 是特別覺(jué)有代表性的關(guān)鍵字。它們其實(shí)是允許你在自定義命令中引用和操作前一個(gè)命令的主體，就this這個(gè)來(lái)說(shuō)，它在自定義命令中用于引用當(dāng)前命令的上下文，對(duì)于一般的命令，它指向cy對(duì)象；對(duì)于一些帶有{ prevSubject: 'element' }選項(xiàng)的命令，this則會(huì)指向前一個(gè)命令的主體，這個(gè)是需要大家注意的。

??下面我們來(lái)舉兩個(gè)例子：
??首先我們來(lái)看普通命令中的this，這里的this就是指向cy對(duì)象的。

Cypress.Commands.add('customCommand', function () {cy.log(this); 
});

??調(diào)用

cy.customCommand();

??而對(duì)面帶有{ prevSubject: 'element' }的方法時(shí)，這里的this就像我之前說(shuō)的那樣，指向的是前一個(gè)命令的主體。簡(jiǎn)單點(diǎn)來(lái)說(shuō)this指向前一個(gè)命令的subject，而cy.log(subject)里的就是前一個(gè)命令的主體。

Cypress.Commands.add('customCommandWithSubject', { prevSubject: 'element' }, function (subject) {cy.log(this); cy.log(subject); 
});

??調(diào)用

cy.get('.my-element').customCommandWithSubject();

?

??prevSubject 的用作為告訴cypress你的自定義命令期望前一個(gè)命令的主體作為傳參，一般在多個(gè)自定義命令中共享同一個(gè)元素的場(chǎng)景中會(huì)頻繁使用到。

??同理，這里我們對(duì)前一個(gè)命令的主體進(jìn)行點(diǎn)擊操作，所以使用prevSubject 來(lái)達(dá)到我們所想要的效果。

Cypress.Commands.add('customCommandWithSubject', { prevSubject: 'element' }, function (subject) {cy.wrap(subject).click(); 
});

??調(diào)用

cy.get('.my-element').customCommandWithSubject();

?

3.2 抽象的程度

??雖然在自定義命令中我們需要對(duì)要定義的方法進(jìn)行抽象，但往往會(huì)有些同學(xué)在設(shè)計(jì)的過(guò)程中什么都想要，從而導(dǎo)致自己的自定義命令變得過(guò)度抽象，這些代碼的可讀性一般都比較差而且維護(hù)起來(lái)難度較大，無(wú)法適應(yīng)被測(cè)對(duì)象界面中的需求更改與樣式變更。

??這里我們就舉一個(gè)過(guò)度抽象的例子，讓大家了解適度和過(guò)度抽象的區(qū)別。

??我們先來(lái)看一下過(guò)度抽象的自定義命令，這里雖然方法中提供了一個(gè)登錄的基本步驟，但它的步驟過(guò)于具體，這樣會(huì)導(dǎo)致在測(cè)試用例中要添加其他的測(cè)試邏輯變得困難，本身自定義命令的本質(zhì)就是用來(lái)大量復(fù)用的，這樣就變得本末倒置了。所以這樣的抽象程度限制了自定義命令的靈活性，使得它本身的價(jià)值變得可有可無(wú)。

Cypress.Commands.add('login', (username, password) => {cy.visit('/login');cy.get('#username').type(username);cy.get('#password').type(password);cy.get('button[type="submit"]').click();cy.get('.user-dashboard').should('be.visible');
});

??調(diào)用

describe('Login Test', () => {it('should log in successfully', () => {cy.login('testuser', 'password123');});
});

??那么接下來(lái)我們看一下什么是適度抽象的自定義命令，下面這段乍一看似乎與上面的沒(méi)什么很大的區(qū)別，其實(shí)則不然。在這其中我們只保留的基本的登錄操作，不進(jìn)行過(guò)多的細(xì)化操作，說(shuō)人話就是我們只把共通與大框架的部分保留了下來(lái)，一些根據(jù)業(yè)務(wù)不同而擴(kuò)展或特定的操作則被丟棄掉了。這樣我們就可以在測(cè)試用例中添加更多的具體步驟來(lái)適應(yīng)各類(lèi)業(yè)務(wù)測(cè)試場(chǎng)景的需求。

Cypress.Commands.add('basicLogin', (username, password) => {cy.visit('/login');cy.get('#username').type(username);cy.get('#password').type(password);cy.get('button[type="submit"]').click();
});

??調(diào)用

describe('Login Test', () => {it('should log in successfully', () => {cy.basicLogin('testuser', 'password123');cy.get('.user-dashboard').should('be.visible');});
});