/*! For license information please see b91fb5fb.38fde214.js.LICENSE.txt */
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[79153],{90567:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>i,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>c});var r=t(85893),n=t(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/../docs/api/puppeteer.mouse.md",sourceDirName:"api",slug:"/api/puppeteer.mouse",permalink:"/next/api/puppeteer.mouse",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{sidebar_label:"Mouse"},sidebar:"api",previous:{title:"Keyboard.up",permalink:"/next/api/puppeteer.keyboard.up"},next:{title:"Mouse.click",permalink:"/next/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,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.h1,{id:"mouse-class",children:"Mouse class"}),"\n",(0,r.jsx)(s.p,{children:"The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport."}),"\n",(0,r.jsx)(s.h4,{id:"signature",children:"Signature:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-typescript",children:"export declare abstract class Mouse\n"})}),"\n",(0,r.jsx)(s.h2,{id:"remarks",children:"Remarks"}),"\n",(0,r.jsxs)(s.p,{children:["Every ",(0,r.jsx)(s.code,{children:"page"})," object has its own Mouse, accessible with [",(0,r.jsx)(s.code,{children:"page.mouse"}),"](#pagemouse)."]}),"\n",(0,r.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,r.jsx)(s.code,{children:"Mouse"})," class."]}),"\n",(0,r.jsx)(s.h2,{id:"example-1",children:"Example 1"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note"}),": The mouse events trigger synthetic ",(0,r.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,r.jsxs)(s.p,{children:["For example, dragging and selecting text is not possible using ",(0,r.jsx)(s.code,{children:"page.mouse"}),". Instead, you can use the ",(0,r.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,r.jsx)(s.h2,{id:"example-2",children:"Example 2"}),"\n",(0,r.jsx)(s.p,{children:"For example, if you want to select all content between nodes:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsx)(s.p,{children:"If you then would want to copy-paste your selection, you can use the clipboard api:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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('copy');\n  // Obtain the content of the clipboard as a string\n  return navigator.clipboard.readText();\n});\n"})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note"}),": If you want access to the clipboard API, you have to give it permission to do so:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"await browser\n  .defaultBrowserContext()\n  .overridePermissions('<your origin>', ['clipboard-read', 'clipboard-write']);\n"})}),"\n",(0,r.jsx)(s.h2,{id:"methods",children:"Methods"}),"\n",(0,r.jsxs)("table",{children:[(0,r.jsx)("thead",{children:(0,r.jsxs)("tr",{children:[(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Method"})}),(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Modifiers"})}),(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Description"})})]})}),(0,r.jsxs)("tbody",{children:[(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"click",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.click",children:"click(x, y, options)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsxs)(s.p,{children:["Shortcut for ",(0,r.jsx)(s.code,{children:"mouse.move"}),", ",(0,r.jsx)(s.code,{children:"mouse.down"})," and ",(0,r.jsx)(s.code,{children:"mouse.up"}),"."]})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"down",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.down",children:"down(options)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:"Presses the mouse."})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"drag",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.drag",children:"drag(start, target)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsxs)(s.p,{children:["Dispatches a ",(0,r.jsx)(s.code,{children:"drag"})," event."]})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"draganddrop",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.draganddrop",children:"dragAndDrop(start, target, options)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:"Performs a drag, dragenter, dragover, and drop in sequence."})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"dragenter",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.dragenter",children:"dragEnter(target, data)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsxs)(s.p,{children:["Dispatches a ",(0,r.jsx)(s.code,{children:"dragenter"})," event."]})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"dragover",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.dragover",children:"dragOver(target, data)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsxs)(s.p,{children:["Dispatches a ",(0,r.jsx)(s.code,{children:"dragover"})," event."]})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"drop",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.drop",children:"drop(target, data)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:"Performs a dragenter, dragover, and drop in sequence."})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"move",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.move",children:"move(x, y, options)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:"Moves the mouse to the given coordinate."})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"reset",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.reset",children:"reset()"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:"Resets the mouse to the default state: No buttons pressed; position at (0,0)."})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"up",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.up",children:"up(options)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:"Releases the mouse."})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"wheel",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse.wheel",children:"wheel(options)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsxs)(s.p,{children:["Dispatches a ",(0,r.jsx)(s.code,{children:"mousewheel"})," event."]})})]})]})]})]})}function p(e={}){const{wrapper:s}={...(0,n.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},75251:(e,s,t)=>{var r=t(67294),n=Symbol.for("react.element"),o=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,d=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i={key:!0,ref:!0,__self:!0,__source:!0};function c(e,s,t){var r,o={},c=null,l=null;for(r in void 0!==t&&(c=""+t),void 0!==s.key&&(c=""+s.key),void 0!==s.ref&&(l=s.ref),s)a.call(s,r)&&!i.hasOwnProperty(r)&&(o[r]=s[r]);if(e&&e.defaultProps)for(r in s=e.defaultProps)void 0===o[r]&&(o[r]=s[r]);return{$$typeof:n,type:e,key:c,ref:l,props:o,_owner:d.current}}s.Fragment=o,s.jsx=c,s.jsxs=c},85893:(e,s,t)=>{e.exports=t(75251)},11151:(e,s,t)=>{t.d(s,{Z:()=>d,a:()=>a});var r=t(67294);const n={},o=r.createContext(n);function a(e){const s=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),r.createElement(o.Provider,{value:s},e.children)}}}]);