总结篇 — Nightwatch.js E2E 之旅

首先感谢队长 Ian 的邀请，也感谢队友们的鼓励，终於要结束 30 天的挑战了
其实大概写到一半就没料了，後面变成开始自己乱看乱摸索，反而是给自己强制学习的机会

这系列遇到的雷点与解法不见得都是我亲身遇到，也有很多是前辈们的经验与努力

写 E2E 之旅

刚开始去面试实习的时候，还记得面试官问我有没有兴趣写测试
当时的我完全不知道这是什麽，简单 google 一下，感觉应该就是写写脚本类的东西

browser.click('<element>')

枯燥乏味

大约过了一两个月，当初的面试官问我会不会觉得很无聊、枯燥乏味
当时的我大概还停留在只会

browser.click('<element>')
       .assert('<element2>')

我当时觉得这比较像是可以偷闲的工作，反正无脑写就好

写 leetcode

过了一段时间後，开始正式执行 E2E 的测试，我才知道原来每种浏览器都会测
当时经历了痛苦的修改期，每个已经写过的都要拿出来改
随後开始学习客制化指令，把比较复杂的步骤变成一个指令，这样就可以不用同时改很多档案
还记得我的第一个就是 checkColorSafe() 当时面试官在 MR 留了「你真帅」XD

在我经历写了几个月 E2E 之後，我觉得它像 leetcode，针对题目叙述解题
并且会用一些客制化指令完成一些任务

browser.checkColorSafe(
    '<element>',
    'background-color',
    'rgba(61, 186, 144, 1)',
);

写框架

但又经历半年之後，我认为它像写一个大型框架，怎麽写的好、写的弹性更是重要

善用 Page object / command 已经不够了，如何在测试网站每次有比较大的更新时，能快速反应变成了我的目标
希望让整个专案可以适应不同机器规模、可以当有期间限定的 UI 出现时，能够绕过、可以透过 CI/CD 让框架变得很弹性等。

module.exports = {
    isSpercialUi: process.env.isSpercialUi || false
}

dashboard.login()

module.exports = {
  command: async function(type) {
      if (this.globals.isSpercialUi)
          // do something
  }
}

可视化

除了弹性外，能够输出让执行者能快速理解的功能也很重要
之前的篇幅有提到可以利用一些套件、google sheet 或是上 browserstack 查看
不过如果善用 Nightwatch 的 message 其实也很重要

Nightwatch 在使用 assert/verify 时，其实都有这个 optional 的 api 叫 message

写一个好懂 message 搭配原生的勾勾或叉叉，应该还是比其他方法更为快速且精准

总结

这系列文应该提供了

• 与物件互动会遇到的麻烦问题
• 与跨浏览器时会遇到的奇妙问题
• 测试框架更弹性的写法与挑战
• BrowserStack 或其他可视化套件与方法

希望这个系列可以给未来刚学习 E2E 的人，可以不用频频到各个网站找解法
可以直接从这里参考～