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