旅行的記憶

翻了一下第一次碰 Selenium 是 2010 年的事了，當時是在 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. 安裝額外的測試工具。我照著前人寫的文件裝了 assert ： npm 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 看看。總之目前寫了一個測試用的測試。