文档

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>

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. 小w、小j和小z

    n个月没更了,现在学的东西很难,掌握不好,不敢更! 这个题目既不超范围又足够难想,反正我没想出来,很好的题目! 我发现noi.ac上的题目很不错!!! ------------------------ ...

  2. jvm 总体梳理

    jvm 总体梳理 1.类的加载机制 1.1什么是类的加载 1.2类的生命周期 1.3类加载器 1.4类加载机制 2.jvm内存结构 JVM内存模型 2.1jvm内存结构 2.2对象分配规则 3.GC算 ...

  3. Lambda表达式及相关练习

    语法格式一无参数无返回值 语法格式二有一个参数并且无返回值 语法格式三若只有一个参数小括号可以省略不写 语法格式四有两个以上的参数有返回值并且Lambda体中有多条语句 语法格式五若Lambda体中只 ...

  4. Spring Boot：定时任务与图片压缩处理

    一.定时任务 1.创建定时任务 2.@Scheduled 二.图片压缩处理 1.添加thumbnailator依赖 2.创建图片处理类 3.基本使用方法 一.定时任务 项目中可以采用定时任务进行一些操 ...

  5. Linux 防火墙相关操作

    目录 1.查看防火墙状态 2.部署防火墙 3.常用操作 4.其他操作 1.查看防火墙状态 systemctl status firewalld 绿字部分 Active:active(running) ...

  6. Hive配置Tez引擎踩坑

    框架版本 Hadoop 2.7.7 Hive 2.3.7 Tez 0.9.2 保证hadoop集群启动,hive元数据服务启动 上传tez到HDFS tar -zxvf apache-tez-0.9. ...

  7. Codeforces Round #626 (Div. 2)

    Contest Info Practice Link Solved A B C D E F 4/6 O Ø Ø  Ø  Ø  - O 在比赛中通过 Ø 赛后通过 ! 尝试了但是失败了 - 没有尝试 S ...

  8. hdu 2089不要62 (数位dp)

    Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来 ...

  9. Codeforces 1144F Graph Without Long Directed Paths DFS染色

    题意: 输入一张有向图,无自回路和重边,判断能否将它变为有向图,使得图中任意一条路径长度都小于2. 如果可以,按照输入的边的顺序输出构造的每条边的方向,构造的边与输入的方向一致就输出1,否则输出0. ...

  10. 洛谷 P6225 [eJOI2019]异或橙子 (树状数组)

    题意:有\(n\)个数,起始值均为\(0\),进行\(q\)次操作,每次输入三个数,如果第一个数为\(1\),则将第\(i\)个数修改为\(j\),如果为\(2\),则求区间\([l,r]\)内的所有 ...