Обработка диалоговых окон для загрузки файла на веб-сайт с помощью Puppeteer - PullRequest
3 голосов
/ 01 апреля 2020

У меня есть сценарий, который почти завершен, кроме последней части. Последняя часть требует, чтобы я выбрал файл PDF для загрузки.

Я пробовал:

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

И я получаю ошибку:

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

Когда я вручную выполняю этот процесс к концу, когда я нажимаю здесь enter image description here

и я выбираю свой файл:

enter image description here

И это показывает, что он был загружен так:

enter image description here

Но когда я тоже попробовал использовать:

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

Теперь, на заднем конце консоли, я вижу, что функции были вызваны при загрузке файла вручную:

enter image description here

И я посмотрел на функцию, которая выполняет .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() };

Не знаю, помогает ли это ....

Есть ли что-то, что кукловод использует в стороне .uploadfile или .accept, чтобы диалоговое окно выбирало ваш файл?

Ответы [ 2 ]

1 голос
/ 02 апреля 2020

Итак, согласно этому: https://github.com/puppeteer/puppeteer/issues/5503

Вы должны понизить рейтинг Кукольника.

Все, что я сделал, было: 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']);

Но вы должны использовать кукловод 2.0.0

1 голос
/ 02 апреля 2020

Я пытался делать это долгое время go в других компаниях, и я не думаю, что вы делаете неправильно, но я думаю, возможно, это версия кукловода, которую вы используете. Я забыл, какая версия работает, но определенно const [fileChooser] = код здесь должен работать.

...