文档

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. Webpack4.0各个击破（5）module篇

    一. 模块化乱炖 脚本合并是基于模块化规范的,javascript模块化是一个非常混乱的话题,各种[*MD]规范乱飞还要外加一堆[*.js]的规范实现.现代化前端项目多基于框架进行开发,较为流行的框架 ...

  2. fastHttp服务端处理请求的过程

    Github 地址 https://github.com/valyala/fasthttp fastHttp 服务端的处理请求的过程 工作过程 主要代码 设置监听地址 server.go func ( ...

  3. 使用 shell 脚本自动对比两个安装目录并生成差异补丁包

    问题的提出 公司各个业务线的安装包小则几十兆.大则几百兆,使用自建的升级系统向全国百万级用户下发新版本时,流量耗费相当惊人.有时新版本仅仅改了几个 dll ,总变更量不过几十 K 而已,也要发布一个完 ...

  4. 手机用itunes安装更新系统

    1.[Shift+更新]:仅对固件进行更新,保留现有资料和已经安装的程序.但是已经越狱的iPhone或iPad禁止使用此方法!否则有后遗症!没有越狱的iPhone或iPad则可以直接使用此方式.2.[ ...

  5. ES6(三) Promise 的基本使用方式

    基本用法 关于Promise的资料,网上有很多了,这里简单粗暴一点,直接上代码. 假设我们要做一个访问后端API的函数,那么我们可以这样模拟一下. const mySend = (url, data) ...

  6. 掌握数位dp

    最近遇到了数位dp题目,于是就屁颠屁颠的跑过来学习数位dp了~ "在信息学竞赛中,有这样一类问题:求给定区间中,满足给定条件的某个D 进制数或此类数的数量.所求的限定条件往往与数位有关,例如 ...

  7. 2019 Multi-University Training Contest 1 Path(最短路+最小割)

    题意:给你n个点 m条边 现在你能够堵住一些路 问怎样能让花费最少且让1~n走的路比最短路的长度要长 思路:先跑一边最短路 建一个最短路图 然后我们跑一边最大流求一下最小割即可 #include &l ...

  8. Java——方法及构造方法、intellij IDEA中的一些快捷键

    intellij IDEA中的一些快捷键: 一.方法基础 给你一个两个int类型的数相加的例子: 这个例子说明了 public static void main(String[] args) {}相当 ...

  9. python代理池的构建2——代理ip是否可用的处理和检查

    上一篇博客地址:python代理池的构建1--代理IP类的构建,以及配置文件.日志文件.requests请求头 一.代理ip是否可用的处理(httpbin_validator.py) #-*-codi ...

  10. word2vector论文笔记

    背景 很多当前的NLP系统和技术都把单词像ont-hot一样当做原子性的一个概念去对待,单纯就是一个索引,无法表示词之间的相似性.原因就是往往一个简单的.鲁棒的.可观测的模型在海量数据集上的学习效果要 ...