摘要：設(shè)想下，如果有段程序，自動(dòng)把你打開瀏覽器，然后跳轉(zhuǎn)到百度首頁。分為江湖傳言今年圣誕節(jié)會(huì)發(fā)布，主要是增強(qiáng)對(duì)移動(dòng)端瀏覽器的測試。至于百度搜出來的那坨，誒，，往事不堪回首。這是面向用戶的最終測試。

一般來說對(duì)一個(gè)網(wǎng)站做測試，最直接的方法就是用手點(diǎn)，眼睛看。用手點(diǎn)和眼睛看把網(wǎng)站的功能點(diǎn)都過一遍，比如在百度首頁的搜索框里輸入 “coding”，點(diǎn)擊“百度一下”，用眼睛看會(huì)不會(huì)彈出有關(guān) “coding” 的搜索頁面。不過，你點(diǎn)了2天之后就會(huì)發(fā)現(xiàn)，這些點(diǎn)擊和“眼睛確認(rèn)”是一個(gè)機(jī)械式重復(fù)的過程。

當(dāng)你遇到重復(fù)操作的事情，你就要想想如何讓機(jī)器去做這些事。用人腦去從事這種低等人工智能的活動(dòng)絕對(duì)是種浪費(fèi)。

設(shè)想下，如果有段程序，自動(dòng)把你打開瀏覽器，然后跳轉(zhuǎn)到百度首頁。再輸入框里填充 “coding”，點(diǎn)擊搜索，套轉(zhuǎn)到搜索結(jié)果頁面之后，自動(dòng)確認(rèn)這個(gè)頁面上是否有 “coding” 的字樣。若有，輸出“測試通過”。若無，輸出“測試失敗”。你只需要點(diǎn)開程序，然后去吃個(gè)晚飯，然后回來看測試結(jié)果就好了（我就是這么干的），一切都如此簡單和美妙。

那么，需要什么工具來實(shí)現(xiàn)這個(gè)美妙的過程呢？首先你需要一雙“手”來點(diǎn)擊和一對(duì)“眼”來獲取信息 —— Selenium。 還需要一個(gè)腦子來操縱“手和眼”判斷測試對(duì)錯(cuò) —— Junit。 其實(shí)，Selenium 支持多種語言，比如說，ruby, python, Js, C#。他們都有相應(yīng)成熟的測試框架，由于我用的是用 Java，相應(yīng)的測試框架就用了 Junit 。這點(diǎn)已被前端小哥和 Ruby 大神吐槽致死。前端小哥說，既然你要測頁面為什么不用 JS 呢？因?yàn)榍岸司褪怯?JS 寫的，同源的語言會(huì)更好。 Ruby 大神說，用 Ruby 你會(huì)少寫很多行代碼。 其實(shí)，我那時(shí)就對(duì) Java 熟悉一點(diǎn)，最后用 Java 寫了。 這里，雖然本人沒有親自嘗試過，但我還是想推薦下用 JS。 現(xiàn)在的網(wǎng)站，頁面上會(huì)有著大量的 ajax 請求，頁面的測試必須等待某些頁面元素的更新。在這方面 JS 會(huì)比 Java 方便點(diǎn)。

selenium 是一個(gè)操縱瀏覽器來進(jìn)行測試的框架。分為 Selenium 1 ( RC ), Selenium 2 ( WebDriver ), 江湖傳言今年圣誕節(jié)會(huì)發(fā)布 selenium 3，主要是增強(qiáng)對(duì)移動(dòng)端瀏覽器的測試。還有就是 Selenium IDE 和 Selenium Grid。 這里不介紹，可以看文檔.

Selenium 1 ( RC ), Selenium 2 ( WebDriver ) 的區(qū)別就是對(duì)瀏覽器操縱的方式。 RC 的原理就是通過對(duì)原始的頁面元素中注入一段特定的 JS 代碼來實(shí)現(xiàn)的。 學(xué)過 JS 的人都知道， JS 可以操控 DOM 元素，點(diǎn)擊，刪除，獲取元素屬性和文本。你可以把這些操作看成一個(gè)個(gè) JS 函數(shù)。 只是瀏覽器對(duì)非同源的 JS 有限制， 舉個(gè)簡單的例子， 百度首頁上的 JS 代碼不能與淘寶首頁進(jìn)行交互 （不能訪問它的 cookie 等）。 因此，就需要RC(Remote Control), 將特定的 JS 代碼加到服務(wù)器放回的數(shù)據(jù)中，再發(fā)送給瀏覽器，這樣就避開了同源的問題。 然后瀏覽器運(yùn)行這些 JS 函數(shù)，進(jìn)行測試。

WebDriver 用的方式更為直接，它本身就是瀏覽器的 API，所以是直接對(duì)瀏覽器進(jìn)行操作。無需通過 JS 代理操作。
個(gè)人建議用 WebDriver。 因?yàn)椋瑩?jù)“路邊社”可靠消息 selenium 3 會(huì)逐步拋棄 RC。

