翻了一下第一次碰 Selenium2010 年的事了,當時是在 Windows 上的 Firefox 4 (4!) 用 Selenium IDE 開始的。

這次是連環境都不一樣了,寫篇文章記錄一下。

1. 在 mac 上裝最新版的 JAVA JDK , JDK 和 JRE 不一樣的地方在於 JDK 是命令列可以用的那個, JRE 是瀏覽器可以用的;如果 JRE 是最新版但 JDK 不是的話會在後續的步驟出錯,我就遇到了。裝好之後用 iTerm2 確認 java -version 有回傳 1.8 的版號即可。

2. 分別把 selenium server standalone 和 chromedriver 抓下來, selenium server standalone 我用的是官網提供的最新版 3.4.0 (已經到 3 了!); chromedriver 目前的最新版是 2.29 ,抓下來 unzip 解壓縮以後和 selenium-server-standalone-3.4.0.jar 放到同一個目錄,例如 ~/work/test 。

3. 安裝這次測試的主角 webdriver.io 。基本上照官網教學做設定即可。

4. 調整 wdio.conf.js 設定檔裡的值,把 firefox 換成 chrome 。印象中 selenium 2 的時候 firefox 不用安裝額外的 driver 就可以開工了,不過因為實務上開 chrome 的機率比 firefox 高,加上 selenium 3 firefox 也沒有免 driver 可動的優勢,所以就換掉。

5. 告訴 chrome 模擬自己在手機環境。由於我的測試站台桌機版和手機版並不是用網址做區別,所以需要另外處理。找到的解法是動 wdio.conf.js ,然後參考 chromedriver 官網文件中的 mobile emulation 這段設定 chrome options :


    // 前略
    capabilities: [{
        browserName: 'chrome',
        chromeOptions: {
           mobileEmulation: {
               deviceName: 'iPhone 6 Plus', 
           },
        },
    }],
    // 後略

6. 安裝額外的測試工具。我照著前人寫的文件裝了 assertnpm install assert

7. 參考 webdriver.io 提供的文件寫測試。

8. 把 selenium server standalone 跑起來。我寫了一個內容只有 java -Dwebdriver.chrome.driver=./chromedriver -jar selenium-server-standalone-3.4.0.jar 的 startSelenium.sh ,這樣就不用每次打指令。

9. 跑 wdio 看結果。

目前覺得困難的部份不是架設過程,而是寫測試本身。我在 CSS selector 這關卡一整天寫不出來。像是 #content 這種不會變的 id 最好處理,麻煩的是 id 帶有無法預測流水號的(例如 #content-1234 )、只有 class 的、和完全沒有 id 或 class 的標籤。目前用 :first-child(), :nth-of-type(N), [name='blah'], [type='blah'] 之類的選擇器試著找解答,解不出來就直接把所有選到的東西丟 console.log 看看。總之目前寫了一個測試用的測試。


arrow
arrow
    創作者介紹
    創作者 repeat ❤️ 的頭像
    repeat ❤️

    旅行的記憶

    repeat ❤️ 發表在 痞客邦 留言(0) 人氣()