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