這4個(gè)多月了，一直在用 selenium 寫自動(dòng)化測試，由小白到現(xiàn)在稍微熟悉。填了不少坑。 也算是有些心得，接下來如果有時(shí)間，我會(huì)在 coding 開個(gè) selenium-study 的公有項(xiàng)目來具體講解一些實(shí)戰(zhàn)心得。 關(guān)于selenium的學(xué)習(xí)， 最好的教材是 selenium 官方文檔。 如果你的英文不太好，那么百度一下“蟲師 博客園”，里面有很多不錯(cuò)的學(xué)習(xí)材料。 要是開發(fā)中遇到 bug 最好用英文在 google 里搜。 至于百度搜出來的那坨*，誒，，往事不堪回首。

上文提到的自動(dòng)化測試屬于功能測試范疇。所謂功能測試，簡單的說測試網(wǎng)站的功能點(diǎn)是否正常，比如能否注冊和登錄，能否在 coding 發(fā)冒泡，push 代碼等等。這是面向用戶的最終測試。

既然是功能測試，自然是圍繞功能來進(jìn)行用例設(shè)計(jì)。用例大致分為兩個(gè)部分， 操作和表現(xiàn)。就“登錄 coding 網(wǎng)站”這一功能來說， 操作有，輸入個(gè)性后綴或郵箱以及密碼，點(diǎn)擊“登錄”按鈕。相應(yīng)的 表現(xiàn) 為，登錄成功則跳轉(zhuǎn)到個(gè)人中心，同時(shí)輸出提示“歡迎***!”。若失敗，則彈出相應(yīng)的失敗提示。

在編寫程序的時(shí)候， 調(diào)用selenium的接口來進(jìn)行操作，用斷言 (assertX) 來判斷表現(xiàn)是否正確，例如登錄：

loginPage.clearAndSendKeys("#email",email);

loginPage.clearAndSendKeys("#password",password);

loginPage.clickElement(".large.button ", "#project-list");

assertEquals("登錄不成功",baseUrl + "user", loginPage.getDriver().getCurrentUrl());

這里的 loginPage 是我寫的一個(gè) Page 類的實(shí)例。這個(gè)類包括 selenium 部分常用接口的封裝（如清除輸入框并輸入值：clearAndSendKeys(String cssSector, String inputContent)），以及一些常用的小測試用例,如驗(yàn)證頁面提示是否正確， loginPage.verifyHint("用戶名或個(gè)性后綴不能為空");

因?yàn)橛泻芏嗖僮髌鋵?shí)是一系列操作的組合操作，比如，測試討論評(píng)論的通知，創(chuàng)建討論，評(píng)論，驗(yàn)證通知。多用點(diǎn)面向?qū)ο笤O(shè)計(jì)好點(diǎn)（方便添加新用例），但也不必全用。如：

createTopic(zombiePage, topic);
commentTopic(ciwangPage, topic, "@" + zombieUser.getUserName());
Notification atSomeoneNotification = new Notification(notificationFileReader.getEmailIconClass(), ciwangUser, ciwangUser.getUserName()+ " 在 "+ topic.getTopicTitle() + " 的評(píng)論中提到了你。", zombieUser, topicFileReader.getTopicTitleInDetailPage() ,topic.getTopicTitle() );
notificationTest.verifyForTwoLinkFormat(atSomeoneNotification, "討論@某人",notificationFileReader.getAtSomeoneItemIcon());

如果想要對(duì)元素進(jìn)行操作，必須先定位到那個(gè)元素。 selenium 有很多種定位的方法：

其中，功能最強(qiáng)大的是 xpath 和 cssSelector，已覆蓋其他接口的功能。 cssSelector 寫起來比 xpath 要簡潔而且易于封裝。推薦使用 cssSelector 定位。

cssSelector 教程就不寫了。有 W3Cschool 在，我就不班門弄斧。講下一些自己的“最佳實(shí)踐”吧。

1.盡量寫的短，如果元素有 id， 千萬別客氣

2.選用有含義的類名

如上圖的任務(wù)，就該用 “.project-task”。之所以說上述 2 點(diǎn)，是因?yàn)榍岸顺Ｓ懈膭?dòng)。因此，選擇短且有含義的類名， 可以規(guī)避很大一部分改動(dòng)的風(fēng)險(xiǎn)。 但也不是全部， 上個(gè)月有一天，前端小哥突然心血來潮。把冒泡的類名由 “tweet” 改成了 “bubbling”，改了我兩個(gè)小時(shí)，才讓程序又跑起來。 因此，還需要第三點(diǎn)。

3.把選擇器寫到配置文件里，然后用一個(gè) fileReader 類去讀。如

public void sendComment(Page zombiePage, String commentContent){
    zombiePage.sendKeys(topicFileReader.getCommentInput(),commentContent);
    zombiePage.clickElement(topicFileReader.getCommentButton());
    assertTrue("評(píng)論沒有發(fā)送成功", zombiePage.waitElementDisappear(topicFileReader.getEmptyTopicComments()));
}

這個(gè)月有一天， 討論的評(píng)論框被改掉了。我只需該兩行配置文件，代碼就可以跑了。

commentInput = #comment-form textarea
commentButton = #comment-form .clockwise

寫選擇器還有一個(gè)好處就是，代碼的可讀性，讓別人知道選擇器的意義。

今天寫到這里。這篇水文能看到最后的，，我想，應(yīng)該是真愛吧。如果有問題和講得不實(shí)的地方歡迎登錄 coding 私信我 (ciwang)。 Anyway, 歡迎大家拍磚

Coding 官方技術(shù)博客: http://blog.coding.net/
Coding 官網(wǎng) : https://coding.net