我的新書前端自動(dòng)化測試框架Cypress從入門到精通出版啦！

自從我的新書<前端自動(dòng)化測試框架 -- Cypress從入門到精通>上市以來，這本書受到了大量同學(xué)熱情的追捧和討論。在跟同學(xué)們的交流中，我也了解到， 原來除了國外優(yōu)秀的公司(例如Adobe, 迪士尼，AutoDesk等等）， 國內(nèi)也有很多公司在嘗試使用Cypress提升測試效率。而在Cypress中國群內(nèi)、在公眾號(hào)iTesting里，我每天都能看到大量關(guān)于Cypress的使用討論和私下問詢。這讓我感到無比榮幸。（買了書的同學(xué)們，公眾號(hào)回復(fù)你的微信，拉你到Cypress中國群）。

除了日常推薦大家通過閱讀我的書來解決日常Cypress使用問題外，我也一直在更新著我這邊的Cypress知識(shí)圖譜， 不夸張的說，目前我總結(jié)和實(shí)踐下來知識(shí)點(diǎn)多達(dá)200多篇。本著“雕琢自我，普惠他人”的原則，我決定在公眾號(hào)iTesting上開設(shè)<你不知道的Cypress系列>專欄。此專欄目的是分享一些我自己趟過的坑，走過的彎路、以及在選型時(shí)拋棄了的實(shí)踐。希望讓大家在選用Cypress作為前端自動(dòng)化測試框架方案時(shí)， 可以借鑒一下，避免再走我走過的彎路。

今天是<你不知道的Cypress系列>的第一篇 --雞肋的BDD。

經(jīng)常有同學(xué)問我，為什么不在自動(dòng)化測試中使用BDD？

... 進(jìn)退兩難之際，夏侯惇入帳，稟請(qǐng)夜間口號(hào)。曹操隨口曰：“雞肋!雞肋!”

什么是BDD？

Behavioural Driven Development (BDD)是從TDD發(fā)展來的（什么，TDD你都不知道？！），它通過自然語言定義系統(tǒng)行為，以功能使用者的角度，編寫需求場景，且這些行為描述可以直接形成需求文檔，同時(shí)也是測試標(biāo)準(zhǔn)。

這個(gè)概念太繞了，我不準(zhǔn)備詳細(xì)展開。你只要記住，BDD的背后是Gherkin， 而Gherkin的最佳體現(xiàn)是Cucumber框架，所以當(dāng)你看到有人的測試用例/腳本是下面這個(gè)樣子時(shí)，它就是BDD了。

Given XXXWhen XXXThen XXX

本著測試工程師的優(yōu)良傳統(tǒng) “You Can You Up， No Can No BB”， 我們直接用代碼說話：

假設(shè)我有一個(gè)網(wǎng)站，它如下面這個(gè)樣子：

它非常簡單，當(dāng)你輸入正確的用戶名和密碼，我就允許你登錄。假設(shè)我們要測試這個(gè)登錄功能，那么我們先來看下，該如何測試。

不使用BDD

//login.jsdescribe('HTML form submission', function () {    beforeEach(function () {        cy.visit('/login')    })
    const username = "kevin.cai"    const password = "password123"
    it('驗(yàn)證登錄成功', function () {        //登錄        cy.get('input[name=username]').type(username)        cy.get('input[name=password]').type(password)        cy.get('form').submit()
        // 登錄后驗(yàn)證        cy.url().should('include', '/dashboard')        cy.get('h1').should('contain', 'kevin.cai')        cy.getCookie('cypress-session-cookie').should('exist')    })})

可以看到，這個(gè)代碼非常的Stright Forword。

為了簡單起見，在這里我沒有用任何的設(shè)計(jì)模式，實(shí)際工作中代碼要比這個(gè)復(fù)雜的多，但是這一點(diǎn)不影響我們的比較，因?yàn)榧词鼓阌昧薖O， 用了Custom Commands， 也無非是代碼結(jié)構(gòu)更清晰一點(diǎn)，全部放在這里的代碼無非分開放到公用Page里，放到Commands.js里。

再來看下，BDD的用法

要使用BDD， 它的文件結(jié)構(gòu)會(huì)如下所示：

|--iTesting（你的項(xiàng)目）    |--integration        |--login.feature(你的feature文件)        |--login            |--login.js(你的Step Definitons)    |--plugins         |--index.js    |--support         |--commands.js?????????|--index.js

其中，login.feature文件的代碼如下所示：

Feature: Login
iTesting want to login
Scenario: iTeting Demo    Given I am on the home page    When I login with        | username | password |        | kevin.cai | password123 |    Then the url is        | url |        | /dashboard |    And iTesting logged

BDD宣稱的最大好處就在這里了：用自然語言描述一個(gè)測試，并把它當(dāng)成測試用例使用。

真的是這樣的嗎？經(jīng)驗(yàn)告訴我們，華麗的外袍下面，一定是千瘡百孔。來跟我一起解密，這些所謂的”自然語言“是如何起作用的吧。

再來看下Step Definiton， login.js的代碼如下：

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
Given(/^I am on the home page$/, () => {    cy.visit("http://localhost:7077/login")})When(/^I login with$/, (dataTable) => {    dataTable.hashes().forEach(auth => {        cy.get('input[name=username]').type(auth.username)        cy.get('input[name=password]').type(auth.password)        cy.get('form').submit()    })})
Then(/^the url is$/, (dataTable) => {    dataTable.hashes().forEach(dashbord => {    cy.log(dashbord.url)    cy.url()        .should('eq', `${Cypress.config().baseUrl}${dashbord.url}`)    })})
And(/^iTesting logged$/, () => {    cy.getCookie('cypress-session-cookie').should('exist')})

看到這里，你心里是不是跟我一樣，就這？？（黑人問號(hào)臉）， 這難道不是另一種形式的函數(shù)嗎？或者再高大上一點(diǎn)， 關(guān)鍵字？怎么你就敢這么秀？竟然開宗立派叫自己BDD， 要我說，BDD，?你應(yīng)該叫“別BB，你就是DD！”

我們?cè)賮砜催\(yùn)行時(shí)表現(xiàn)：

用了BDD后，你的測試用例里只能看到定義的feature文件（華麗的外袍給你看，內(nèi)里就不好意思拿出來嘍~）。

運(yùn)行一下：

我再次笑了， 除了把我寫的描述高亮出來，有什么區(qū)別嗎？？

BDD唯一讓我覺得不是一無是處的地方在于，可以給feature文件加標(biāo)簽，支持按標(biāo)簽運(yùn)行：

Feature: Login
iTesting want to login
@smokeScenario: iTeting Demo    Given I am on the home page    When I login with        | username | password |        | kevin.cai | password123 |    Then the url is        | url |        | /dashboard |    And iTesting logged

然后命令行中運(yùn)行：

yarn cypress-tags run -e Tags='@smoke'

這樣能起到一個(gè)挑選測試用例運(yùn)行的目的。

總結(jié)

我一貫是討厭BDD的，在初次定義Cypress框架規(guī)范時(shí)，也有同學(xué)建議我用BDD，我都是一票否決的。原因無它，BDD使用下來的唯一感受就是（相信我，我開發(fā)基于Python的測試框架時(shí)也鄙視過BDD），會(huì)寫代碼的同學(xué)不想用BDD，覺得BDD是脫褲子放屁，隔靴搔癢多此一舉。不會(huì)寫代碼的同學(xué)用不好BDD， 不是說自然語言描述嗎？為什么我描述的框架都不認(rèn) ：）。

BDD除了給我們?cè)黾狱c(diǎn)工作量和Debug負(fù)擔(dān)后，沒有帶來任何測試效率提升。

正所謂：“進(jìn)退維谷，曹阿瞞不想吃雞， 幸災(zāi)樂禍，老蔡笑罵BDD”。?

下次預(yù)告：

你不知道的Cypress系列（2） -- 絕知此事要躬行，別被Cypress官方忽悠瘸了！

點(diǎn)贊+轉(zhuǎn)發(fā)，然后我們繼續(xù)下一篇?

技術(shù)討論

公眾號(hào)里直接回復(fù) 666， 帶你入圈。