Почему Puppeteer ничего не вводит в текстовое поле? - PullRequest
Новая
       33

Почему Puppeteer ничего не вводит в текстовое поле?

0 голосов
/ 19 апреля 2020

Я делаю приложение, которое должно синхронизировать пользователей со сторонним сайтом, когда пользователь регистрирует или обновляет профиль на сайте. Я сделал, что Puppeteer входит в систему, затем он переходит на запрошенную страницу и открывает модальное поле для редактирования пользователем. Но по какой-то причине он не заполняет информацию в полях. XPath действителен и работает, я также пытался с нормальным путем querySelector. Он находит элемент с обоими, но не обновляет значения.

Вот HTML, который я пытаюсь выполнить: 

<form action="user_process.php?task=edit" method="post" class="ui-modal-form wide" id="edit-user-modal" style="width:840px;">
            <input type="hidden" name="userid" value="8800">
            <fieldset>
                <ul>
                   <li>
                       <label>Name</label>
                       <input type="text" placeholder="Ime i prezime" name="name" value="">
                   </li>
                   <li>
                       <label>User *</label>
                       <input type="text" placeholder="Username" name="user" value="">
                   </li>
                   <li>
                       <label>Password *</label>
                       <input type="text" placeholder="Sifra" name="pass" value="">
                   </li>
                   <li>
                       <label>E-mail</label>
                       <input type="text" placeholder="Email adresa" name="email" value="">
                   </li>
                   <li>
                       <label>Support</label>
                       <select name="support">
                           <option value="0">No</option>
                           <option value="1">Yes</option>
                       </select>
                   </li>
                   <li>
                       <label>Servers:</label><br><br>

                       <div class="dataTables_wrapper"><div class="dataTables_filter">Search: <input type="text"></div><table class="data-table" style="">
                       <thead>
                           <tr>
                               <th width="50%" style="text-align:center;vertical-align: middle;" class="sorting_disabled">Server</th>
                               <th width="30%" style="text-align:center;vertical-align: middle;" class="sorting_disabled">IP</th>
                               <th width="10%" style="text-align:center" class="sorting_disabled">WebFTP Access</th>
                               <th width="10%" style="text-align:center" class="sorting_disabled">View FTP Info</th>
                           </tr>
                        </thead>

                        <tbody><tr class="odd">
                                    <td><label style="width: 100%;"><input type="checkbox" class="servercheckbox" style="top:-4px;" name="60203" value="1"> Xtreme COD:MW4</label></td>
                                    <td style="text-align:right"><a target="_blank" href="gp-info.php?id=60203">176.57.142.179:27022</a> </td>
                                    <td style="text-align:center"><input type="checkbox" class="servercheckbox" name="webftp_access[60203]" value="1"> </td>
                                    <td style="text-align:center"><input type="checkbox" class="servercheckbox" name="view_ftpinfo[60203]" value="1"> </td>
                                </tr><tr class="even">
                                    <td><label style="width: 100%;"><input type="checkbox" class="servercheckbox" style="top:-4px;" name="60205" value="1"> FDL</label></td>
                                    <td style="text-align:right"><a target="_blank" href="gp-info.php?id=60205">193.192.58.55:1</a> </td>
                                    <td style="text-align:center"><input type="checkbox" class="servercheckbox" name="webftp_access[60205]" value="1"> </td>
                                    <td style="text-align:center"><input type="checkbox" class="servercheckbox" name="view_ftpinfo[60205]" value="1"> </td>
                                </tr><tr class="odd">
                                    <td><label style="width: 100%;"><input type="checkbox" class="servercheckbox" style="top:-4px;" name="60353" value="1"> Xtreme CW</label></td>
                                    <td style="text-align:right"><a target="_blank" href="gp-info.php?id=60353">193.192.59.233:27025</a> </td>
                                    <td style="text-align:center"><input type="checkbox" class="servercheckbox" name="webftp_access[60353]" value="1"> </td>
                                    <td style="text-align:center"><input type="checkbox" class="servercheckbox" name="view_ftpinfo[60353]" value="1"> </td>
                                </tr></tbody></table></div>
                   </li>
                   <li>
                        <button>Sacuvaj</button>
                   </li>
                </ul>
            </fieldset>
        </form>

Коды Кукловода, которые я пытался использовать:

Первый вариант: 

