首页 > 解决方案 > 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();

标签: javascriptpuppeteer

解决方案


这里我使用了输入类型。这将按名称输入。

测试和工作正常。

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 "]');

也许父元素正在改变,但只有一个电子邮件/密码输入。我们可以使用这个。


推荐阅读