文档

mouse.click 是 mouse.move，mouse.down 和 mouse.up 的快捷方式

main.js

  1. const pptr = require('puppeteer');
  2. const gotoUrl = 'http://127.0.0.1:5500/index.html';
  4. (async () => {
  5.   const browser = await pptr.launch({
  6.     headless: false,
  7.     slowMo: 250,
  8.   });
  9.   const page = await browser.newPage();
  11.   page.on('console', msg => {
  12.     console.log(msg.text());
  13.   });
  14.   await page.goto(gotoUrl);
  16.   await page.mouse.move(100, 100);
  18.   await page.mouse.down();
  19.   await page.mouse.move(200, 100, {
  20.     steps: 3,
  21.   });
  22.   await page.mouse.move(200, 200);
  23.   await page.mouse.move(100, 200);
  24.   await page.mouse.move(100, 100);
  25.   await page.mouse.up();
  27.   await page.mouse.move(150, 150);
  28.   await page.mouse.down();
  30.   setTimeout(async () => {
  31.     await browser.close();
  32.   }, 2000);
  33. })();

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.     <style>
  9.       html,
  10.       body {
  11.         margin: 0;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>
  17.     <script src="https://unpkg.com/p5@0.7.2/lib/addons/p5.dom.min.js"></script>
  18.     <script>
  19.       let isButtonRight = false;
  20.       let make = null;
  21.       let root = null;
  22.       let makeSize = null;
  24.       function setup() {
  25.         root = createDiv();
  26.         createCanvas(600, 400)
  27.           .parent(root)
  28.           .id('js-canvas');
  29.         background(0);
  31.         makeSize = createVector(40, 40);
  32.         createmake();
  34.         document.getElementById('js-canvas').oncontextmenu = e =>
  35.           e.preventDefault();
  36.         document.getElementById('js-make').oncontextmenu = e =>
  37.           e.preventDefault();
  38.       }
  40.       function draw() {
  41.         if (mouseIsPressed) {
  42.           // 鼠标按下画
  43.           if (mouseIsPressed && mouseButton === LEFT) {
  44.             // stroke(random(255), random(255), random(255));
  45.             stroke('red');
  46.             strokeWeight(4);
  47.             line(
  48.               isButtonRight ? mouseX : pmouseX,
  49.               isButtonRight ? mouseY : pmouseY,
  50.               mouseX,
  51.               mouseY,
  52.             );
  53.             isButtonRight = false;
  54.           } else if (mouseButton === RIGHT) {
  55.             isButtonRight = true;
  57.             //  if(keyCode === 18){// 按下 alt 相加
  58.             //   makeSize.add(0.5, 0.5);
  59.             // }else if(keyCode === 17){  // 按下 ctrl 相减
  60.             //   makeSize.sub(0.5, 0.5);
  61.             // }
  62.             make.size(makeSize.x, makeSize.y);
  63.             make.position(mouseX, mouseY).show();
  65.             fill(0);
  66.             noStroke();
  67.             ellipseMode(CENTER);
  68.             ellipse(mouseX, mouseY, makeSize.x);
  69.           }
  70.         }
  72.         if (keyIsPressed) {
  73.           // 按下空格键清空画布
  74.           if (keyCode == 32) background(0);
  75.         }
  76.       }
  78.       function mouseReleased() {
  79.         if (mouseButton === RIGHT) {
  80.           make.hide();
  81.           makeSize = createVector(40, 40);
  82.         }
  83.       }
  85.       // make在右键被呼起时才显示， 右键被抬起则隐藏
  86.       function createmake() {
  87.         make = createDiv()
  88.           .parent(root)
  89.           .id('js-make')
  90.           .size(makeSize.x, makeSize.y)
  91.           .style('background-color', '#fff')
  92.           .style('border-radius', '50%')
  93.           .style('transform', 'translate(-40%, -40%)')
  94.           .hide();
  95.       }
  96.     </script>
  97.   </body>
  98. </html>

Puppeteer: 鼠标移动的更多相关文章

  1. puppeteer，新款headless chrome！

    puppeteer puppeteer是一种谷歌开发的Headless Chrome,因为puppeteer的出现,业内许多自动化测试库停止维护,比如PhantomJS,Selenium IDE fo ...

  2. Puppeteer: 更友好的 Headless Chrome Node API

    很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常 ...

  3. puppeteer（三）常用API

    1.Puppeteer 简介 Puppeteer 是一个node库,他提供了一组用来操纵Chrome的API, 通俗来说就是一个 headless chrome浏览器 (当然你也可以配置成有UI的,默 ...

  4. puppeteer，新款headless chrome

    puppeteer puppeteer是一种谷歌开发的Headless Chrome,因为puppeteer的出现,业内许多自动化测试库停止维护,比如PhantomJS,Selenium IDE fo ...

  5. 基于jest和puppeteer的前端自动化测试实战

    前端测试现状 经常听到后端同学说“单元测试”,前端写过测试用例的有多少?答案是:并不多,为什么呢?两个主要原因 1.前端属于GUI软件,浏览器众多,兼容问题让人头大,用户量有一定规模的浏览器包括: I ...

  6. 使用Puppeteer进行数据抓取(二)——Page对象

    page对象是puppeteer最常用的对象,它可以认为是chrome的一个tab页,主要的页面操作都是通过它进行的.Google的官方文档详细介绍了page对象的使用,这里我只是简单的小结一下. 客 ...

  7. 前端测试框架 puppeteer 文档翻译

    puppeteer puppeteer 是一个通过DevTools 协议提供高级API 来控制 chrome,chromium 的 NODE库; puppeteer默认运行在 headless 模式, ...

  8. 关于Puppeteer的那些事儿

    最近开始上手一个自动化测试工具Puppeteer,来谈一谈关于它的一些事儿. Puppeteer中文文档:https://zhaoqize.github.io/puppeteer-api-zh_CN/ ...

  9. 【PUPPETEER】初探之拖拽操作（五）

    一.知识点 page.mouse elementHandle.boundingBox() ignoreDefaultArgs:['--enable-automation']   waitUntil 二 ...

随机推荐

  1. 在Ubuntu下安装Jenkins

    一.安装Jenkins 1. 确保Java环境已经安装配置好 java -version 2. 将存储库密钥添加到系统 wget -q -O - https://pkg.jenkins.io/debi ...

  2. 洛谷P4180

    被教练安排讲题 可恶 这道题我是十月初上课时花了一下午做出来的,当时连倍增都不会,过程比较困难,现在看看还可以 本来想口胡一发,后来想了想可能以后要用,还是写成文章吧 Description 求一棵严 ...

  3. Python Package(转)

    http://www.cnpythoner.com/post/2.html python中的Module是比较重要的概念.常见的情况是,事先写好一个.py文 件,在另一个文件中需要import时,将事 ...

  4. MapReduce参数调优

    原文链接:http://blog.javachen.com/2014/06/24/tuning-in-mapreduce/ 本文主要记录Hadoop 2.x版本中MapReduce参数调优,不涉及Ya ...

  5. 2019HDU多校 Round10

    Solved:3 Rank:214 08 Coin 题意:n组硬币 每组有两个 分别有自己的价值 每组的第一个被拿了之后才能拿第二个 问拿1,2....2n个硬币的最大价值 题解:之前贪心带反悔的做法 ...

  6. hdu5433 Xiao Ming climbing

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...

  7. PowerShell随笔3 ---别名

    上一篇提到了别名,这个有必要说一下,因为我们常常会遇到以下两种情况: 自己写脚本,想快速一些,使用命名 看别人的脚本,发现别人和你想的一样,用了别名,但是你忘记了这个别名是什么意思. 我们可以通过Ge ...

  8. aop详解与实战

    1. 什么是AOP aop:面向切面编程.采用横向机制. oop:面向对象编程.采用纵向机制. AOP,面向切面编程.就是通过某个切入点(比如方法开始.结束)向某个切面(被切的对象)切入环绕通知(需要 ...

  9. kubernetes实战-交付dubbo服务到k8s集群（五）交付dubbo-monitor监控服务到k8s

    首先下载 dubbo-monitor源码包7-200 dubbo-monitor是监控zookeeper状态的一个服务,另外还有dubbo-admin,效果一样,感兴趣的可以自己研究一下. # cd ...

  10. Microsoft Office Excel 2010 常用操作

    1.添加下拉菜单 (1)选中单元格 (2)数据--数据有效性--数据有效性 (3)在"有效性条件"的"允许"处,选择"序列",并在新出现的& ...