文档

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. LOJ10144宠物收养所

    HNOI 2004 最近,阿 Q 开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,阿 Q 根据领养者的要求通过他自己发明的 ...

  2. （十三）整合 SpringSecurity 框架，实现用户权限管理

    整合 SpringSecurity 框架,实现用户权限管理 1.Security简介 1.1 基础概念 1.2 核心API解读 2.SpringBoot整合SpringSecurity 2.1 流程描 ...

  3. Jenkins免密码登录

    Jenkins免密码登录 相关内容原文地址: 简书:海边的卡夫卡丶:Jenkins免密码登录 昨天惊现一个神奇的问题,Jenkins无法登录,无论是初始化的账号密码,还是admin用户,都登录不进去了 ...

  4. windows下hash抓取的几种方式

    前提:在渗透测试过程中,对于windows系统的机器渗透需要注意hash的获取,其中hash分为LM-HASH与NTLM-HASH,在windows系统中,hash的默认存储位置为: C:\Windo ...

  5. html输入框输入显示剩余字数

     效果图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  6. vue开发东京买菜,全栈项目,前端django,带手机GPS精准定位,带发票系统,带快递系统,带微信/支付宝/花呗/银行卡支付/带手机号一键登陆,等等

    因为博客园不能发视频,所以,完整的视频,开发文档,源码,请向博主索取 完整视频+开发文档+源码,duanshuiLu.com下载 vue+django手机购物商城APP,带支付,带GPS精准定位用户, ...

  7. Codeforces Round #622 (Div. 2) A. Fast Food Restaurant（全排列，DFS）

    Codeforces Round #622 (Div. 2) A. Fast Food Restaurant 题意: 你是餐馆老板,虽然只会做三道菜,上菜时还有个怪癖:一位客人至少上一道菜,且一种菜最 ...

  8. hdu 6794 Tokitsukaze and Multiple 前缀和思想+思维

    题意: t组输入,给你一个长度为n的数组,你每次可以从数组中找到a[i]和a[i+1],然后用a[i]+a[i+1]这个新元素来覆盖掉a[i]和a[i+1]的位置(1<=i<n),从而数组 ...

  9. hdu4686 Arc of Dream

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

  10. java——final、权限修饰符

    final修饰类:  final修饰成员方法: final修饰局部变量的时候: 对于基本类型来说,变量的数值不能改变 对于引用类型来说,变量的地址不能改变 final修饰成员变量的情况: 权限修饰符: