測(cè)試響應(yīng)網(wǎng)站建設(shè)是一個(gè)艱難的任務(wù)。 直到現(xiàn)在,實(shí)現(xiàn)跨瀏覽器的一個(gè)穩(wěn)定的和可維護(hù)的自動(dòng)化解決方案和跨設(shè)備測(cè)試響應(yīng)的布局已經(jīng)幾乎不可能。 但是如果我們有什么?一個(gè)機(jī)會(huì)寫視覺響應(yīng)測(cè)試網(wǎng)站?嗎? 如果我們能描述應(yīng)用程序的外觀和感覺,這直接進(jìn)入我們的測(cè)試?
也在考慮這個(gè)問題,我決定看看另一個(gè)有趣的視覺測(cè)試。 在相當(dāng)長(zhǎng)的一段時(shí)間我一直的粉絲?測(cè)試驅(qū)動(dòng)開發(fā)?(TDD)方法。 它幫助我在日常的編程工作。 TDD使我能夠形式化的任務(wù),以確保一切是根據(jù)需求來(lái)實(shí)現(xiàn)的。
更重要的是,它幫助我抓住很多bug才上線。 在過去的7年,我的主要大企業(yè)項(xiàng)目的自動(dòng)化測(cè)試。 隨著時(shí)間的推移,我沉迷于應(yīng)用自動(dòng)化測(cè)試的想法使用TDD方法響應(yīng)網(wǎng)站的外觀和感覺。 在多年的研究之后,我想出了?蓋倫框架?——一種工具和一種特殊的語(yǔ)言視覺測(cè)試。 這已經(jīng)運(yùn)行了一段時(shí)間,一旦語(yǔ)言變得足夠成熟,我決定做一個(gè)實(shí)驗(yàn)與視覺測(cè)試驅(qū)動(dòng)開發(fā)。
在本文中,我將詳細(xì)描述這個(gè)實(shí)驗(yàn)并提出TDD作為前端開發(fā)的方法。 我們將著眼于新的視覺測(cè)試技術(shù),研究如何充分利用它。
介紹蓋倫框架
盡管新技術(shù),蓋倫框架已經(jīng)被一些大公司,如eBay,SkyScanner,Gumtree和暢銷書。 問,它也被用于測(cè)試?華盛頓郵報(bào)》?的網(wǎng)站。 除了企業(yè)公司,它也被運(yùn)用于網(wǎng)絡(luò)工作室,等?ADCI解決方案?。 框架是開源和承載?Github?,所以任何人都可以參與項(xiàng)目和貢獻(xiàn)代碼。
在加倫的基本測(cè)試概念框架中心檢查所有頁(yè)面元素的位置和大小相對(duì)于彼此。 通過這種方式,您可以描述任何瀏覽器窗口的大小的布局,你不必使用絕對(duì)定位。
視覺檢測(cè)和加倫的概念框架(?查看大版本?)
的?蓋倫規(guī)格?語(yǔ)言是為了像自然英語(yǔ)盡可能,semi-Markdown的方式實(shí)現(xiàn)的。 因此,它看起來(lái)像什么? 好了,假設(shè)你想檢查一個(gè)“登錄”按鈕位于一個(gè)“取消”按鈕,從右邊標(biāo)記的優(yōu)勢(shì),他們是一致的水平。 我們可以把這句話變成蓋倫規(guī)格:
login-button ?near: cancel-button 10px right ?aligned horizontally all: cancel-button
考慮另一個(gè)例子。 如果我們想要檢查一個(gè)標(biāo)志應(yīng)該位于左上角的頭,大約20像素的優(yōu)勢(shì)嗎? 這是你如何做:
logo ?inside: header 17 to 22px top left
我們甚至可以使用快捷鍵:
logo ?inside: header ~ 20 px top left
很多其他檢查類型存在,他們的詳細(xì)描述?官方文檔?。 不是很陡峭的學(xué)習(xí)曲線。 蓋倫規(guī)格的結(jié)構(gòu)很簡(jiǎn)單,一旦你理解它,測(cè)試變得非常容易。 我們將回到我開始時(shí)提到的實(shí)驗(yàn),但首先讓我給你一些見解TDD作為一個(gè)整體。
測(cè)試驅(qū)動(dòng)開發(fā)
TDD已經(jīng)使用了很長(zhǎng)時(shí)間和已被證明是一個(gè)強(qiáng)大的方法構(gòu)建堅(jiān)實(shí)的應(yīng)用程序。 開始時(shí),你可能會(huì)覺得你這是在浪費(fèi)時(shí)間編寫測(cè)試,但以后你會(huì)花更少的時(shí)間找到問題的根源。 更重要的是,您可以專注于小單位的代碼,并確保每個(gè)單元質(zhì)量好。 測(cè)試的數(shù)量將增長(zhǎng)的主要代碼,并從本質(zhì)上講,你會(huì)得到早期反饋任何問題在您的應(yīng)用程序。
一個(gè)概念的視覺測(cè)試驅(qū)動(dòng)開發(fā)
那么,我們?nèi)绾螢镠TML和CSS TDD方式嗎? 顯然,這有點(diǎn)不同于傳統(tǒng)TDD,測(cè)試實(shí)現(xiàn)?白盒。 這就是為什么我說“視覺”這個(gè)詞,與蓋倫框架:我們正在測(cè)試一個(gè)網(wǎng)站是如何在瀏覽器中呈現(xiàn),而我們不是特別關(guān)心它的內(nèi)部結(jié)構(gòu)。 所以,這聽起來(lái)更像是黑盒或灰箱測(cè)試。 在這篇文章中,我將向您展示如何構(gòu)建一個(gè)快速響應(yīng)的web頁(yè)面,編寫布局測(cè)試首先,之前我們甚至有任何頁(yè)面。 要記住的一件事是,我們的測(cè)試也將作為一個(gè)源文檔,說明頁(yè)面應(yīng)該在任何設(shè)備。 記住這一切,讓我們澄清的過程。
設(shè)計(jì)和測(cè)試?
想象應(yīng)該的頁(yè)面。 寫一個(gè)示意圖,編寫一個(gè)測(cè)試。代碼?
實(shí)現(xiàn)了HTML和CSS代碼,通過測(cè)試。重構(gòu)?
提高代碼和測(cè)試。
一個(gè)基本的TDD計(jì)劃(?查看大版本?)
我們要將整個(gè)開發(fā)過程分解成小的迭代。 另一個(gè)重要的規(guī)則:每個(gè)迭代中,我們將只實(shí)現(xiàn)所需的代碼測(cè)試。 這種方式,我們將確保我們的測(cè)試覆蓋率總是接近100%,我們不要分心于事情不是當(dāng)前迭代中聲明。 本文基于視覺TDD實(shí)驗(yàn)?車間購(gòu)物車?。 它是一個(gè)GitHub的項(xiàng)目,因此您可以跟蹤所有的代碼更改。
這個(gè)實(shí)驗(yàn)
想象一下,我們決定建立一個(gè)購(gòu)物車頁(yè)面,我們希望它能夠響應(yīng)。 頁(yè)面的功能在任何在線商店是一樣的:用戶應(yīng)該能夠評(píng)估他們的購(gòu)物項(xiàng)目,進(jìn)行支付或返回。
階段1:畫的要求
我們坐下來(lái),思考所有的細(xì)節(jié),我們想出了這個(gè)草圖:
最初的草圖設(shè)計(jì)(?查看大版本?)
現(xiàn)在看起來(lái)好。 正如您可以看到的,我們有三種類型的草圖:桌面,平板電腦和手機(jī)。 現(xiàn)在我們可以開始實(shí)施測(cè)試。
第二階段:項(xiàng)目配置
對(duì)于本教程,我們不需要任何特殊的IDE——任何文本編輯器都可以。 這將是非常簡(jiǎn)單的。 讓我們創(chuàng)造我們的項(xiàng)目文件夾,?購(gòu)物車,在它創(chuàng)建兩個(gè)文件夾:?網(wǎng)站和?galen-tests。 當(dāng)然,當(dāng)?shù)鼐W(wǎng)絡(luò)服務(wù)器配置會(huì)更好,這樣我們可以通過訪問該頁(yè)面?http://localhost在我們的測(cè)試。 但是因?yàn)槲覀冎挥幸粋€(gè)頁(yè)面,我們可以使用普通文件現(xiàn)在,通過訪問它們文件:/ / /…url。
下載?蓋倫框架和?安裝它?。 蓋倫框架已經(jīng)為L(zhǎng)inux和Mac安裝腳本。如果你是一個(gè)Windows用戶,看一看”?配置蓋倫框架窗口?”。
創(chuàng)建所有的文件夾,我們上面所討論的:
shopping-cart/ ?|-- website/ ?`-- galen-tests/
現(xiàn)在就是這樣。
3.1階段:編寫測(cè)試
讓我們想到我們?nèi)绾畏指畛尚〉牡ぷ鳌?我們首先會(huì)想到的是建立一個(gè)基本的頁(yè)面框架:
頁(yè)面框架草圖(?查看大版本?)
這意味著,目前,我們只有五個(gè)頁(yè)面上的對(duì)象:“頭”,“主要”,“導(dǎo)航”“旗幟面板”和“頁(yè)腳。 “讓我們開始編寫蓋倫測(cè)試骨架。
文章整理來(lái)自網(wǎng)絡(luò)，轉(zhuǎn)載請(qǐng)注明北京網(wǎng)站建設(shè)公司-北京傳誠(chéng)信。
