[Web] 使用 Selenium IDE 來做簡單的 web automation

[Web] 使用 Selenium IDE 來做簡單的 web automation

之前就有想要做個程式,可以自動地把痞客邦的網誌備份下來,

不過一直沒做 (其實也沒找到好的方法)…

今天學了一點 Selenium 這個工具,

正好可以拿來試驗一下這個 web automation 工具的效果囉~

 

Selenium 是一個 web automation 的工具,可以在網頁上自動操作,

因此可以拿來做網頁的自動化測試,或是做一些一般性常做的操作。

這次我用到的只有 Selenium IDE 的部分,web driver 的部分都還沒有用到。

 


1. 下載 Selenium IDE plugin

Selenium IDE 是一個 Firefox 的 plugin,可以幫忙錄製使用者在網頁上的操作動作,

之後就可以重播這些動作,相當方便~

(不過目前只支援 Firefox… 像我習慣用 Chrome 的就殘念了,

只能在做這個 automation 的時候改用 Firefox…)

 

先到 Selenium 官網的下載頁,找到 Selenium IDE plugin,

我抓的是 Selenium IDE 2.8 plugin,下載後儲存成 selenium-ide-2.8.0.xpi~

 

2. 安裝 Selenium IDE

打開 Firefox > 工具 > 附加元件,會出現附加元件管理員。

點下上方的設定圖示 > 從檔案安裝附加元件,再選擇剛剛的 selenium-ide-2.8.0.xpi:

Screen Shot 2015-03-03 at 下午2.40.27

 

按下立刻安裝:

Screen Shot 2015-03-03 at 下午2.40.50

 

裝好後重新啟動 Firefox:

Screen Shot 2015-03-03 at 下午2.41.02

 

重開 Firefox 之後,在工具那邊就可以看到 Selenium IDE 的項目了~

Screen Shot 2015-03-03 at 下午2.41.21  

 

3. 執行 Selenium IDE

因為我們要處理的網頁是痞客邦,因此可以先開 Firefox 連到痞客邦的登入畫面

接著執行 Firefox > 工具 > Selenium IDE,就會跳出 Selenium IDE 的視窗~

Screen Shot 2015-03-03 at 下午6.35.00  

 

預設情況下,Selenium IDE 一開啟就會開始錄製動作了,

右上角的紅色圈圈代表了現在是否有在錄製,不過因為有在錄和沒在錄的圖示很像,

通常我都會游標移過去,如果正在錄就會寫 Now Recording 比較穩當~

接下來在網頁上的動作都會被錄下來,因此要小心不要做多餘的動作。

 

在帳號密碼那邊都輸入好之後,按下「登入」按鈕~

再回到 Selenium IDE 的畫面,可以看到它記錄了開啟網頁、輸入帳號密碼和按下登入鍵的動作:

Screen Shot 2015-03-03 at 下午6.49.28  

 

按工具列裡的 Play current test case 執行 一下,看看是不是能自動登入網頁…

居然失敗了!錯誤的地方會用紅色標示出來:

Screen Shot 2015-03-04 at 下午6.26.17  

 

想知道為什麼錯誤,可以點一下 Log 的頁面,看看紅色的訊息寫些什麼…

說是 input-username 這個元素不存在:

Screen Shot 2015-03-04 at 下午6.28.35  

 

看一下網頁的畫面就可以知道問題在哪裡:

因為上次已經登入過了,因此登入頁並不會有帳號密碼欄給你輸入。

簡單的解決方法,是在最上面加上一個登出的動作~

在 Table 裡面,在最上面的那個動作上按右鍵 > Insert New Command:

Screen Shot 2015-03-04 at 下午6.35.26

 

插入一個 open 網頁的動作,Target 就設成登出的網址 http://panel.pixnet.cc/logout:

Screen Shot 2015-03-04 at 下午6.36.18  

 

再測試一下,不管執行幾次都能成功地先登出再登入了~

接著點選管理後台 > 匯入匯出備份 > 匯出備份檔,再回到 Selenium IDE 來看看,

發現它記錄了好幾個步驟: 

Screen Shot 2015-03-04 at 下午6.43.28  

 

但老實說,滑鼠移到匯出備份檔的連結時,

就已經秀出網址是 http://panel.pixnet.cc/blog/export 了,

因此先按 Delete 砍掉那幾個麻煩的動作,直接加一個 open 的動作比較快:

Screen Shot 2015-03-04 at 下午11.47.22    

 

測試一下,確定可以成功的登入後進到匯出的頁面~

接著還是按下錄製動作的按鈕,在網頁上按下「下一步」的按鈕開始匯出,

等到備份檔準備好時,會出現下面的對話框:

Screen Shot 2015-03-05 at 上午12.09.56  

 

按下確定,繼續按「匯出」按鈕,會跳出要儲存檔案的對話框。

至此 Selenium 錄製動作也該停止了,回到 Selenium IDE 停止錄製,

看看剛剛錄製了哪些動作:

Screen Shot 2015-03-05 at 上午12.18.11  

 

執行看看,發現 assertAlert 這個動作被標成紅色,

但網頁上的匯出動作還是會繼續進行,最後會出現「匯出」的按鈕但沒有被按下:

Screen Shot 2015-03-05 at 上午12.23.07  

 

這邊的紅色錯誤是因為前面的 next-button 的 clickAndWait 的動作,

在跳轉頁面開始做匯出時就已經結束了,

因此接著就立刻檢查有無 alert 視窗 (自然是沒有) 而失敗…

嗯…要怎麼等待匯出完成,才做 assertAlert 的動作呢?

稍微瞄一下網頁的原始碼,

「匯出」按鈕 (export-status-submit) 只有在完成匯出時才會出現,

因此我們可以加一個 waitForVisible 的動作,

等待這個按鈕可見之後,再往下執行:

Screen Shot 2015-03-05 at 上午12.36.07  

 

再重新執行一次,這次可以成功的匯出,最後會跳出檔案儲存對話框:

Screen Shot 2015-03-05 at 上午12.42.26  

 

Selenium 是沒辦法幫我們按那個對話框的按鈕的 (已經超出網頁的範圍),

因此整個自動化的過程算是完成了,不過最後的 clickAndWait 還是會是紅色的,

因為它在等待跳轉頁面,但事實上不會有頁面跳轉…

想追求完美的話,就把這個動作改成 click 就行了~

Screen Shot 2015-03-05 at 上午12.49.04  

 

下面將這個 Test case 的內容列出來作參考:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://www.pixnet.net/" />
<title>export_pixnet_blog</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">export_pixnet_blog</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>http://panel.pixnet.cc/logout</td>
<td></td>
</tr>
<tr>
<td>open</td>
<td>/</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=input-username</td>
<td>myusername</td>
</tr>
<tr>
<td>type</td>
<td>id=input-password</td>
<td>mypassword</td>
</tr>
<tr>
<td>clickAndWait</td>
<td>id=login-send</td>
<td></td>
</tr>
<tr>
<td>open</td>
<td>http://panel.pixnet.cc/blog/export</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>id=next-button</td>
<td></td>
</tr>
<tr>
<td>waitForVisible</td>
<td>export-status-submit</td>
<td></td>
</tr>
<tr>
<td>assertAlert</td>
<td>備份檔產生完成,請按右下角「下載備份檔」下載您的備份檔</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=export-status-submit</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>

 

之後想要備份痞客邦的網誌時,只要執行一下這個 test case,

就能很方便的做好囉 (自己只需要去點最後的檔案下載確定鈕)~

Selenium IDE 的初次使用,也算是圓滿成功囉~~^^

 

 

(本頁面已被瀏覽過 4,460 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料