End to End
E2E
QA
Playwright
Testing
Playwright 應用 -- E2E 的實用指令
2023/12/22 09:00:00
0
713
本文簡述
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