Puppeteer: 鼠标移动
2024-10-20 09:35:01
mouse.click 是 mouse.move,mouse.down 和 mouse.up 的快捷方式
main.js
const pptr = require('puppeteer');
const gotoUrl = 'http://127.0.0.1:5500/index.html';
(async () => {
const browser = await pptr.launch({
headless: false,
slowMo: 250,
});
const page = await browser.newPage();
page.on('console', msg => {
console.log(msg.text());
});
await page.goto(gotoUrl);
await page.mouse.move(100, 100);
await page.mouse.down();
await page.mouse.move(200, 100, {
steps: 3,
});
await page.mouse.move(200, 200);
await page.mouse.move(100, 200);
await page.mouse.move(100, 100);
await page.mouse.up();
await page.mouse.move(150, 150);
await page.mouse.down();
setTimeout(async () => {
await browser.close();
}, 2000);
})();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
html,
body {
margin: 0;
}
</style>
</head>
<body>
<script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>
<script src="https://unpkg.com/p5@0.7.2/lib/addons/p5.dom.min.js"></script>
<script>
let isButtonRight = false;
let make = null;
let root = null;
let makeSize = null;
function setup() {
root = createDiv();
createCanvas(600, 400)
.parent(root)
.id('js-canvas');
background(0);
makeSize = createVector(40, 40);
createmake();
document.getElementById('js-canvas').oncontextmenu = e =>
e.preventDefault();
document.getElementById('js-make').oncontextmenu = e =>
e.preventDefault();
}
function draw() {
if (mouseIsPressed) {
// 鼠标按下画
if (mouseIsPressed && mouseButton === LEFT) {
// stroke(random(255), random(255), random(255));
stroke('red');
strokeWeight(4);
line(
isButtonRight ? mouseX : pmouseX,
isButtonRight ? mouseY : pmouseY,
mouseX,
mouseY,
);
isButtonRight = false;
} else if (mouseButton === RIGHT) {
isButtonRight = true;
// if(keyCode === 18){// 按下 alt 相加
// makeSize.add(0.5, 0.5);
// }else if(keyCode === 17){ // 按下 ctrl 相减
// makeSize.sub(0.5, 0.5);
// }
make.size(makeSize.x, makeSize.y);
make.position(mouseX, mouseY).show();
fill(0);
noStroke();
ellipseMode(CENTER);
ellipse(mouseX, mouseY, makeSize.x);
}
}
if (keyIsPressed) {
// 按下空格键清空画布
if (keyCode == 32) background(0);
}
}
function mouseReleased() {
if (mouseButton === RIGHT) {
make.hide();
makeSize = createVector(40, 40);
}
}
// make在右键被呼起时才显示, 右键被抬起则隐藏
function createmake() {
make = createDiv()
.parent(root)
.id('js-make')
.size(makeSize.x, makeSize.y)
.style('background-color', '#fff')
.style('border-radius', '50%')
.style('transform', 'translate(-40%, -40%)')
.hide();
}
</script>
</body>
</html>
最新文章
- linux内核数据结构之kfifo
- java之文件基本操作
- Oracle监听服务启动失败案例
- 采用ubuntu系统来安装tensorflow
- hibernate......1、2级缓存
- 未能从程序集“System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”中加载类型“System.ServiceModel.Activation.HttpModule”。
- register_shutdown_function 函数详解
- GBDT原理实例演示 1
- lintcode:删除链表中指定元素
- Downloading the Google Cloud Storage Client Library
- POJ 1236 Network of Schools[连通分量]
- 在ASP.NET中,IE与Firefox下载文件带汉字名时乱码的解决方法
- HDFS Architecture--官方文档
- POJ1502
- Nginx的安装及简单配置
- 在线文档转换API word,excel,ppt等在线文件转pdf、png
- python3中bytes与string的互相转换
- Java关于数字工具类~持续汇总~
- Java 浅拷贝和深拷贝
- iis7下url重写后,已存在的html不能访问了(未能执行URL)的解决方法
热门文章
- SparkSql 数据类型转换
- OSPF路由汇总
- 用werkzeug实现一个简单的python web框架
- Sqoop import export参数
- 最大子阵 DP or 前缀和orb暴力 能过
- Codeforces Round #652 (Div. 2) A. FashionabLee(几何)
- 【noi 2.6_9270】&;【poj 2440】DNA(DP)
- Who Gets the Most Candies?
- 二分图最大权匹配问题&;&;KM算法讲解 &;&; HDU 2255 奔小康赚大钱
- Educational DP Contest H - Grid 1 (DP)