End to End E2E QA Playwright Testing

Playwright 應用 -- E2E 的實用指令

張庭瑋 Gary Chang 2023/12/22 09:00:00

0 213

本文簡述

End to End 測試時會需要不同動作指令的連續技，雖然可以用現成網站來講解，不過最後決定還是把功能拆開來，比較不會侷限大家的想像力。

本次使用的測試網站是這個，可以讓大家練習自動化測試的地方

這邊就不再說明怎麼找到元件的locator

以下介紹兩個專案中常會用到的動作：

1. 檔案上傳

// 選擇要上傳的檔案
await page.getByLabel('上傳文件').setInputFiles(path.join(文件路徑, '我的文件.pdf'));

// 選擇複數文件
await page.getByLabel('上傳文件').setInputFiles([
  path.join(文件路徑, 'file1.txt'),
  path.join(文件路徑e, 'file2.txt'),
]);

下載

// 儲存下載狀態 > 點擊下載按鈕 > 觸發下載
const downloadPromise = page.waitForEvent('download');
await page.getByText('下載檔案').click();
const download = await downloadPromise;

// 等待下載
await download.saveAs('/path/to/save/at/' + download.suggestedFilename());

2. 拖移 (Drag/put)

//這邊模擬真實操作游標的流程

await page.locator('#item-to-be-dragged').hover();
await page.mouse.down();
await page.locator('#item-to-drop-at').hover();
await page.mouse.up();

另外提供一個可以跨功能的測試情境給大家參考：

1. 建立新客戶資料後，會產生對應的文件編號/流水號

2. 取得編號/流水號

3. 進行下個功能的測試(EX: 搜尋id確認客戶資料)

  // 輸入測試資料
 
  await page.fill('input[name="顧客資訊"]', '王小明');
 
  await page.click('button#submit-form');
 
  // 產生流水號
 
  const generatedData = await page.textContent('123');
 
  // 切換到搜尋頁面
 
  await page.click('selector-for-navigation-element'); 
 
  // 使用"流水號“做接續測試
 
  await page.fill('input[name="searchbar"]', generatedData);

小結：

在大多測試情境中Playwright ,Selenium 還有Cypress 都能夠應付，端看習慣以及有沒有需要特殊情境支援，例如：Playwright 就可以測多分頁的情境、Cypress 的使用介面很直觀、Selenium 幾乎無痛的錄製瀏覽器腳本。無論如何，不管哪款自動化工具都是能省時省心的好幫手。

https://playwright.dev/docs/input#upload-files

https://playwright.dev/docs/input#drag-and-drop