使用 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];

返回：

<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">

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

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

Answer 1

所以根据这个： https ://github.com/puppeteer/puppeteer/issues/5503您必须降级 Puppeteer。我所做的只是：npm i puppeteer@2.0.0瞧……我的代码有效。答案是：const[fileChooser] = await Promise.all([&nbsp; page.waitForFileChooser(),&nbsp; 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

Answer 2

我很久以前在其他公司尝试过这样做，我不认为你在做什么是错误的，但我认为它可能是你正在使用的 puppeteer 版本。我忘记了哪个版本可以工作，但这里的 const[fileChooser] =代码肯定可以工作。