Selenium playwright e2e End to End Test QA

Playwright 應用 -- 取代人眼確認

張庭瑋 Gary Chang 2023/12/12 11:00:00
503

簡介

 

進行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的搜尋匡只有在這個頁面才會出現,所以看到他就確保頁面轉換成功了

const searchField = page.locator('input[placeholder = "Search Customer"]');
await searchField.waitFor();

 

isVisible(); 則是用來確定我們要的這三個locator是否為true

const isTestPresent = await page.locator('text=Test').isVisible();
const isManPresent = await page.locator('text=Man').isVisible();
const isPostCodePresent = await page.locator('text=11492').isVisible();

 

 

實際結果如下:

 

補充說明

 

這個段落是我在錄製時,由Playwright幫我自動產生的,仔細看,這些彈出視窗其實也包含了一些有用的資訊,真貼心 

 

 

page.once('dialog', dialog => {
console.log(`Dialog message: ${dialog.message()}`);
dialog.dismiss().catch(() => {});
});

 

 

 

 

 

 

 

 

如果你以為這樣就完成測試就大錯特錯啦!!

 

 

先看看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秒,而腳本執行時間則不到1秒,不過這是在相對單純的條件下進行測試,若比對的資料增加,我們也只需要看最後的截圖就好,這樣算下來,可以省下不少時間呢

 

 

 

 

 

參考資料:

Locators | Playwright

visibility - CSS: Cascading Style Sheets | MDN (mozilla.org)

HTML Standard (whatwg.org)

張庭瑋 Gary Chang