使用 WebdriverIO 進行檔案上傳

2019 年 6 月 25 日 ·4 分鐘閱讀

在瀏覽器中測試上傳情境在自動化測試領域中是罕見但並非不常見的情況。評估此類測試的重要性始終很重要，因為在許多情況下，您最終會測試瀏覽器而不是您的應用程式。因此，請始終記住您的前端應用程式在瀏覽器預設上傳行為之上添加了多少額外功能。例如，如果大部分魔法都發生在後端，那麼使用簡單的 Node.js POST 請求來模擬上傳，使用諸如 request 或 axios 之類的套件會更有意義。

尋找並顯示檔案輸入

假設我們的前端應用程式除了上傳檔案之外還做了很多事情（例如，驗證或一些其他前端對即將上傳的檔案進行的操作）。現在，我們應該做的第一件事是找到類型為 file 的輸入元素。請注意，以 React、Angular 或其他框架建構的應用程式通常會隱藏這些元素，因為它們很難使用純 CSS 設定樣式。因此，它們會隱藏這些元素，並使用 div 或其他更易於設定樣式的 HTML 標籤來模擬輸入。

// Two hidden input elements, 1 for single file upload 1 for multiple.
<input class="upload-data-file-input hidden" type="file">
<input class="upload-data-file-input-multiple hidden" type="file">

為了能夠修改此元素的值，我們需要使其可見。WebDriver 規範定義輸入元素是可互動的，以便變更其值。所以我們來做吧

/**
 * The css class name "upload-data-file-input hidden" is just an example
 * and you can replace with your app.
 */
const fileUpload = $('.upload-data-file-input');
browser.execute(
    // assign style to elem in the browser
    (el) => el.style.display = 'block',
    // pass in element so we don't need to query it again in the browser
    fileUpload
);
fileUpload.waitForDisplayed();

使用 execute，我們可以簡單地修改元素屬性，以移除 hidden 類別或給予元素顯示性。

上傳檔案

不幸的是，使用瀏覽器上傳檔案的機制高度依賴於您的測試設定。歸根結底，瀏覽器需要能夠存取您要上傳的檔案。對於本機情境，這非常簡單。由於您在本機電腦上執行瀏覽器，並且您要上傳的檔案也存在於您的本機電腦上，因此您需要做的就是將檔案路徑的值設定為輸入元素

/**
 * it is recommended to always use the absolute path of the file as it ensures
 * that it can be found by the browser.
 */
const path = require('path');
const filePath = path.join(__dirname, 'path/to/your/file');
fileUpload.setValue(filePath);

如果您自動化在遠端電腦上執行的瀏覽器，此方法將不再有效，因為位於本機（或測試執行的任何位置）的檔案在執行瀏覽器的遠端電腦上不存在。對於這些情境，Selenium 專案建立了一個 file，目前僅在執行 Chrome 或使用具有 Selenium 獨立伺服器的 Selenium Grid 時支援。該命令預期檔案有效負載以 base64 字串形式傳遞。由於使用起來相當不方便，因此 WebdriverIO 實作了一個 upload 命令，允許您僅傳遞檔案名稱，並且框架會負責正確解析它。上傳範例現在看起來像

const path = require('path');
const filePath = path.join(__dirname, 'path/to/your/file');

const remoteFilePath = browser.uploadFile(filePath);
$('.upload-data-file-input').setValue(remoteFilePath);

請注意，遠端檔案名稱與您的本機檔案名稱不同。因此，您需要根據從 uploadFile 命令取得的遠端檔案名稱設定值。

就是這樣！！！上傳愉快 😉🙌🏻 ❤️

尋找並顯示檔案輸入​

上傳檔案​

尋找並顯示檔案輸入

上傳檔案