使用 Puppeteer 处理对话框以将文件上传到网站

Question

除了最后一部分，我有一个几乎完成的脚本。最后一部分需要我选择要上传的 PDF 文件。

我试过：

inputUploadHandle = await page.$('input[type=file]');
await inputUploadHandle.uploadFile('/myfile.pdf');

我得到一个错误：

(node:20704) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'uploadFile' of undefined

当我点击这里手动完成这个过程时

然后我选择我的文件：

它显示它是这样上传的：

但是当我也尝试使用：

const[fileChooser] = await Promise.all([
  page.waitForFileChooser(),
  page.click('#filingDocumentSection > div:nth-child(2) > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > ul > li > div > div.col-sm-7 > button > i'),
])

await fileChooser.accept(['/myfile.pdf']);

现在我确实看到发生了一些事情，但我不认为网站实际上接受了 pdf 文件。控制台没有读取错误，页面看起来像是在等我做其他事情。我注意到的是，当我这样做时，我无法再点击上传文件的框。就像那个按钮失去了它的功能。

看起来对话框的按钮已打开，然后立即关闭，但我没有看到文件实际上已被接受或上传。

我用它来查看我是否在实际页面控制台中使用了正确的查询选择器：

document.querySelectorAll('input[type=file]')[0];

哪个returns:

<input type="file" ngf-select="" ngf-drop="" ngf-drag-over-class=
"{accept: 'dragover', reject: 'dragover-err', delay: 50}" ngf-multiple="{{filingComponent.AllowMultipleFiles}}" 
ng-attr-accept="{{filingComponent.AllowedFileTypes}}" 
ngf-accept="filingComponent.AllowedFileTypes" 
ngf-change="UploadFiles(filingComponent, $files)" 
title="File system upload" accept="application/pdf" multiple="multiple">

现在在控制台的后端，我确实看到在我手动上传文件时调用了函数：

我查看了执行 .UpLoadFiles() 的函数：

n.DownloadDocument = function (t, i, r, u) { 
    var f = !1; 
    u !== undefined & u !== null && u === 1 && (f = !0); 
    !f && n.SelectedItem.Filing.ViewStampedDocumentsUrl ? window.open(n.SelectedItem.Filing.ViewStampedDocumentsUrl) : $.get(t.format(i, r)).success(function (n) { window.location = n.DownloadUrl }) }; 
n.UploadFiles = function (t, i) { 
    var r, u; 
    n.FileToUploadLength = 0; 
    r = i.length; 
    console.group("$scope.UploadFiles()"); 
    angular.isArray(i) && i.length > 0 && (n.SelectedItem.Filing.Id === 0 ? (
        u = i.shift(), 
        n.UploadFileChain(u, t, r, i)) : _.each(i, function (i) { 
            n.UploadFileChain(i, t, r, []) })); 
            console.groupEnd() };

不知道有没有帮助....

puppeteer 是否使用 .uploadfile 或 .accept 来让对话框选择您的文件？

Answer 1

我很久以前在其他公司尝试过这样做，我不认为你做的是错的，但我认为可能是你使用的 puppeteer 版本。我忘记了哪个版本有效，但绝对 const[fileChooser] = code here 应该有效。

Answer 2

所以根据这个：https://github.com/puppeteer/puppeteer/issues/5503

您必须降级 Puppeteer。

我所做的只是：npm i puppeteer@2.0.0

瞧...我的代码有效。

答案是：

const[fileChooser] = await Promise.all([
  page.waitForFileChooser(),
  page.click('#filingDocumentSection > div:nth-child(2) > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > ul > li > div > div.col-sm-7 > button > i'),
])

await fileChooser.accept(['/myfile.pdf']);

但是你必须使用puppeteer 2.0.0

使用 Puppeteer 处理对话框以将文件上传到网站

Handling dialog boxes to upload file to a website using Puppeteer

javascript

submit

node.js

puppeteer