javascript - Puppeteer,在特定站点上的元素上执行事件的问题
问题描述
一直在尝试 puppeteer 登录到某个站点,但我没有投入任何工作......它正在做一些非常奇怪的事情。尝试了对元素的各种点击,将鼠标移动到元素的位置并执行鼠标向下/向上,单击,从键盘执行输入事件。等待一切加载。我认为缺少一些东西或者在无头浏览器中以某种方式对 javascript 进行了不同的解释?这是执行登录后的样子,截图使用 puppeteer
const puppeteer = require('puppeteer');
//const {installMouseHelper} = require('./install-mouse-helper');
async function run () {
const browser = await puppeteer.launch({
headless: true,
ignoreHTTPSErrors: true,
args: ['--no-sandbox', '--disable-setuid-sandbox'],
});
const page = await browser.newPage();
//await installMouseHelper(page);
await page.goto("https://dash.bdroppy.com/login?lang=EN", {waitUntil: 'networkidle2'});
await page.waitFor('input[name=email]');
await page.$eval('input[name=email]', el => el.value = 'test@test.com');
await page.$eval('input[name=password]', el => el.value = 'abcdefg');
// const loginButton = await page.$('.AuthSubmit');
// const rect = await page.evaluate((loginButton) => {
// const {top, left, bottom, right} = loginButton.getBoundingClientRect();
// return {top, left, bottom, right};
// }, loginButton);
// const x = (rect.top + rect.right) / 2;
// const y = (rect.left + rect.bottom) / 2;
// console.log(x,y);
// console.log(rect);
await page.mouse.move(290, 539);
await page.mouse.click(290, 539, { button: 'left' })
// console.log(await page.evaluate( async() => {
// const loginbutton = document.elementFromPoint(290, 533);
// await page.waitFor(3000);
// await page.mouse.down();
// await page.mouse.up();
// }));
//await page.mouse.down();
//await page.mouse.up();
// await page.$$eval(selectors[0].click())
await page.waitFor(3000);
//await page.click('.AuthSubmit');
// await page.click('.AuthSubmit');
// await page.$eval('.AuthSubmit CC', el => {
// console.log(el);
// el.click()
// });
//await page.keyboard.press('Enter');
// await page.waitForNavigation();
await page.screenshot({path: 'screenshot.png'});
// page.on('dialog', async (dialog) => {
// console.log(dialog.defaultValue());
// // dialog.accept("Stack Overflow!");
// });
await browser.close();
}
run();
解决方案
这里我使用了输入类型。这将按名称输入。
测试和工作正常。
await page.goto("https://dash.bdroppy.com/login?lang=EN", {waitUntil: 'networkidle2'});
await page.waitFor('input[name=email]');
await page.type('input[name=email]', 'test comment', {delay: 20})
//await page.$eval('input[name=email]', el => el.value = 'test@test.com');
await page.type('input[name=password]', 'test comment', {delay: 20})
//add some delay here. This should work
await page.click('div[class="AuthSubmit CC "]');
也许父元素正在改变,但只有一个电子邮件/密码输入。我们可以使用这个。
推荐阅读
- kendo-ui - Kendo Virtual ComboBox:选中的dataItem为null,不在bar中显示,但在datasource中存在
- ruby-on-rails - 如何在 Rails 应用程序中存储或保存内存加载的图像
- ssh - 无法 ssh 登录到 bitbucket.org
- html - 让 HTML 表格“挤压”
- ios - 在 App Store Connect 中更改现有 IAP 自动续订订阅
- bash - 如何防止执行 shell 命令?
- powershell - 需要使用 powershell 将文件中的 \x0d\x0a 替换为 \x2c\x0d\x0a
- javascript - 从一个组件对服务进行ajax调用并从另一个组件访问响应
- android - Android - 获取位置(地理编码器/谷歌播放服务)?
- spring - 如何确定我的 Spring/Quartz 配置使用了多少连接?