Playwright 應用 -- 取代人眼確認
簡介
進行E2E測試的時候，很多時間在檢核輸入的資料對不對
通常這也是測試時最耗心神的地方，要怎麼做到既可以節省時間，又能檢核資料有傳遞正確呢？
本篇使用模擬測試網站
是一個測試介面由way2automation 所提供，以配合他本身的付費教學課程
在開始練習前，大家可以開來到處點點、玩一玩
測試流程：
使用者登入 > 創建客戶資料 > 查詢客戶資料 (流程如下圖）
測試網站介面相對簡單，沒有登入頁面，不過登入也非本次重點，對登入測試有興趣的人可以參考這篇
先上腳本( in JavaScript)
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({ headless: false , slowMo: 10});
const page = await browser.newPage();
await page.goto('https://www.way2automation.com/angularjs-protractor/banking/#/login');
await page.getByRole('button', { name: 'Bank Manager Login' }).click();
await page.getByRole('button', { name: 'Add Customer' }).click();
await page.getByPlaceholder('First Name').fill('Test');
await page.getByPlaceholder('Last Name').fill('Man');
await page.getByPlaceholder('Post Code').fill('11492');
page.once('dialog', dialog => {
console.log(`Dialog message: ${dialog.message()}`);
dialog.dismiss().catch(() => {});
});
await page.getByRole('form').getByRole('button', { name: 'Add Customer' }).click();
await page.getByRole('button', { name: 'Open Account' }).click();
await page.locator('#userSelect').selectOption('6');
await page.locator('#currency').selectOption('Dollar');
page.once('dialog', dialog => {
console.log(`Dialog message: ${dialog.message()}`);
dialog.dismiss().catch(() => {});
});
await page.getByRole('button', { name: 'Process' }).click();
await page.getByRole('button', { name: 'Customers' }).click();
const searchField = page.locator('input[placeholder = "Search Customer"]');
await searchField.waitFor();
const isTestPresent = await page.locator('text=Test').isVisible();
const isManPresent = await page.locator('text=Man').isVisible();
const isPostCodePresent = await page.locator('text=11492').isVisible();
if (isTestPresent && isManPresent && isPostCodePresent) {
console.log('Customer data verified successfully.');
} else {
console.log('Error: Customer data not found.');
}
await page.getByRole('button', { name: 'Home' }).click();
// Close the browser
await browser.close();
})();
關鍵步驟說明：
這次輸入的資料有三組：Test , Man , 11492
先確保有正確進入搜尋頁面
而Search Customer的搜尋匡只有在這個頁面才會出現，所以看到他就確保頁面轉換成功了
isVisible(); 則是用來確定我們要的這三個locator是否為true
實際結果如下：
補充說明
這個段落是我在錄製時，由Playwright幫我自動產生的，仔細看，這些彈出視窗其實也包含了一些有用的資訊，真貼心
如果你以為這樣就完成測試就大錯特錯啦！！
先看看isVisible是怎麼運作的：
1. 檢查元素在DOM的存在：首先確認指定的元素有沒有存在於html結構中。
2. CSS：再來判斷元素有沒有受到css影響 EX: display: none , visibility: hidden ,opacity: 0 ...etc 另外也會檢查指定元素有沒有被其他元素擋住。
3. Viewport 範圍：透過window.innerWidth , window.innerHeight 確認指定元素有沒有在範圍中
那麼跑版算不算一種isVisible ?
為求謹慎，我們可以透過screenshot進行二次確認
操作時，還發現他的表格可以滾動
所以在正常使用情境下，我們還需要做一個scroll的動作
調整部分如下：
// 把原本的isVisible判斷 改成 locator
const testElement = page.locator('text=Test');
const manElement = page.locator('text=Man');
const postcodeElement = page.locator('text=11492');
// 檢查的function
async function ensureVisible(element) {
await element.scrollIntoViewIfNeeded();
return element.isVisible();
}
// 進行檢查
const isTestVisible = await ensureVisible(testElement);
const isManVisible = await ensureVisible(manElement);
const isPostCodeVisible = await ensureVisible(postcodeElement);
if (isTestVisible && isManVisible && isPostCodeVisible) {
console.log('Customer data verified successfully.');
await page.screenshot({path:'你的檔案路徑 /screenshot/customer.png'})
} else {
console.log('Error: Customer data not found.');
}
截圖：
小結：
人工測試的話，大概會需要20秒，而腳本執行時間則不到１秒，不過這是在相對單純的條件下進行測試，若比對的資料增加，我們也只需要看最後的截圖就好，這樣算下來，可以省下不少時間呢
參考資料：
visibility - CSS: Cascading Style Sheets | MDN (mozilla.org)
