Я делаю приложение, которое должно синхронизировать пользователей со сторонним сайтом, когда пользователь регистрирует или обновляет профиль на сайте. Я сделал, что 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, но для редактирования пользователем это не работает, а. Я слежу за документацией, код вроде в порядке. Можете ли вы помочь мне решить это? Спасибо.