響應(yīng)網(wǎng)站網(wǎng)站設(shè)計(jì)及草圖。

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

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

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

01-responsive-design-opt

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

介紹蓋倫框架

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

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

A concept of visual testing with Galen Framework

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

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

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

測(cè)試驅(qū)動(dòng)開(kāi)發(fā)

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

一個(gè)概念的視覺(jué)測(cè)試驅(qū)動(dòng)開(kāi)發(fā)

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

1.設(shè)計(jì)和測(cè)試
想象應(yīng)該的頁(yè)面。 寫(xiě)一個(gè)示意圖,編寫(xiě)一個(gè)測(cè)試。

2.代碼
實(shí)現(xiàn)了HTML和CSS代碼,通過(guò)測(cè)試。

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

一個(gè)基本的TDD計(jì)劃( 查看大版本 )

A basic TDD scheme

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

這個(gè)實(shí)驗(yàn)

想象一下,我們決定建立一個(gè)購(gòu)物車(chē)頁(yè)面,我們希望它能夠響應(yīng)。 頁(yè)面的功能在任何在線(xiàn)商店是一樣的:用戶(hù)應(yīng)該能夠評(píng)估他們的購(gòu)物項(xiàng)目,進(jìn)行支付或返回。

階段1:畫(huà)的要求

我們坐下來(lái),思考所有的細(xì)節(jié),我們想出了這個(gè)草圖:

Initial sketch of design

最初的草圖設(shè)計(jì)( 查看大版本 )

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

第二階段:項(xiàng)目配置

對(duì)于本教程,我們不需要任何特殊的IDE——任何文本編輯器都可以。 這將是非常簡(jiǎn)單的。 讓我們創(chuàng)造我們的項(xiàng)目文件夾, 購(gòu)物車(chē),在它創(chuàng)建兩個(gè)文件夾: 網(wǎng)站和 galen-tests。 當(dāng)然,當(dāng)?shù)鼐W(wǎng)絡(luò)服務(wù)器配置會(huì)更好,這樣我們可以通過(guò)訪(fǎng)問(wèn)該頁(yè)面 http://localhost在我們的測(cè)試。 但是因?yàn)槲覀冎挥幸粋€(gè)頁(yè)面,我們可以使用普通文件現(xiàn)在,通過(guò)訪(fǎng)問(wèn)它們 文件:/ / /…url。

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

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

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

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

3.1階段:編寫(xiě)測(cè)試

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

Page skeleton sketch

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

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

文章整理來(lái)自網(wǎng)絡(luò)，轉(zhuǎn)載請(qǐng)注明北京網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)，翻譯不好，請(qǐng)見(jiàn)諒！

當(dāng)前標(biāo)題：響應(yīng)網(wǎng)站網(wǎng)站設(shè)計(jì)及草圖。
本文路徑：http://www.muchs.cn/news47/78897.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)