puppeteer在浏览器中上传文件

最新推荐文章于 2024-10-12 16:00:04 发布

大力pig

最新推荐文章于 2024-10-12 16:00:04 发布

阅读量949

点赞数

分类专栏： js 文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_53753920/article/details/129466579

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

文章介绍了如何利用Puppeteer库在浏览器中进行文件上传和模拟键盘操作。通过示例代码展示了如何定位页面元素，如soutu-btn和upload-pic按钮，进行点击及上传文件，并使用page.keyboard.press()方法模拟按下Esc键等键盘事件。

摘要由CSDN通过智能技术生成

前言

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();