今天我們實際使用 TestCafe 三神器 Selectors, Actions, Assertions
實作一個簡單的自動化測試,填寫 TestCafe Example Page 表單
整個自動化測試流程需完成以下步驟:
完整的程式碼可以參考 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
步驟 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 使用 TestCafe 鏈式 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!");
});