Puppeteer键盘点击 鼠标移动点击 拖动

简直心累,本篇文章用 Puppeteer 模拟键盘输入包括回车确定、删除,鼠标移动、点击、拖动。在使用过程中,碰到一个大难题,模拟键盘回车键,网上找了很多方法都不行,我等会将我试过的方法都贴出来。本来准备录制GIF效果图,但是失败。这里例子我都试过,基本没问题可以放心使用。

键盘按键输入

本意是模拟搜索,比如去简书、知乎模拟输入关键字然后搜索。但是有些地方并没提供搜索按钮,只能用回车键搜索关键字。结果在使用过程中,回车键代码死活不起作用,差不多查询几个小时,终于找到可行的办法

现在模拟去我博客,搜索关键字 Puppeteer 。这里没效果图,方法是有效的。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        //全屏 浏览器窗口最大化
        args: ['--start-maximized'],
        // slowMo: 500,
    });
    const page = await browser.newPage();
    // 地址栏输入网页地址
    await page.goto('https://guozh.net/');
    await page.setViewport({
        width: 1920,
        height: 1080
    });
    // 输入搜索关键字
    await page.type('input.form-control','puppeteer', {
        delay: 100, // 控制 keypress 也就是每个字母输入的间隔
    });

    // 回车
    await page.keyboard.press('Enter');

})();

注意其中几个地方

  		//全屏 浏览器窗口最大化
        args: ['--start-maximized'],
         
         await page.setViewport({
        width: 1920,
        height: 1080
    });
    
      // 回车
    await page.keyboard.press('Enter');

这里再贴上不起作用我找过的键盘回车代码。

    // await page.keyboard.type(String.fromCharCode(13));
    // await page.keyboard.press('\r');
    // await page.keyboard.press('\n');
    // page.keyboard.press('Enter');
    // await page.keyboard.down('Enter')
    // await page.press('Enter');
    // await page.keyboard.down('Enter')
    // await page.type(String.fromCharCode(13));
    // await page.keyboard.sendCharacter(String.fromCharCode(13));
    // await page.keyboard.press("Enter",{delay:50});

模拟键盘删除字符或字符串

一行字符串,比如「hello world」,如果想只剩下 hello 。我们的操作应该是不断的按下 删除键「Backspace」,不断删除直到只剩下 hello 。或者也可以,按住「Shift」不放,不断操作方向左键,批量选择字符串,选择好「 world」后,放开「Shift」然后再删除。

现在用代码来模拟后者操作

await page.keyboard.type('Hello World!');
await page.keyboard.press('ArrowLeft');

await page.keyboard.down('Shift');
for (let i = 0; i < ' World'.length; i++)
  await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');

await page.keyboard.press('Backspace');
// 结果字符串最终为 'Hello!'

鼠标移动

鼠标移动API很简单,仅仅如下

   await page.mouse.move(x,y);

难点是如何获取 x y 坐标值。推荐一种常见方法,获取元素 element 在整个页面中的坐标值。前面提到过,用 $ 可以获取到某元素对象。接着对此元素使用 boundingBox 方法,获取的对象有点类似 css 的盒子模型。再对盒子模型使用如下 API 就可以获取到 x y 坐标值啦。

  let element  = await page.$("");
  
  let box = await element.boundingBox();
  
  elementHandle.boundingBox()
  returns: <Promise<?Object>>
	x <number> 元素的 x 坐标(以像素为单位)。
	y <number> 元素的 y 坐标(以像素为单位)。
	width <number> 元素的像素宽度。
	height <number> 元素的像素高度。

有点要注意,鼠标移动在视觉上是看不到鼠标移动效果的,但确实移动了。

鼠标拖拽

这就比较简单了,虽然没有提供鼠标拖拽API,可以通过 按下鼠标 移动鼠标 放开鼠标 来模拟实现。

 await page.mouse.down();
 await page.mouse.move(x,y,{steps:z});
 await page.mouse.up();


参考

https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v1.18.1&show=api-class-keyboard

https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v1.18.1&show=api-elementhandleboundingbox

https://blog.csdn.net/Revivedsun/article/details/82121123

怎么说呢?不管有用没,还是想加上这句
老郭种树原创,转载请加上Puppeteer键盘点击 鼠标移动点击 拖动
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注