使用 Dropzone.js 上傳 Nightwatch.js 文件

Question

我正在嘗試使用 nightwatch.js 在我們的文件上傳中上傳 pdf 文件，但問題是我們的上傳中沒有 input type="file" 。 html 看起來像這樣：

<form id="dropzone" action="/v2/asset/56013895934fd606006fb314" class="dropzone dz-clickable">
    <div class="dz-clickable" id="dropzonePreview">
        <i class="fa fa-cloud-upload main-icon initial-icon"></i>
    </div>
    <div class="dz-default dz-message">
        <span>Drop a file here or click icon above to upload an image</span>
    </div>
</form>

我嘗試向表單、div 和 i 發送密鑰，但無濟於事。 這是我如何嘗試上傳文件的代碼：

var uploadInvoice = function(browser) {
    browser
        .waitForElementPresent(dashboardselector.view_assignment, 20000)
        .click(dashboardselector.view_assignment)
        .waitForElementVisible(".fa-plus", 20000)
        .click(".fa-plus")
        .click(".regionBillAsset > div:nth-child(1) > a:nth-child(1)")
        .setValue("#dropzone", require('path').resolve(__dirname+'/document.pdf'))
        .waitForElementVisible(".after-success", 20000)
        .click(".after-success")
};

上傳從我的代碼的 setvalue 部分開始。 上半部分只是進入上傳模式的步驟。 提前致謝！！

更新我在 html 上發現了一個隱藏的輸入字段，但即使我使用了 setValue，它也不會上傳我的文件。

Answer 1

我正在使用Dropzone.js上傳文件。 它使輸入type =“ file”隱藏。 而且nightwatch.js不會在隱藏元素上設置setValue，因此我們需要在設置value之前先查看輸入元素。

解決方法是

步驟1：使隱藏的輸入元素可見

步驟2：為該輸入元素設置值

以下是我上傳圖片的功能測試用例。

'uploadin the image': (browser) => {
    browser
      .execute("document.querySelectorAll('input[type=file]')[0].style.display = 'block';")
      .pause(100)
      .setValue('//div[@id="Upload Icon"]/input[@type="file"]', require('path').resolve(__dirname + '/categoryIcon.png'))
      .waitForElementVisible('//div/span[text()="Change Icon"]', 5000)
      .assert.containsText('//div/span[text()="Change Icon"]', 'Change Icon')
      .pause(2000)
      .end();
  }

execute正在將輸入元素的樣式從無更改為塊。 這是文檔鏈接http://nightwatchjs.org/api#execute

.execute("document.querySelectorAll('input[type=file]')[0].style.display = 'block';")

document.querySelectorAll（'input [type = file]'）將返回元素數組，在我的情況下，我需要在第0個位置放置元素，因此我在querySelectorAll的末尾添加了[0]。

注意：您還可以在控制台上運行此JavaScript代碼，以查看它是否選擇了正確的元素。

.setValue('//div[@id="Upload Icon"]/input[@type="file"]', require('path').resolve(__dirname + '/categoryIcon.png'))

在我的情況下，有一個id為“上傳圖標”的div，其輸入為type =“ file”

Answer 2

我和你在同一位置 至於隱藏的輸入，我相信守夜只能上傳可見元素。

Answer 3

您可以這樣顯示它>

client.execute(function(data){
      document.querySelector('input[type="file"]').className="";
    }, [], function(result){
      console.log(result);
});

之后，您可以設置要上傳的值。

Answer 4

從Dropzone v3.12.0開始（注意：最新版本為v5.4.0）

您可以在nigthwatch.js中執行此操作，以上傳文件。

browser
.execute(`
 // this makes the DropZone hidden input, visible

document.querySelector('input[type="file"]').style.visibility = "visible";
`)
.setValue('input.dz-hidden-input', AbsolutePathToFile)