文档

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. loj10014数列分段二

    10014. 「一本通 1.2 练习 1」数列分段 II 题目描述 对于给定的一个长度为 n 的正整数数列 A ,现要将其分成 m 段,并要求每段连续,且每段和的最大值最小. 例如,将数列 4,2,4 ...

  2. Language Guide (proto3) | proto3 语言指南（六）嵌套类型

    Nested Types - 嵌套类型 您可以在其他消息类型中定义和使用消息类型,如以下示例所示--这里的Result消息是在SearchResponse消息中定义的: message SearchR ...

  3. Docker容器启动Mysql，Docker实现Mysql主从，读写分离

    Docker容器启动Mysql,Docker实现Mysql主从,读写分离 一.Docker文件编排 二.配置主从复制 2.1 配置master 2.2 配置slave 三.验证主从复制 3.1 mas ...

  4. Windows操作Redis及Redis命令

    Windows操作Redis及Redis命令 一.Windows下操作Redis 设置密码 打开redis服务 Windows 下的redis命令行 二.redis常用命令大全 key String ...

  5. Phoenix简介概述，Phoenix的Java API 相关操作优秀案例

    Phoenix简介概述,Phoenix的Java API 相关操作优秀案例 一.Phoenix概述简介 二.Phoenix实例一:Java API操作 2.1 phoenix.properties 2 ...

  6. spark SQL（三）数据源 Data Source----通用的数据 加载/保存功能

    Spark SQL 的数据源------通用的数据 加载/保存功能 Spark SQL支持通过DataFrame接口在各种数据源上进行操作.DataFrame可以使用关系变换进行操作,也可以用来创建临 ...

  7. java身份证号校验

    package com.pt.modules.contract.utils; import java.text.ParseException; import java.text.SimpleDateF ...

  8. 1. Centos 7重置root密码

    1.开机启动系统,不断按"↑"和"↓",在如下引导界面按"e",编辑引导项 2.按"↓"找到下图显示的代码 删除代码最后 ...

  9. 【bzoj 4455】小星星（树型DP+容斥原理+dfs建树和计算的2种方式）

    题意:给一个n个点的图和一个n个点的树,求图和树上的点一一对应的方案数.(N<=17) 解法:1.在树的结构上进行tree DP,f[i][j]表示树上点 i 对应图上点 j 时,这个点所在子树 ...

  10. 【poj 1988】Cube Stacking（图论--带权并查集）

    题意:有N个方块,M个操作{"C x":查询方块x上的方块数:"M x y":移动方块x所在的整个方块堆到方块y所在的整个方块堆之上}.输出相应的答案. 解法: ...