/*! For license information please see 4807700c.390c3d78.js.LICENSE.txt */ "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[72717],{64982:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>h,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>l,toc:()=>a});var r=t(85893),s=t(11151);const i={sidebar_label:"ElementHandle"},d="ElementHandle class",l={id:"api/puppeteer.elementhandle",title:"ElementHandle class",description:"ElementHandle represents an in-page DOM element.",source:"@site/../docs/api/puppeteer.elementhandle.md",sourceDirName:"api",slug:"/api/puppeteer.elementhandle",permalink:"/next/api/puppeteer.elementhandle",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{sidebar_label:"ElementHandle"},sidebar:"api",previous:{title:"JSHandle.toString",permalink:"/next/api/puppeteer.jshandle.tostring"},next:{title:"ElementHandle.$",permalink:"/next/api/puppeteer.elementhandle._"}},h={},a=[{value:"Signature:",id:"signature",level:4},{value:"Remarks",id:"remarks",level:2},{value:"Properties",id:"properties",level:2},{value:"Methods",id:"methods",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"elementhandle-class",children:"ElementHandle class"}),"\n",(0,r.jsx)(n.p,{children:"ElementHandle represents an in-page DOM element."}),"\n",(0,r.jsx)(n.h4,{id:"signature",children:"Signature:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"export declare abstract class ElementHandle extends JSHandle\n"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Extends:"})," ",(0,r.jsx)(n.a,{href:"/next/api/puppeteer.jshandle",children:"JSHandle"}),""]}),"\n",(0,r.jsx)(n.h2,{id:"remarks",children:"Remarks"}),"\n",(0,r.jsxs)(n.p,{children:["ElementHandles can be created with the ",(0,r.jsx)(n.a,{href:"/next/api/puppeteer.page._",children:"Page.$()"})," method."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import puppeteer from 'puppeteer';\n\n(async () => {\n const browser = await puppeteer.launch();\n const page = await browser.newPage();\n await page.goto('https://example.com');\n const hrefElement = await page.$('a');\n await hrefElement.click();\n // ...\n})();\n"})}),"\n",(0,r.jsxs)(n.p,{children:["ElementHandle prevents the DOM element from being garbage-collected unless the handle is ",(0,r.jsx)(n.a,{href:"/next/api/puppeteer.jshandle.dispose",children:"disposed"}),". ElementHandles are auto-disposed when their origin frame gets navigated."]}),"\n",(0,r.jsxs)(n.p,{children:["ElementHandle instances can be used as arguments in ",(0,r.jsx)(n.a,{href:"/next/api/puppeteer.page._eval",children:"Page.$eval()"})," and ",(0,r.jsx)(n.a,{href:"/next/api/puppeteer.page.evaluate",children:"Page.evaluate()"})," methods."]}),"\n",(0,r.jsxs)(n.p,{children:["If you're using TypeScript, ElementHandle takes a generic argument that denotes the type of element the handle is holding within. For example, if you have a handle to a ",(0,r.jsx)(n.code,{children:""})," element matching ",(0,r.jsx)(n.code,{children:"selector"}),", the method throws an error."]})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"tap",children:(0,r.jsx)(n.a,{href:"/next/api/puppeteer.elementhandle.tap",children:"tap(this)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsxs)(n.p,{children:["This method scrolls element into view if needed, and then uses ",(0,r.jsx)(n.a,{href:"/next/api/puppeteer.touchscreen.tap",children:"Touchscreen.tap()"})," to tap in the center of the element. If the element is detached from DOM, the method throws an error."]})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"toelement",children:(0,r.jsx)(n.a,{href:"/next/api/puppeteer.elementhandle.toelement",children:"toElement(tagName)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{children:(0,r.jsx)(n.p,{children:"Converts the current handle to the given element type."})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"touchend",children:(0,r.jsx)(n.a,{href:"/next/api/puppeteer.elementhandle.touchend",children:"touchEnd(this)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"touchmove",children:(0,r.jsx)(n.a,{href:"/next/api/puppeteer.elementhandle.touchmove",children:"touchMove(this)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"touchstart",children:(0,r.jsx)(n.a,{href:"/next/api/puppeteer.elementhandle.touchstart",children:"touchStart(this)"})})}),(0,r.jsx)("td",{}),(0,r.jsx)("td",{})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"type",children:(0,r.jsx)(n.a,{href:"/next/api/puppeteer.elementhandle.type",children:"type(text, options)"})})}),(0,r.jsx)("td",{}),(0,r.jsxs)("td",{children:[(0,r.jsxs)(n.p,{children:["Focuses the element, and then sends a ",(0,r.jsx)(n.code,{children:"keydown"}),", ",(0,r.jsx)(n.code,{children:"keypress"}),"/",(0,r.jsx)(n.code,{children:"input"}),", and ",(0,r.jsx)(n.code,{children:"keyup"})," event for each character in the text."]}),(0,r.jsxs)(n.p,{children:["To press a special key, like ",(0,r.jsx)(n.code,{children:"Control"})," or ",(0,r.jsx)(n.code,{children:"ArrowDown"}),", use ",(0,r.jsx)(n.a,{href:"/next/api/puppeteer.elementhandle.press",children:"ElementHandle.press()"}),"."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"uploadfile",children:(0,r.jsx)(n.a,{href:"/next/api/puppeteer.elementhandle.uploadfile",children:"uploadFile(this, paths)"})})}),(0,r.jsx)("td",{}),(0,r.jsxs)("td",{children:[(0,r.jsxs)(n.p,{children:["Sets the value of an ",(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input",children:"input element"})," to the given file paths."]}),(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Remarks:"})}),(0,r.jsxs)(n.p,{children:["This will not validate whether the file paths exists. Also, if a path is relative, then it is resolved against the ",(0,r.jsx)(n.a,{href:"https://nodejs.org/api/process.html#process_process_cwd",children:"current working directory"}),". For locals script connecting to remote chrome environments, paths must be absolute."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"waitforselector",children:(0,r.jsx)(n.a,{href:"/next/api/puppeteer.elementhandle.waitforselector",children:"waitForSelector(selector, options)"})})}),(0,r.jsx)("td",{}),(0,r.jsxs)("td",{children:[(0,r.jsx)(n.p,{children:"Wait for an element matching the given selector to appear in the current element."}),(0,r.jsxs)(n.p,{children:["Unlike ",(0,r.jsx)(n.a,{href:"/next/api/puppeteer.frame.waitforselector",children:"Frame.waitForSelector()"}),", this method does not work across navigations or if the element is detached from DOM."]})]})]})]})]})]})}function p(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},75251:(e,n,t)=>{var r=t(67294),s=Symbol.for("react.element"),i=Symbol.for("react.fragment"),d=Object.prototype.hasOwnProperty,l=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,h={key:!0,ref:!0,__self:!0,__source:!0};function a(e,n,t){var r,i={},a=null,c=null;for(r in void 0!==t&&(a=""+t),void 0!==n.key&&(a=""+n.key),void 0!==n.ref&&(c=n.ref),n)d.call(n,r)&&!h.hasOwnProperty(r)&&(i[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps)void 0===i[r]&&(i[r]=n[r]);return{$$typeof:s,type:e,key:a,ref:c,props:i,_owner:l.current}}n.Fragment=i,n.jsx=a,n.jsxs=a},85893:(e,n,t)=>{e.exports=t(75251)},11151:(e,n,t)=>{t.d(n,{Z:()=>l,a:()=>d});var r=t(67294);const s={},i=r.createContext(s);function d(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]);