今天我們實際使用 TestCafe 三神器 Selectors, Actions, Assertions
實作一個簡單的自動化測試，填寫 TestCafe Example Page 表單

整個自動化測試流程需完成以下步驟：

1. 進入 TestCafe Example Page
2. 在 Your name 輸入 ice
3. 在 Which features are important to you 勾選 Support for testing on remote devices
4. 在 What is your primary Operating System 選取 MacOS
5. 在 Which TestCafe interface do you use 下拉選取 Both
6. 按下 Submit 按鈕
7. 確認結果等於 Thank you, ice!

完整的程式碼可以參考 Github CT30 day14，內附精美註解說明和多種 Selector 選擇法。

拿掉所有註解和不必要的程式碼，其實程式碼很簡單也沒幾行！
這也體現了 TestCafe 的 API 很簡單。

import { Selector } from "testcafe";

fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`;

test("Example Page Test", async t => {
  
  const supportRemoteBox = Selector("#remote-testing");
  const macOSRadio = Selector(".column")
    .find("label")
    .withText("MacOS")
    .child("input");
  const interfaceSelect = Selector("#preferred-interface");

  await t
    .typeText("#developer-name", "ice")
    .click(supportRemoteBox)
    .click(macOSRadio)
    .click(interfaceSelect)
    .click(interfaceSelect.find("option").withText("Both"))
    .click("#submit-button")
    .expect(Selector("#article-header").innerText)
    .eql("Thank you, ice!");
});

實際執行上述程式碼的話，應該會開始進行預定的步驟 1 ~ 7。

cd day14

testcafe chrome TestCafeExamplePage.js --speed 0.3

TestCafe 自動化測試實際跑起來的效果

完整程式碼

步驟 5.1 and 5.2 是重點，請參照上面的教學影片！

import { Selector } from "testcafe"; // 引入 testcafe 的 html element 選擇器

fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`; // 1. 進入 TestCafe Example Page

test("Example Page Test", async t => {
  // Chrome Copy selector 定位法
  const supportRemoteBox = Selector("#remote-testing");

  // Chrome Copy XPath 定位法
  // const supportRemoteBox = Selector('*[id="remote-testing"]');

  // 使用 TestCafe 鏈式 Selector API
  const macOSRadio = Selector(".column")
    .find("label")
    .withText("MacOS")
    .child("input");

  // Chrome Copy selector 定位法
  // const macOSRadio = Selector('#macos');

  const interfaceSelect = Selector("#preferred-interface");

  await t
    // 2. 直接使用 html element id，識別 input 在 Your name 輸入 ice
    .typeText("#developer-name", "ice")
    // 3. 透過預定義 selector supportRemoteBox，選 testing on remote devices
    .click(supportRemoteBox)
    // 4. 透過預定義的 selector macOSRadio 選擇 MacOS
    .click(macOSRadio)
    // 5.1 透過預定義的 selector interfaceSelect，按下選單彈出選項
    .click(interfaceSelect)
    // 5.2 使用 ＴestCafe 鏈式 Selector API，找到 interfaceSelect 下的 Both Option
    .click(interfaceSelect.find("option").withText("Both"))
    // 6. 按下 Submit 按鈕
    .click("#submit-button")
    // 7. 確認結果等於 Thank you, ice!
    .expect(Selector("#article-header").innerText)
    .eql("Thank you, ice!");
});