puppeteer/assets/js/4d7b63d5.7b130d5c.js

"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[59003],{3905:function(e,t,n){n.d(t,{Zo:function(){return i},kt:function(){return m}});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=a.createContext({}),s=function(e){var t=a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},i=function(e){var t=s(e.components);return a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,u=e.parentName,i=l(e,["components","mdxType","originalType","parentName"]),c=s(n),m=r,g=c["".concat(u,".").concat(m)]||c[m]||d[m]||o;return n?a.createElement(g,p(p({ref:t},i),{},{components:n})):a.createElement(g,p({ref:t},i))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=c;var l={};for(var u in t)hasOwnProperty.call(t,u)&&(l[u]=t[u]);l.originalType=e,l.mdxType="string"==typeof e?e:r,p[1]=l;for(var s=2;s<o;s++)p[s]=n[s];return a.createElement.apply(null,p)}return a.createElement.apply(null,n)}c.displayName="MDXCreateElement"},69679:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return l},contentTitle:function(){return u},metadata:function(){return s},toc:function(){return i},default:function(){return c}});var a=n(87462),r=n(63366),o=(n(67294),n(3905)),p=["components"],l={},u=void 0,s={unversionedId:"puppeteer.mouse",id:"puppeteer.mouse",isDocsHomePage:!1,title:"puppeteer.mouse",description:"Home &gt; puppeteer &gt; Mouse",source:"@site/docs/puppeteer.mouse.md",sourceDirName:".",slug:"/puppeteer.mouse",permalink:"/puppeteer/docs/next/puppeteer.mouse",editUrl:"https://github.com/facebook/puppeteer/edit/main/website/docs/puppeteer.mouse.md",version:"current",frontMatter:{},sidebar:"docs",previous:{title:"puppeteer.keyboard.up",permalink:"/puppeteer/docs/next/puppeteer.keyboard.up"},next:{title:"puppeteer.mouse.click",permalink:"/puppeteer/docs/next/puppeteer.mouse.click"}},i=[{value:"Mouse class",id:"mouse-class",children:[]},{value:"Remarks",id:"remarks",children:[]},{value:"Example 1",id:"example-1",children:[]},{value:"Example 2",id:"example-2",children:[]},{value:"Methods",id:"methods",children:[]}],d={toc:i};function c(e){var t=e.components,n=(0,r.Z)(e,p);return(0,o.kt)("wrapper",(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/puppeteer/docs/next/index"},"Home")," ",">"," ",(0,o.kt)("a",{parentName:"p",href:"/puppeteer/docs/next/puppeteer"},"puppeteer")," ",">"," ",(0,o.kt)("a",{parentName:"p",href:"/puppeteer/docs/next/puppeteer.mouse"},"Mouse")),(0,o.kt)("h2",{id:"mouse-class"},"Mouse class"),(0,o.kt)("p",null,"The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport."),(0,o.kt)("b",null,"Signature:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-typescript"},"export declare class Mouse \n")),(0,o.kt)("h2",{id:"remarks"},"Remarks"),(0,o.kt)("p",null,"Every ",(0,o.kt)("inlineCode",{parentName:"p"},"page")," object has its own Mouse, accessible with ","[",(0,o.kt)("inlineCode",{parentName:"p"},"page.mouse"),"]","(","#","pagemouse)."),(0,o.kt)("p",null,"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,o.kt)("inlineCode",{parentName:"p"},"Mouse")," class."),(0,o.kt)("h2",{id:"example-1"},"Example 1"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"// 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")),(0,o.kt)("p",null,"*","*","Note","*","*",": The mouse events trigger synthetic ",(0,o.kt)("inlineCode",{parentName:"p"},"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."),(0,o.kt)("p",null,"For example, dragging and selecting text is not possible using ",(0,o.kt)("inlineCode",{parentName:"p"},"page.mouse"),". Instead, you can use the ",(0,o.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/getSelection"},"`","DocumentOrShadowRoot.getSelection()","`")," functionality implemented in the platform."),(0,o.kt)("h2",{id:"example-2"},"Example 2"),(0,o.kt)("p",null,"For example, if you want to select all content between nodes:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"await page.evaluate((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}, fromJSHandle, toJSHandle);\n")),(0,o.kt)("p",null,"If you then would want to copy-paste your selection, you can use the clipboard api:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"// 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")),(0,o.kt)("p",null,"*","*","Note","*","*",": If you want access to the clipboard API, you have to give it permission to do so:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"await browser.defaultBrowserContext().overridePermissions(\n  '<your origin>', ['clipboard-read', 'clipboard-write']\n);\n")),(0,o.kt)("h2",{id:"methods"},"Methods"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:null},"Method"),(0,o.kt)("th",{parentName:"tr",align:null},"Modifiers"),(0,o.kt)("th",{parentName:"tr",align:null},"Description"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.click"},"click(x, y, options)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Shortcut for ",(0,o.kt)("code",null,"mouse.move"),", ",(0,o.kt)("code",null,"mouse.down")," and ",(0,o.kt)("code",null,"mouse.up"),".")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.down"},"down(options)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Dispatches a ",(0,o.kt)("code",null,"mousedown")," event.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.drag"},"drag(start, target)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Dispatches a ",(0,o.kt)("code",null,"drag")," event.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.draganddrop"},"dragAndDrop(start, target, options)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Performs a drag, dragenter, dragover, and drop in sequence.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.dragenter"},"dragEnter(target, data)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Dispatches a ",(0,o.kt)("code",null,"dragenter")," event.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.dragover"},"dragOver(target, data)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Dispatches a ",(0,o.kt)("code",null,"dragover")," event.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.drop"},"drop(target, data)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Performs a dragenter, dragover, and drop in sequence.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.move"},"move(x, y, options)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Dispatches a ",(0,o.kt)("code",null,"mousemove")," event.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.up"},"up(options)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Dispatches a ",(0,o.kt)("code",null,"mouseup")," event.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},(0,o.kt)("a",{parentName:"td",href:"/puppeteer/docs/next/puppeteer.mouse.wheel"},"wheel(options)")),(0,o.kt)("td",{parentName:"tr",align:null}),(0,o.kt)("td",{parentName:"tr",align:null},"Dispatches a ",(0,o.kt)("code",null,"mousewheel")," event.")))))}c.isMDXComponent=!0}}]);