简直心累，本篇文章用 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://blog.csdn.net/Revivedsun/article/details/82121123
本文由老郭种树原创，转载请注明：https://guozh.net/puppeteer-keybord-click-enter-mouse-click-move/