目录

前言

page.keyboard介绍 

功能介绍，代码演示

前言

本节有一个通过puppeteer在浏览器中上传文件的小演示。

css定位元素标签介绍， 可以通过document.querySelector定位元素。

span.soutu-btn : span类型的按钮

input.upload-pic : input类型的按钮

page.keyboard介绍 

page.keyboard.press('Escape'); 方法介绍： page方法里的一个keyboard（）方法，可以调用Keyboard对象， 模拟键盘的各种操作。keyboard事件类聚焦如下：

// 模拟按下键盘上的某个按键
await page.keyboard.press('Enter');
await page.keyboard.press('Tab');// 模拟释放键盘上的某个按键
await page.keyboard.up('Shift');// 输入文本
await page.keyboard.type('hello world');// 使用修饰键
await page.keyboard.down('Shift');
await page.keyboard.press('KeyA');
await page.keyboard.up('Shift');

功能介绍，代码演示

打开浏览器，等待图片按钮出现，点击上传图片， 定位到上传路径，调用keyboard的press方法模拟人敲击鼠标的esc键， 其他引入puppeteer类，设定浏览器窗口的代码就不多介绍了。代码如下。

const puppeteer = require('puppeteer');
async function upload() {const broswer = await puppeteer.launch({headless: false, defaultViewport: {width: 1920,height: 1020}});const page = await broswer.newPage();await page.goto('https://www.xx.com');const span_soutu = await page.waitForSelector('span.soutu-btn');//await span_soutu.click();const input_uploadPic = await page.waitForSelector('input.upload-pic');//await input_uploadPic.click();input_uploadPic.uploadFile('D:\\projects\\learn-ts\\2023-03-11 09_22_32-.png');await page.keyboard.press('Escape');
}
upload();