文档

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. tarjan复习笔记 双连通分量，强连通分量

    声明:图自行参考割点和桥QVQ 双连通分量 如果一个无向连通图\(G=(V,E)\)中不存在割点(相对于这个图),则称它为点双连通图 如果一个无向连通图\(G=(V,E)\)中不存在割边(相对于这个图 ...

  2. POJ2961_kmp

    Period Time Limit: 3000MS   Memory Limit: 30000KB   64bit IO Format: %I64d & %I64u Submit Status ...

  3. loj10153二叉苹果树

    有一棵二叉苹果树,如果数字有分叉,一定是分两叉,即没有只有一个儿子的节点.这棵树共 N 个节点,标号 1 至 N,树根编号一定为 1. 我们用一根树枝两端连接的节点编号描述一根树枝的位置.一棵有四根树 ...

  4. PowerBI数据建模时的交叉连接问题

    方案一.在PowerPivot中,将其中一张表复制多份,分别与另一张表做链接. 方案二.在PowerQuery中,做多次合并查询,把所有数据集中在一张表中,方便后面的数据分析. 思考:不仅仅是在Pow ...

  5. ts中提示“绑定元素“routes”隐式具有“any”类型”

    思考单独的.ts和typescript框架在vscode层的差异,想想只有launch.json和tsconfig.json,一个个属性过去后,发现是tsconfig.json配置项"noI ...

  6. JavaWeb——Ajax与MVC学习总结

    Ajax: 什么是Ajax? 为什么使用Ajax? 使用jquery Ajax实现登录 Ajax实例练习: 设计模式 设计模式的定义: 设计模式的作用: MVC设计模式 MVC设计模式的模块组成: M ...

  7. Docker and Kubernetes -- 监控（weave scope）

    docker常用的监控工具 weave scope 简介 Weave Scope是Docker和Kubernetes的可视化监控管理软件 Weave Scope 会自动生成容器之间的关系图,方便理解容 ...

  8. Java 复习整理day05

    1 package com.it.demo01_oop; 2 3 import java.util.Arrays; 4 5 /* 6 案例: 演示面向过程和面向对象代码的区别 7 8 面向过程编程思想 ...

  9. 深入理解 ProtoBuf 原理与工程实践（概述）

    ProtoBuf 作为一种跨平台.语言无关.可扩展的序列化结构数据的方法,已广泛应用于网络数据交换及存储.随着互联网的发展,系统的异构性会愈发突出,跨语言的需求会愈加明显,同时 gRPC 也大有取代R ...

  10. java封装详解

    三大特性之---封装 封装从字面上来理解就是包装的意思,专业点就是信息隐藏,是指利用抽象数据类型将数据和基于数据的操作封装在一起,使其构成一个不可分割的独立实体,数据被保护在抽象数据类型的内部,尽可能 ...