iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
0
DevOps

持續測試三十天系列 第 24

[Day 24] TestCafe Studio 可視化的自動化測試錄製工具

今天的文章是我們 TestCafe 系列的最後一篇,要來介紹 TestCafe Studio

TestCafe Studio 是 TestCafe 官方提供的 可視化 自動化測試開發工具。
主要目標是降低自動化測試開發的門檻,讓非工程人員也可參與自動化測試案例的開發。

以前筆者也用過這類可視化錄製的工具,但都覺得不實用。
因為,錄製出來的測試程式碼,通常都不可維護且很難修改!

實際使用上,只要前端網頁有修改,
測試流程改變就得整個測試案例重新錄製,那我寧願自己寫 Code 實現自動化測試。

而 TestCafe Studio 的設計,有考量到實際使用情境,改善了每次都要重新錄製的問題!
透過 TestCafe Studio 錄製的自動化測試步驟,不是直接轉出程式碼,而是錄製為中間碼的概念。

TestCafe Studio 可視化的自動化測試錄製工具

TestCafe Studio 將自動化測試步驟以 json 格式記錄在 .testcafe
.testcafe 的內容類有很多 Metadata 以結構化的方式,記錄了測試過程中所需的一切資料。
當後續修改測試步驟時,可以用 TestCafe Studio 再次編輯 .testcafe 檔。

{
  "name": "A simple test on our example page",
  "commands": [
    {
      "callsite": "0",
      "options": {},
      "selector": {
        "type": "js-expr",
        "value": "Selector('label').withText('MacOS')"
      },
      "studio": {
        "offsetX": 10,
        "offsetY": 5,
        "selectors": [
          {
            "rawSelector": {
              "type": "js-expr",
              "value": "Selector('#macos')"
            },
            "ruleType": "id"
          }
        ]
      },
      "type": "click"
    }
  ]

  ...

}     

一個測試案例集,包含多個測試案例

https://ithelp.ithome.com.tw/upload/images/20191010/20120775blxDaFyFBm.png

錄製下來的測試案例,可透過 TestCafe Studio 可視化編輯

https://ithelp.ithome.com.tw/upload/images/20191010/20120775dgNLB3ljoh.png

TestCafe Studio 也可將 .testcafe 轉換成 TestCafe 程式碼。

test('A simple test on our example page', async t => {
  const interfaceSelect = Selector('#preferred-interface');

  await t
    .click(Selector('label').withText('MacOS'))
    .typeText(developerName, 'Peter Parker')
    .click(interfaceSelect)
    .click(interfaceSelect.find('option').withText('Both'))
    .click(submitButton)
    .expect(Selector('#article-header').textContent).eql('Thank you, Peter Parker!');
});

上一篇
[Day 23] TestCafe With Docker
下一篇
[Day 25] HttpRunner 說 Config 就是自動化測試
系列文
持續測試三十天30

尚未有邦友留言

立即登入留言