|
|
|
|
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[98407],{46222:(e,s,r)=>{r.r(s),r.d(s,{assets:()=>i,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>c});var t=r(85893),n=r(11151);const o={sidebar_label:"Mouse"},a="Mouse class",d={id:"api/puppeteer.mouse",title:"Mouse class",description:"The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport.",source:"@site/versioned_docs/version-22.8.0/api/puppeteer.mouse.md",sourceDirName:"api",slug:"/api/puppeteer.mouse",permalink:"/api/puppeteer.mouse",draft:!1,unlisted:!1,tags:[],version:"22.8.0",frontMatter:{sidebar_label:"Mouse"},sidebar:"api",previous:{title:"Keyboard.up",permalink:"/api/puppeteer.keyboard.up"},next:{title:"Mouse.click",permalink:"/api/puppeteer.mouse.click"}},i={},c=[{value:"Signature:",id:"signature",level:4},{value:"Remarks",id:"remarks",level:2},{value:"Example 1",id:"example-1",level:2},{value:"Example 2",id:"example-2",level:2},{value:"Methods",id:"methods",level:2}];function l(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,n.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"mouse-class",children:"Mouse class"}),"\n",(0,t.jsx)(s.p,{children:"The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport."}),"\n",(0,t.jsx)(s.h4,{id:"signature",children:"Signature:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typescript",children:"export declare abstract class Mouse\n"})}),"\n",(0,t.jsx)(s.h2,{id:"remarks",children:"Remarks"}),"\n",(0,t.jsxs)(s.p,{children:["Every ",(0,t.jsx)(s.code,{children:"page"})," object has its own Mouse, accessible with [",(0,t.jsx)(s.code,{children:"page.mouse"}),"](#pagemouse)."]}),"\n",(0,t.jsxs)(s.p,{children:["The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the ",(0,t.jsx)(s.code,{children:"Mouse"})," class."]}),"\n",(0,t.jsx)(s.h2,{id:"example-1",children:"Example 1"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// Using \u2018page.mouse\u2019 to trace a 100x100 square.\nawait page.mouse.move(0, 0);\nawait page.mouse.down();\nawait page.mouse.move(0, 100);\nawait page.mouse.move(100, 100);\nawait page.mouse.move(100, 0);\nawait page.mouse.move(0, 0);\nawait page.mouse.up();\n"})}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": The mouse events trigger synthetic ",(0,t.jsx)(s.code,{children:"MouseEvent"}),"s. This means that it does not fully replicate the functionality of what a normal user would be able to do with their mouse."]}),"\n",(0,t.jsxs)(s.p,{children:["For example, dragging and selecting text is not possible using ",(0,t.jsx)(s.code,{children:"page.mouse"}),". Instead, you can use the ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/getSelection",children:"`DocumentOrShadowRoot.getSelection()`"})," functionality implemented in the platform."]}),"\n",(0,t.jsx)(s.h2,{id:"example-2",children:"Example 2"}),"\n",(0,t.jsx)(s.p,{children:"For example, if you want to select all content between nodes:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"await page.evaluate(\n (from, to) => {\n const selection = from.getRootNode().getSelection();\n const range = document.createRange();\n range.setStartBefore(from);\n range.setEndAfter(to);\n selection.removeAllRanges();\n selection.addRange(range);\n },\n fromJSHandle,\n toJSHandle\n);\n"})}),"\n",(0,t.jsx)(s.p,{children:"If you then would want to copy-paste your selection, you can use the clipboard api:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// The clipboard api does not allow you to copy, unless the tab is focused.\nawait page.bringToFront();\nawait page.evaluate(() => {\n // Copy the selected content to the clipboard\n document.execCommand('co
|
