End to End E2E QA Playwright Testing

Playwright 應用 -- E2E 的實用指令

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

 

本文簡述

 

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

 

 

張庭瑋 Gary Chang