try {
        // Wait for the table
        await page.waitForXPath('//table[contains(@class, "data-table")]//tbody//tr//a[contains(text(), "Edit") and contains(@data-user, "TestName") and contains(@data-user, "TestMail@test.com")]')
            .catch(e => console.log('Edit button not found!'));

        // This works - Start
            const [EditButton] = await page.$x('//table[contains(@class, "data-table")]//tbody//tr//a[contains(text(), "Edit") and contains(@data-user, "TestName") and contains(@data-user, "TestMail@test.com")]');

        if(EditButton) {
            console.log('Edit button is found!');
            await EditButton.click();
        } else throw new Error('Edit Button is not found!');
        // This works - End

        // This does not work - Start
        const [NameInputField] = await page.$x('//form[@id="edit-user-modal"]//fieldset//ul//li//input[@name="name"]');

        if (NameInputField) {
            await NameInputField.focus();
            await page.keyboard.type('New Test name', {delay: 1});
            console.log("Name input field is found!");
        } else {
            console.log("Name input field is not found!");
            await page.close();
        }
        // This does not work - End

        await sleep(10000);

        // This works
        await page.$eval('form#edit-user-modal > fieldset > ul > li > button', (e, n) => e.click());
    } catch (error) {
            console.error(error);
    }

Второй вариант: 

try {
        // Wait for the table
        await page.waitForXPath('//table[contains(@class, "data-table")]//tbody//tr//a[contains(text(), "Edit") and contains(@data-user, "TestName") and contains(@data-user, "TestMail@test.com")]')
            .catch(e => console.log('Edit button not found!'));

        // This works - Start
            const [EditButton] = await page.$x('//table[contains(@class, "data-table")]//tbody//tr//a[contains(text(), "Edit") and contains(@data-user, "TestName") and contains(@data-user, "TestMail@test.com")]');

        if(EditButton) {
            console.log('Edit button is found!');
            await EditButton.click();
        } else throw new Error('Edit Button is not found!');
        // This works - End

        // This does not work - Start
        await page.waitForSelector('form#edit-user-modal > fieldset > ul > li > input[name="name"]');

        await page.$eval('form#edit-user-modal > fieldset > ul > li > input[name="name"]', (e, n) => e.setAttribute('value', 'NewTestName'));
        await page.$eval('form#edit-user-modal > fieldset > ul > li > input[name="user"]', (e, n) => e.setAttribute('value', 'NewTestUser'));
        await page.$eval('form#edit-user-modal > fieldset > ul > li > input[name="pass"]', (e, n) => e.setAttribute('value', 'NewTestPassword'));
        await page.$eval('form#edit-user-modal > fieldset > ul > li > input[name="email"]', (e, n) => e.setAttribute('value', 'NewTestMail@test.com'));
        // This does not work - End

        await sleep(10000);

        // This works
        await page.$eval('form#edit-user-modal > fieldset > ul > li > button', (e, n) => e.click());
    } catch (error) {
            console.error(error);
    }

Третий вариант: 

try {
        // Wait for the table
        await page.waitForXPath('//table[contains(@class, "data-table")]//tbody//tr//a[contains(text(), "Edit") and contains(@data-user, "TestName") and contains(@data-user, "TestMail@test.com")]')
            .catch(e => console.log('Edit button not found!'));

        // This works - Start
            const [EditButton] = await page.$x('//table[contains(@class, "data-table")]//tbody//tr//a[contains(text(), "Edit") and contains(@data-user, "TestName") and contains(@data-user, "TestMail@test.com")]');

        if(EditButton) {
            console.log('Edit button is found!');
            await EditButton.click();
        } else throw new Error('Edit Button is not found!');
        // This works - End

        // This does not work - Start
        await page.waitForSelector('form#edit-user-modal > fieldset > ul > li > input[name="name"]');
        await page.type('form#edit-user-modal > fieldset > ul > li > input[name="name"]', "New Test Name", {delay: 1});
        // This does not work - End

        await sleep(10000);

        // This works
        await page.$eval('form#edit-user-modal > fieldset > ul > li > button', (e, n) => e.click());
    } catch (error) {
            console.error(error);
    }

Вчера я, когда метод XPath не работает для добавления пользователя, я решил с помощью $ eval selector, но для редактирования пользователем это не работает, а. Я слежу за документацией, код вроде в порядке. Можете ли вы помочь мне решить это? Спасибо.

Ответы [ 2 ]

0 голосов
/ 19 апреля 2020

Я переустановил кукловод и очистил кэш NPM, и каким-то волшебным образом он начал работать. Это действительно странно. Я также добавил время ожидания со значением 30000 (30 секунд) и надлежащую обработку ошибок, как вы предложили. Спасибо за ваше время и помощь. Если в будущем у кого-то возникнет проблема с примером, попробуйте сначала очистить кэш NPM, затем удалить node_modules, а затем снова установить модули. Кроме того, добавьте некоторое время ожидания и используйте await page.waitForSelector, как я сделал.

0 голосов
/ 19 апреля 2020

вы можете запустить js на странице, как это может быть, это поможет вам. 

const result = await page.evaluate(_ => {
  const element = document.querySelector(`'form#edit-user-modal > fieldset > ul > li > input[name="name"]'`);
  if (element) {
    element.setAttribute('value', 'NewTestName');
  } else {
    return 'there is no element. maybe you need to wait until dom rendered and try again. or your selector is wrong?';
  }
});

console.log(result);
...