整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
同瀏覽器對網(wǎng)頁默認(rèn)的組件解析樣式不一致，而且不夠美觀，網(wǎng)頁樣式開發(fā)需要大量時間，今天介紹一款優(yōu)雅的 CSS 框架。
Pico.css 是一個簡單輕量化的 CSS UI 框架，最大的特點(diǎn)是樣式都基于 HMTL 原始的標(biāo)簽名和內(nèi)置的屬性，少用甚至是不用 class 來定義樣式，寫出來的代碼語義清晰，可維護(hù)性強(qiáng)，能夠幫助開發(fā)者構(gòu)建自己的 UI 系統(tǒng)，也可以直接用于快速的小型項(xiàng)目中。
Pico-css 官網(wǎng)
截止發(fā)文日期，Pico.css 在 Github 上已經(jīng)有高達(dá) 3898 個 Star。
引入 Pico.css 最簡單直接的方式就是下載后直接引入一個樣式文件：
Pico-css cdn 引入
當(dāng)然也可以通過 npm 安裝：
Pico-css npm 安裝
然后就可以編寫 html 代碼了。
想要做一個輸入框和提交表單，往往需要這樣的代碼：
常規(guī)實(shí)現(xiàn) form 表單代碼
而使用 Pico.css，只需要：
Pico-css 實(shí)現(xiàn)表單
Pico.css 內(nèi)置了很多基礎(chǔ)的組件，包括常用表單控件、表格、彈窗、導(dǎo)航菜單、卡片等，代碼非常簡潔，比如實(shí)現(xiàn)一個美觀的進(jìn)度條，只需要這點(diǎn)代碼：
Pico-css 實(shí)現(xiàn)進(jìn)度條
Pico.css 內(nèi)置了淺色和深色兩套主題，使用方法非常簡單，給父級元素添加屬性data-theme。
切換主題
官網(wǎng)還有很多代碼例子，比如編寫一個美觀大氣的登錄界面，html 代碼十分簡潔，仿佛回到了剛剛開始學(xué)習(xí) html 語法的時代。
登錄界面
通過 CSS 文件的源碼，可以看到樣式的選擇器大多通過 HTML 元素標(biāo)簽名、內(nèi)置的屬性以及自定義屬性來命中，這樣就規(guī)避了常規(guī)的只使用 class 來區(qū)分的“命名地獄”，是一種非常好的網(wǎng)頁編程思路。
Pico-css 源碼
面向?qū)兇?HTML 有極致追求的開發(fā)者，Pico.css 還提供了 classless 版本，這個版本將一個 class 都沒有，完全使用元素標(biāo)簽名和屬性編寫網(wǎng)頁。
在項(xiàng)目中使用 Pico.css 源自于一次快速的營銷頁需求，需要做簡單的幾個帶有輸入交互的頁面，使用 bootstrap 這樣龐大的框架顯然有點(diǎn)笨重了，如果使用當(dāng)前流行的能夠按需引入的 Vue UI 組件庫，又免不了要用 Vue.js 來工程化。只是做幾個簡單的頁面，沒有必要用中大型項(xiàng)目的標(biāo)配，考慮到目前市面上大多數(shù) UI 框架都過度封裝，堆疊了很多包含各種語義的 class 名，不僅會讓頁面加載變慢，而且會導(dǎo)致更長的樣式計算時間，最終還是找到了適合這樣場景的 Pico.css。
css 樣式的寫法很自由，目前前端開發(fā)存在一個趨勢，為了做精美的界面，需要花費(fèi)大量的時間來寫樣式，為了樣式可以復(fù)用，絞盡腦汁給 class 起名字，甚至網(wǎng)上還有各種 class 命名規(guī)范，這可能導(dǎo)致了大量的樣式被覆蓋，很多時候 class 屬性的名稱，甚至比樣式的代碼還要多，極難維護(hù)。
Pico.css 的出現(xiàn)給這樣的開發(fā)現(xiàn)狀提供了一種新思路，不僅可以直接用在實(shí)際項(xiàng)目中，也能夠作為構(gòu)建自己的 UI 庫的基礎(chǔ)樣式。
Pico.css 是一個免費(fèi)開源的項(xiàng)目，源碼基于 MIT 開源協(xié)議托管在 Github 上，任何個人和公司都可以免費(fèi)下載使用。
關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。
↓↓點(diǎn)擊查看本次分享的網(wǎng)址。
Pico.css - 簡單優(yōu)雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標(biāo)簽來做界面｜那些免費(fèi)的磚
Node JS環(huán)境、Protractor工具、Jasmine框架、JavaScript語言
Protractor是作為Angular JS應(yīng)用程序的測試工具，簡單的理解就是驅(qū)動腳本來實(shí)現(xiàn)客戶端到服務(wù)器端測試的一種工具，也就是我們常聽到的一個詞，e2e(end to end),也就是端到端的測試，其中Angular JS是一款優(yōu)秀的前端開發(fā)框架，當(dāng)時的開發(fā)團(tuán)隊(duì)就額外設(shè)計出Protractor這樣一個小工具便于測試基于Angular JS開發(fā)的產(chǎn)品，它的構(gòu)建基于Selenium WebDriver之上，所以使用起來你會發(fā)現(xiàn)很多方法和不同語言下的webdriver操作類似，至少形式上看上去很像，而且是圍繞著Selenium WebDriver進(jìn)行封裝的，因此，Protractor中包含的每一個feature對于Selenium WebDriver都是可用的。但是需要注意一點(diǎn)，假如我設(shè)計的自動化代碼并不是基于Angular JS開發(fā)的，那么就會有個疑問，是不是還可以鐘情于這款框架呢，答案是肯定的，我們只需要在js代碼中加入這樣一行“browser.ignoreSynchronization = true”，就可以跳過Angular JS產(chǎn)品的驗(yàn)證了。當(dāng)然，既然人家最初設(shè)計目的是為了測試基于Angular JS的產(chǎn)品，它會提供了獨(dú)享的一些方法，例如waitforangular()
我們還會接觸到另外一個詞“Jasmine”,其實(shí)它是Protractor內(nèi)部支持的三種行為驅(qū)動開發(fā)中的一種，具體有Jasmine/Mocha/Cucumber，也就是我們理解上的自動化測試框架的三種，我聽過前兩種，第三種沒用過，而且要注意一點(diǎn)protractor默認(rèn)使用的就是Jasmine，自動化測試框架主要是提供語法、提供流程管理模塊、和報告工具，主要也就是這三點(diǎn)，這些框架都是基于JavaScript和Nodejs的，Nodejs就是支持javascript的運(yùn)行環(huán)境。
接下來簡單看下怎么搭建一個基于Protractor測試框架的測試環(huán)境，用來寫我們的自動化測試代碼。
第一步毫無疑問，安裝Node.js，安裝Node.js并不難，可以直接到 https://nodejs.org/en/ 網(wǎng)站上下載相應(yīng)的安裝包，這里選擇的是windows的安裝包，有的網(wǎng)絡(luò)會下載比較慢，雖然只有12M左右（親身經(jīng)歷，還會經(jīng)常中斷。。。）。
其中npm package manager是我們安裝Node.js最為重要的目的，當(dāng)然，Add to PATH是幫助我們省去了配置變量的環(huán)節(jié)，也是很重要的，安裝步驟不多贅述，如果圖方便的話，閉上眼睛一路Next下去就好。
安裝完成后，打開命令窗口，使用命令 “npm —version” 查看Node.js是否安裝成功。
由于這里需要使用pratractor，所以需要使用命令 “npm install —global protractor” 或者 “npm install -g protractor” 全局安裝protractor，為什么是全局安裝而不是本地安裝，因?yàn)槲覀冞@里只需要使用CLI(Command Line Interface) 而不需要用require將protractor包含進(jìn)去，如果需要后者，則需要再在本地安裝一次，當(dāng)然，如果不放心，也完全可以將全局和本地都安裝一次，以后如果需要用，就可以直接用了，這里作為例子來看，只需要全局安裝即可。
這時候，可以試著啟用webdriver, 注意，如果這里是先做了webdriver-manager update操作，而直接輸入 webdriver-manager start則會不成功，它會提示 java 不能識別，它既不是內(nèi)部也不是外部命令。而緊接著才安裝JDK的話，在相同的command window中也同樣會持續(xù)這個提示，此時只需要重新開一個新的command window即可。
這時候可以發(fā)現(xiàn)，webdriver 啟動了，接下來我們試著開始寫case來看下是不是可以運(yùn)行了。
我們一定要編寫的文件只有兩個，一個是configure.js，當(dāng)然文件名是隨意編寫的，也可以叫做config.js，用做什么呢，目的有兩個，一個是指定4444端口作為selenium調(diào)用服務(wù)的配置，另一個是作為執(zhí)行測試用例的入口文件，也就是可以在這個文件內(nèi)指定運(yùn)行哪些測試用例。
代碼如下：
(function () {
exports.config = {
seleniumAddres : 'http://localhost:4444/wd/hub',
specs: 'testcase.js'
}
}
)()
另一個文件也就是我們的測試用例文件，名字叫做testcase.js，當(dāng)然名字也是可以用別的，代碼如下（代碼是可以直接運(yùn)行的哦），里面有一條自動化測試用例，用于測試光宇游戲社區(qū)點(diǎn)擊登錄按鈕之后，輸入用戶名和密碼后，會出現(xiàn)復(fù)雜驗(yàn)證碼彈層，也就是我們的期望值。
(function (){
var requires = require('./testdata.js')
describe('XXX_Community', function () {
var url = requires.urls.AngularJSURL
beforeEach(function() {
browser.ignoreSynchronization = true
browser.manage().window().maximize();
browser.get(url)
});
it('Account_Login_WithPassword_001', function () {
element(by.xpath('//*[@id="js_pubtoplogin_div"]/div[1]/a')).click()
element(by.id('Account')).sendKeys('xieshuyu')
element(by.id('Password')).sendKeys('xieshuyu')
var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(element(by.id('sigin'))), 5000);
element(by.id('sigin')).click()
expect(element(by.xpath('/html/body/div[8]')).isPresent()).toBeTruthy()
}
)
})
})()
如果有一定代碼經(jīng)驗(yàn)的同學(xué)，其實(shí)看這段代碼和我們之前的自動化用例代碼差別并不是很大，變化的就是形式和語言。
1、describe就是我們通常講的自動化測試用例集，it就是自動化測試用例，兩個的實(shí)質(zhì)就是js方法，it當(dāng)中包含了測試用例的內(nèi)容，包含了操作步驟和斷言；
2、如果要停止運(yùn)行某一個case，只需用xit()代替it()，同理在describe前加’x’也可以停止整個describe封裝的運(yùn)行；
3、引號中的description用來描述case行為，便于在查看報告時理解case行為；
4、expect()用于判斷結(jié)果，一個case中可以有多個expect()，只有當(dāng)所有的expect()都通過的時候，這個case才可以通過，否則會提示失敗，常見匹配器如下：
expect(x).toEqual(y); 當(dāng)x和y相等時候通過
expect(x).toBe(y); 當(dāng)x和y是同一個對象時候通過
expect(x).toMatch(pattern); x匹配pattern（字符串或正則表達(dá)式）時通過
expect(x).toBeDefined(); x不是undefined時通過
expect(x).toBeUndefined(); x 是 undefined時通過
expect(x).toBeNull(); x是null時通過
expect(x).toBeTruthy(); x和true等價時候通過
expect(x).toBeFalsy(); x和false等價時候通過
expect(x).toContain(y);x（數(shù)組或字符串）包含y時通過
expect(x).toBeLessThan(y); x小于y時通過
expect(x).toBeGreaterThan(y); x大于y時通過
expect(function(){fn();}).toThrow(e); 函數(shù)fn拋出異常時候通過
5、關(guān)于element元素的定位，常用方法如下（暫時用到這么多）：
element(by.xpath(‘//*[@id=”js_pubtoplogin_div”]/div[1]/a’))
element(by.id(‘xieshuyu’))
element(by.name(‘xieshuyu’))
element(by.className(‘xieshuyu’))
element(by.model(‘xieshuyu’)) //根據(jù)ng-model名來查找元素，Angular JS專用（還記得上文提到的嗎，呵呵呵）
element(by.binding(‘xieshuyu’)) //查找綁定了指定名的元素，Angular JS專用
element(by.repeater(‘xieshuyu’)) //查找指定repeater中的元素，Angular JS專用
看到這，是不是有點(diǎn)小興奮了呢，哈哈哈！其實(shí)執(zhí)行方式很簡單，前提是環(huán)境已經(jīng)配置正確了，在文件路徑下切換到對應(yīng)的cmd窗口，然后輸入“protractor config.js —config spec —disableChecks”，記得加上—disableChecks，會避免一些不必要的檢查。
然后你就可以谷歌瀏覽器被打開了，然后執(zhí)行我們測試用例的文件，至少從視覺效果上來看，執(zhí)行速度高于利用java來寫的自動化代碼，速度很快，但是有一個缺點(diǎn)，至少我理解上是這樣的，我們都知道javascript是一種前端流行語言，是不支持后臺操作的，就連數(shù)據(jù)庫連接和執(zhí)行sql語句也是不支持的，所以我們自動化流程中可能用到的數(shù)據(jù)庫操作是沒辦法利用它實(shí)現(xiàn)的，但這里會有一個問題值得討論，我們的UI端的自動化是否需要或者有必要連接后臺來模擬一些用例的前提條件，以后再寫另外的一篇博客來討論吧，在這一句兩句也說不清楚。
如果有同學(xué)看到這里，會不會有個疑問，也就是有沒有發(fā)現(xiàn)我們的代碼是沒有任何語句來指定谷歌瀏覽器驅(qū)動的地方，那怎么在輸入“protractor config.js —config spec —disableChecks”之后就自動打開chrome進(jìn)行自動化測試了呢。其實(shí)答案就是特別簡單，因?yàn)槿思襭rotractor支持的默認(rèn)瀏覽器就是chrome，還有一點(diǎn)，我想到也就是nodejs環(huán)境本身就是一個基于Chrome V8引擎的。
文中提到的代碼只是一個簡單的自動化測試用例demo，用于說明利用NodeJS環(huán)境+Protractor工具+Jasmine框架+JavaScript語言是可以做到UI的自動化，而且效果還不錯的，之后會陸續(xù)更新的。如果有什么說的不準(zhǔn)確的地方，歡迎留言!
—————————————————————————————————————
給大家推薦一個學(xué)習(xí)資料分享群（574253227），里面大牛已經(jīng)為我們整理好了許多的學(xué)習(xí)資料，有自動化，接口，性能等等的學(xué)習(xí)資料！
站和移動用戶應(yīng)用程序設(shè)計范圍內(nèi)的UI工具包是一組設(shè)計元素，例如：按鈕，導(dǎo)航欄，字段框，下拉菜單，復(fù)選框，單選按鈕，列布局，圖標(biāo)，等等，通常采用分層PSD格式（Adobe Photoshop）。UI套件成為用戶界面設(shè)計人員在網(wǎng)站和移動應(yīng)用程序上工作的主要彈藥。UI工具包可以節(jié)省時間，并為項(xiàng)目提供新的參考。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
