自动化 End-End 测试 Nightwatch.js 与 BrowserStack

BrowserStack 一个提供各式浏览器、移动装备的平台，前面虽然有稍微提到这个东西，不过都没什麽详细介绍，最後一周来写一下 Nightwatch 与 BrowserStack 相关的文章

BrowserStack

使用 BrowserStack 最大的好处就是支援各式浏览器、装置。试想如果要准备 Windows/OS X 作业系统，每个都还要装上 Chrome / Firefox / Edge / Safari，然後可能还要分版本，相当麻烦。

虽然 BrowserStack 不是免费的，但新帐号还是有 100 小时的试用

而如果要与 Nightwatch 串接，只要在 Nightwatch config 中设定即可：

//nightwatch.conf.js

selenium: {
    start_process: false,
    host: 'hub-cloud.browserstack.com',
    port: 443,
},

但只有这样还不够，我们需要针对 BrowserStack 去做一些设定：

//nightwatch.conf.js

desiredCapabilities: {
    build: `${process.env.TEST} / ${
      process.env.CASE ? process.env.CASE : 'ALL'
    }`,
    ...CAPABILITIES_OS_MAP[process.env.OS],
    ...CAPABILITIES_BROWSER_MAP[process.env.BROWSER],
    'browserstack.user': process.env.BROWSERSTACK_USER,
    'browserstack.key': process.env.BROWSERSTACK_PASSWORD,
    'browserstack.local': 'false',
    'browserstack.debug': true,
    'browserstack.timezone': 'Taipei',
  },

更多详细的设定可以从这里看到：https://www.browserstack.com/docs/automate/selenium/select-browsers-and-devices#browserstack-specific-capabilities-desktop

而上面的 CAPABILITIES 设定，BrowserStack 也提供了一个小工具：
https://www.browserstack.com/automate/capabilities?tag=selenium-4

只要选择想要的测试环境，他就会自动生成出来：

最後执行 Nightwatch 时，他就会使用 BrowserStack 的 selenium 去做测试：