自动化 End-End 测试 Nightwatch.js 串接 Google sheet

之前撰写测试时有提到串接 BrowserStack 的服务，而执行时也可以透过 nightwatch-html-reporter 产生好看的报告。不过如果当这项自动化测试部署到 gitlab 或其他可以串接 CI/CD 的服务时：

• BrowserStack 的 session name 只能使用英文，不一定方便对应测试的内容
  • 此外，BrowserStack 如果一个 test.spec.js 中任何一项有错误，最後一项必定显示错误
• nightwatch-html-reporter 看不到

解决 session name 最方便的作法是产生一组对应的 UUID: https://www.uuidgenerator.net/

或是利用 Javascript 产生（毕竟是写 Javascript)

const uuid = () => crypto.randomUUID();

参考：https://github.com/WICG/uuid

而为了可以产生方便查看的测试结果，就可以利用 google sheet

Google Apps Script

Google Apps Script (GAS) 即是利用 JavaScript 语法，透过 RESTful API 与 google 提供的服务做互动

而这边主要是利用 Google sheet

而 Google sheet 的栏位大致上可以规划为

• 测试项目
• 环境
• UUID
• 结果

接着就可以来着手写 GAS 了

UUID

首先先点开 工具 > 指令码编辑器
应该会有以下画面

接着先从简单的建立 UUID 开始，虽然前面有提到利用 crypto 来产生，不过 GAS 有 Utilities 可以帮助我们建立：

function uuid() {
  return Utilities.getUuid().toUpperCase();
}

於是就可以在任何一格使用 =uuid() 来产生 UUID 了～

doPost

doPost() 为 GAS 处理 post 请求的函数

在撰写处理 doPost 之前，保持 TDD 以测试为优先的想法，先思考要怎麽测试

可以预期我们 doPost 应该会有几个 parameters

• browser
• UUID
• result

因为使用 UUID 定位，因此测项名称不需考量，也因此想打什麽文都可以XD

预期会发送给 doPost() 的 request 应该可以程序化为：

function testDoPost() {
  doPost(
    {
      parameters: {
        url: 'GOOGLE SHEET URL',
        UUID: 'b7644a8e-8010-4517-9e20-f359b325b71c',
        browser: 'FIREFOX',
        result: 'PASSED',
       }
    }
  );
}

因此在 doPost() 就需要这样接：

function doPost(e) {
  let { url, UUID, browser, result } = e.parameters;
}

随後定位 UUID 的栏位，并填写内容

var uuidArr = Sheet.getSheetValues(1, 3, SpreadSheet.getLastRow(), 1);

for(let i = 0; i< uuidArr.length; ++i) {
    const uuidStrArr = uuidArr[i][0];
    if(uuidStrArr.pop() === UUID ) {
      targetRow = i + 4;
      break;
    }
}

Logger.log(targetRow)

const writeResult = SpreadSheet.getRange('D' + targetRow);
writeResult.setValue(result);

const writeBrowser = SpreadSheet.getRange('B' + targetRow);
writeBrowser.setValue(browser);

完成 GAS 後，就可以在每次测试完成写入 google sheet 填写 pass/fail 了

afterEach: function(browser, done) {
    browser.end(() => done());

    let status = `passed`;
    if (browser.currentTest.results.failed > 0) {
      status = `failed`;
    }
    
    setGoogleSheet(UUID, status);
}

const setGoogleSheet = async (UUID, status) => {
  const bodyObj = {
    url: process.env.SHEET,
    browser: process.env.BROWSER,
    UUID,
    result: status,
  };

  const body = Object.keys(bodyObj)
    .map(function(keyName) {
      return (
        encodeURIComponent(keyName) + '=' + encodeURIComponent(bodyObj[keyName])
      );
    })
    .join('&');

  const option = {
    url: `Google App Script 网页应用程序的网址`,
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body,
  };

  request(option, function(error, response, body) {
    if (!error && response.statusCode == 200) {
      return body;
    }
    return error;
  });
};