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

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

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

01-responsive-design-opt

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

介紹蓋倫框架

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

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

A concept of visual testing with Galen Framework

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

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

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

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

logo? inside: header 17 to 22px top left

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

logo? inside: header ~ 20 px top left

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

測試驅動開發

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

一個概念的視覺測試驅動開發

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

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

2.?代碼
實現了HTML和CSS代碼,通過測試。

3.?重構
提高代碼和測試。

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

A basic TDD scheme

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

這個實驗

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

階段1:畫的要求

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

Initial sketch of design

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

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

第二階段:項目配置

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

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

創建所有的文件夾,我們上面所討論的:

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

現在就是這樣。

3.1階段:編寫測試

讓我們想到我們如何分割成小的迭代工作。 我們首先會想到的是建立一個基本的頁面框架:

Page skeleton sketch

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

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

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