測試響應網(wǎng)站是一個艱難的任務。 直到現(xiàn)在,實現(xiàn)跨瀏覽器的一個穩(wěn)定的和可維護的自動化解決方案和跨設備測試響應的布局已經(jīng)幾乎不可能。 但是如果我們有什么 一個機會寫視覺響應測試網(wǎng)站 嗎? 如果我們能描述應用程序的外觀和感覺,這直接進入我們的測試?

也在考慮這個問題,我決定看看另一個有趣的視覺測試。 在相當長的一段時間我一直的粉絲 測試驅(qū)動開發(fā)(TDD)方法。 它幫助我在日常的編程工作。 TDD使我能夠形式化的任務,以確保一切是根據(jù)需求來實現(xiàn)的。

更重要的是,它幫助我抓住很多bug才上線。 在過去的7年,我的主要焦點一直在測試自動化的大企業(yè)項目。 隨著時間的推移,我沉迷于應用自動化測試的想法使用TDD方法響應網(wǎng)站的外觀和感覺。 在多年的研究之后,我想出了 蓋倫框架 ——一種工具和一種特殊的語言視覺測試。 這已經(jīng)運行了一段時間,一旦語言變得足夠成熟,我決定做一個實驗與視覺測試驅(qū)動開發(fā)。

01-responsive-design-opt

在這篇文章中,我將詳細描述這個實驗并提出TDD作為前端開發(fā)的方法。 我們將著眼于新的視覺測試技術(shù),研究如何充分利用它。

介紹蓋倫框架

盡管新技術(shù),蓋倫框架已經(jīng)被一些大公司,如eBay,SkyScanner,Gumtree和暢銷書。 問,它也被用于測試 華盛頓郵報》 的網(wǎng)站。 除了企業(yè)公司,它也被運用于網(wǎng)絡工作室,等 ADCI解決方案 。 框架是開源和承載 GitHub ,所以任何人都可以參與項目和貢獻代碼。

在加倫的基本測試概念框架中心檢查所有頁面元素的位置和大小相對于彼此。 通過這種方式,您可以描述任何瀏覽器窗口的大小的布局,你不必使用絕對定位。

A concept of visual testing with Galen Framework

視覺檢測和加倫的概念框架( 查看大版本 )

的 蓋倫規(guī)格 語言是為了像自然英語盡可能,semi-Markdown的方式實現(xiàn)的。 因此,它看起來像什么? 好了,假設你想檢查一個“登錄”按鈕位于一個“取消”按鈕,從右邊標記的優(yōu)勢,他們是一致的水平。 我們可以把這句話變成蓋倫規(guī)格:

login-button? near: cancel-button 10px right? aligned horizontally all: cancel-button

考慮另一個例子。 如果我們想要檢查一個標志應該位于左上角的頭,大約20像素的優(yōu)勢嗎? 這是你如何做:

logo? inside: header 17 to 22px top left

我們甚至可以使用快捷鍵:

logo? inside: header ~ 20 px top left

很多其他檢查類型存在,他們的詳細描述 官方文檔 。 不是很陡峭的學習曲線。 蓋倫規(guī)格的結(jié)構(gòu)很簡單,一旦你理解它,測試變得容易。 我們將回到我開始時提到的實驗,但首先讓我給你一些見解TDD作為一個整體。

測試驅(qū)動開發(fā)

TDD已經(jīng)使用了很長時間和已被證明是一個強大的方法構(gòu)建堅實的應用程序。 一開始,你可能會覺得你這是在浪費時間編寫測試,但以后你會花更少的時間找到問題的根源。 更重要的是,您可以專注于小單位的代碼,并確保每個單元質(zhì)量好。 測試的數(shù)量將增長的主要代碼,并從本質(zhì)上講,你會得到早期反饋任何問題在您的應用程序。

一個概念的視覺測試驅(qū)動開發(fā)

那么,我們?nèi)绾螢镠TML和CSS TDD方式嗎? 顯然,這有點不同于傳統(tǒng)TDD,測試實現(xiàn) 白盒 。 這就是為什么我說“視覺”這個詞,與蓋倫框架:我們正在測試一個網(wǎng)站是如何在瀏覽器中呈現(xiàn),而我們不是特別關(guān)心它的內(nèi)部結(jié)構(gòu)。 所以,這聽起來更像是黑盒或灰箱測試。 在這篇文章中,我將向您展示如何構(gòu)建一個快速響應的web頁面,編寫布局測試之前我們甚至有任何頁面。 要記住的一件事是,我們的測試也將作為一個源文檔,說明頁面應該在任何設備。 記住這一切,讓我們澄清的過程。

1.?設計和測試
想象應該的頁面。 寫一個示意圖,編寫一個測試。

2.?代碼
實現(xiàn)了HTML和CSS代碼,通過測試。

3.?重構(gòu)
提高代碼和測試。

一個基本的TDD計劃( 查看大版本 )

A basic TDD scheme

我們要將整個開發(fā)過程分解成小的迭代。 另一個重要的規(guī)則:每個迭代中,我們將只實現(xiàn)所需的代碼測試。 這種方式,我們將確保我們的測試覆蓋率總是接近100%,我們不要分心于事情不是當前迭代中聲明。 本文基于視覺TDD實驗 車間購物車 。 它是一個GitHub的項目,因此您可以跟蹤所有的代碼更改。

這個實驗

想象一下,我們決定建立一個購物車頁面,我們希望它能夠響應。 頁面的功能在任何在線商店是一樣的:用戶應該能夠評估他們的購物項目,進行支付或返回。

階段1:畫的要求

我們坐下來,思考所有的細節(jié),我們想出了這個草圖:

Initial sketch of design

最初的草圖設計( 查看大版本 )

現(xiàn)在看起來好。 正如您可以看到的,我們有三種類型的草圖:桌面,平板電腦和手機。 現(xiàn)在我們可以開始實施測試。

第二階段:項目配置

對于本教程,我們不需要任何特殊的IDE——任何文本編輯器都可以。 這將是非常簡單的。 讓我們創(chuàng)造我們的項目文件夾, 購物車,在它創(chuàng)建兩個文件夾: 網(wǎng)站和 galen-tests。 當然,當?shù)鼐W(wǎng)絡服務器配置會更好,這樣我們可以通過訪問該頁面 http://localhost在我們的測試。 但是因為我們只有一個頁面,我們可以使用普通文件現(xiàn)在,通過訪問它們 文件:/ / /…url。

下載 蓋倫框架和 安裝它 。 蓋倫框架已經(jīng)為Linux和Mac安裝腳本。如果你是一個Windows用戶,看一看” 配置蓋倫框架窗口 ”。

創(chuàng)建所有的文件夾,我們上面所討論的:

shopping-cart/? |-- website/? `-- galen-tests/

現(xiàn)在就是這樣。

3.1階段:編寫測試

讓我們想到我們?nèi)绾畏指畛尚〉牡ぷ鳌?我們首先會想到的是建立一個基本的頁面框架:

Page skeleton sketch

頁面框架草圖( 查看大版本 )

這意味著,目前,我們只有五個頁面上的對象:“頭”,“主要”,“導航”“旗幟面板”和“頁腳。 “讓我們開始編寫蓋倫測試骨架。 在文件夾 galen-tests,創(chuàng)建另一個文件夾命名 規(guī)格。 在這篇文章中,我們將保留所有蓋倫規(guī)范文件。

文章整理來自網(wǎng)絡，轉(zhuǎn)載請注明北京網(wǎng)站建設公司-北京傳誠信，翻譯不好，請見諒！