[test] Nightwatch.js 如何使用 puppeteer 做測試

還記得之前曾經記錄過 Nightwach.js 血淚史，那時候最大的問題是以 Nightwatch.js 的架構都是要經過 selenium 去串各 browser 的 web driver

導致排查時的錯誤原因可能會發生在以下三個點

Nightwath.js
Selenium
Web Driver (chrome driver, gecko driver, ie driver … .etc.)

導致排查上會需要層層檢查 (血淚)

因此後來在 chrome headless browser 釋出後，我們想試著是否能直接使用 chrome driver 串接 puppeteer 減少 selenium 這層的排查工作，另一方面也可以減少在非 GUI 的機器上跑的 web driver 不同而導致的差異性．

因此我們將 nightwath.js 的設定檔更改如下

module.exports =  {
  ....
  webdriver: {
    start_process: true,
    server_path: './node_modules/.bin/chromedriver',
    host: '127.0.0.1',
    port: 9515,
    log_path: 'nightwatch/nightwatch-report/',
    cli_args: [
      '--verbose'
    ]
  },
  test_settings: {
    dev: {
      launch_url: '{test url}',
      desiredCapabilities: {
        browserName: 'chrome',
        javascriptEnabled: true,
        acceptSslCerts: true,
        chromeOptions: {
          binary: require('puppeteer').executablePath(),
          args : ['--disable-headless-mode']
        }
      }
    },
    default: {
      launch_url: '{production url}',
      desiredCapabilities: {
        browserName: 'chrome',
        javascriptEnabled: true,
        acceptSslCerts: true,
        chromeOptions: {
          binary: require('puppeteer').executablePath(),
          args : ['--headless', 'window-size=1920,1080']
        }
      }
    }
  }
};

將設定分別分為 dev 與 default，差別如下

dev: CI/CD 機器非 GUI 執行環境，headless 模式
default: 一般 GUI 環境，可以開啟 chrome browser 的 UI 排查

另外，需要注意的是 CentOS 非 GUI 環境安裝好 puppeteer 時，如果發生以下錯誤

Unable to launch browser mode in sandbox mode. Lauching Chrome without sandbox.

請試著執行以下指令即可

sudo mv node_modules/puppeteer/.local-chromium/linux-737027/chrome-linux/chrome_sandbox node_modules/puppeteer/.local-chromium/linux-737027/chrome-linux/chrome-sandbox
sudo chown root node_modules/puppeteer/.local-chromium/linux-737027/chrome-linux/chrome-sandbox
sudo chmod 4755 node_modules/puppeteer/.local-chromium/linux-737027/chrome-linux/chrome-sandbox

參考資料：