text: "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7752],{4137:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return p}});var a=n(7294);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 l(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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),c=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=c(e.components);return a.createElement(s.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,s=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),d=c(n),p=r,h=d["".concat(s,".").concat(p)]||d[p]||m[p]||l;return n?a.createElement(h,i(i({ref:t},u),{},{components:n})):a.createElement(h,i({ref:t},u))}));function p(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=d;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var c=2;c<l;c++)i[c]=n[c];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},8448:function(e,t,n){var a=n(7294);t.Z=function(e){var t=e.children,n=e.hidden,r=e.className;return a.createElement("div",{role:"tabpanel",hidden:n,className:r},t)}},7225:function(e,t,n){n.d(t,{Z:function(){return d}});var a=n(7462),r=n(7294),l=n(1048),i=n(2713);var o=function(){var e=(0,r.useContext)(i.Z);if(null==e)throw new Error('"useUserPreferencesContext" is used outside of "Layout" component.');return e},s=n(3309),c=n(6010),u="tabItem_vU9c";function m(e){var t,n,a,l=e.lazy,i=e.block,m=e.defaultValue,d=e.values,p=e.groupId,h=e.className,v=r.Children.map(e.children,(function(e){if((0,r.isValidElement)(e)&&void 0!==e.props.value)return e;throw new Error("Docusaurus error: Bad <Tabs> child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.')})),f=null!=d?d:v.map((function(e){var t=e.props;return{value:t.value,label:t.label}})),g=(0,s.lx)(f,(function(e,t){return e.value===t.value}));if(g.length>0)throw new Error('Docusaurus error: Duplicate values "'+g.map((function(e){return e.value})).join(", ")+'" found in <Tabs>. Every value needs to be unique.');var b=null===m?m:null!=(t=null!=m?m:null==(n=v.find((function(e){return e.props.default})))?void 0:n.props.value)?t:null==(a=v[0])?void 0:a.props.value;if(null!==b&&!f.some((function(e){return e.value===b})))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+b+'" but none of its children has the corresponding value. Available values are: '+f.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");var k=o(),w=k.tabGroupChoices,y=k.setTabGroupChoices,N=(0,r.useState)(b),x=N[0],$=N[1],E=[],T=(0,s.o5)().blockElementScrollPositionUntilNextRender;if(null!=p){var O=w[p];null!=O&&O!==x&&f.some((function(e){return e.value===O}))&&$(O)}var I=function(e){var t=e.currentTarget,n=E.indexOf(t),a=f[n].value;a!==x&&(T(t),$(a),null!=p&&y(p,a))},j=function(e){var t,n=null;switch(e.key){case"ArrowRight":var a=E.indexOf(e.currentTarget)+1;n=E[a]||E[0];break;case"ArrowLeft":var r=E.indexOf(e.currentTarget)-1;n=E[r]||E[E.length-1]}null==(t=n)||t.focus()};return r.createElement("div",{className:"tabs-container"},r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,c.Z)("tabs",{"tabs--block":i},h)},f.map((function(e){var t=e.value,n=e.label;return r.createElement("li",{role:"tab",tabIndex:x===t?0:-1,"aria-selected":x===t,className:(0,c.Z)("tabs__item",u,{"tabs__item--active":x===t}),key:t,ref:function(e){return E.push(e)},onKeyDown:j,onFocus:I,onClick:I},null!=n?n:t)}))),l?(0,r.cloneElement)(v.filter((function(e){return e.props.value===x}))[0],{className:"margin-vert--md"}):r.createElement("div",{className:"margin-vert--md"},v.map((function(e,t){return(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==x})}))))}function d(e){var t=(0,l.Z)();return r.createElement(m,(0,a.Z)({key:String(t)},e))}},2713:function(e,t,n){var a=(0,n(7294).createContext)(void 0);t.Z=a},206:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return c},contentTitle:function(){return u},metadata:function(){return m},toc:function(){return d},default:function(){return h}});var a=n(7462),r=n(3366),l=(n(7294),n(4137)),i=n(7225),o=n(8448),s=["components"],c={id:"$",title:"$",custom_edit_url:"https://github.com/Abhi6722/hackers-hub/edit/main/packages/webdriverio/src/commands/element/$.ts"},u=void 0,m={unversionedId:"api/element/$",id:"api/element/$",isDocsHomePage:!1,title:"$",description:"The $ command is a short way to call the findElement command in order",source:"@site/docs/api/element/_$.md",sourceDirName:"api/element",slug:"/api/element/$",permalink:"/docs/api/element/$",editUrl:"https://github.com/Abhi6722/hackers-hub/edit/main/packages/webdriverio/src/commands/element/$.ts",tags:[],version:"current",frontMatter:{id:"$",title:"$",custom_edit_url:"https://github.com/Abhi6722/hackers-hub/edit/main/packages/webdriverio/src/commands/element/$.ts"},sidebar:"api",previous:{title:"$$",permalink:"/docs/api/element/$$"},next:{title:"addValue",permalink:"/docs/api/element/addValue"}},d=[{value:"Usage",id:"usage",children:[],level:5},{value:"Parameters",id:"parameters",children:[],level:5},{value:"Examples",id:"examples",children:[],level:5}],p={toc:d};function h(e){var t=e.components,n=(0,r.Z)(e,s);return(0,l.kt)("wrapper",(0,a.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"The ",(0,l.kt)("inlineCode",{parentName:"p"},"$")," command is a short way to call the ",(0,l.kt)("a",{parentName:"p",href:"/docs/api/webdriver#findelement"},(0,l.kt)("inlineCode",{parentName:"a"},"findElement"))," command in order\nto fetch a single element on the page similar to the ",(0,l.kt)("inlineCode",{parentName:"p"},"$")," command from the browser scope. The difference when calling\nit from an element scope is that the driver will look within the children of that element. You can also pass in an object as selector\nwhere the object contains a property ",(0,l.kt)("inlineCode",{parentName:"p"},"element-6066-11e4-a52e-4f735466cecf")," with the value of a reference\nto an element. The command will then transform the reference to an extended WebdriverIO element."),(0,l.kt)("p",null,"Note: chaining ",(0,l.kt)("inlineCode",{parentName:"p"},"$")," and ",(0,l.kt)("inlineCode",{parentName:"p"},"$$")," commands only make sense when you use multiple selector strategies. You will otherwise\nmake unnecessary requests that slow down the test (e.g. ",(0,l.kt)("inlineCode",{parentName:"p"},"$('body').$('div')")," will trigger two request whereas\n",(0,l.kt)("inlineCode",{parentName:"p"},"$('body div')")," does literally the same with just one request)"),(0,l.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"For more information on how to select specific elements, check out the ",(0,l.kt)("a",{parentName:"p",href:"/docs/selectors"},"Selectors")," guide."))),(0,l.kt)("h5",{id:"usage"},"Usage"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"$(selector).$(selector)\n")),(0,l.kt)("h5",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Name"),(0,l.kt)("th",{parentName:"tr",align:null},"Type"),(0,l.kt)("th",{parentName:"tr",align:null},"Details"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("code",null,(0,l.kt)("var",null,"selector"))),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("code",null,"String"),", ",(0,l.kt)("code",null,"Function"),", ",(0,l.kt)("code",null,"Matcher")),(0,l.kt)("td",{parentName:"tr",align:null},"selector, JS Function, or Matcher object to fetch a certain element")))),(0,l.kt)("h5",{id:"examples"},"Examples"),(0,l.kt)(i.Z,{defaultValue:"async",className:"runtime",values:[{label:"Asynchronous Mode",value:"async"},{label:"Synchronous Mode",value:"sync"}],mdxType:"Tabs"},(0,l.kt)(o.Z,{value:"async",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<ul id="menu">\n    <li><a href="/">Home</a></li>\n    <li><a href="/">Developer Guide</a></li>\n    <li><a href="/">API</a></li>\n    <li><a href="/">Contribute</a></li>\n</ul>\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="$.js"',title:'"$.js"'},'it(\'should get text a menu link\', async () => {\n    const text = await $(\'#menu\');\n    console.log(await text.$$(\'li\')[2].$(\'a\').getText()); // outputs: "API"\n});\n\nit(\'should get text a menu link - JS Function\', async () => {\n    const text = await $(\'#menu\');\n    console.log(await text.$$(\'li\')[2].$(function() { // Arrow function is not allowed here.\n        // this is Element https://developer.mozilla.org/en-US/docs/Web/API/Element\n        // in this particular example it is HTMLLIElement\n        // TypeScript users may do something like this\n        // return (this as Element).querySelector(\'a\')\n        return this.querySelector(\'a\'); // Element\n    }).getText()); // outputs: "API"\n});\n\nit(\'should allow to convert protocol result of an element into a WebdriverIO element\', async () => {\n    const activeElement = await browser.getActiveElement();\n    console.log(await $(activeElement).getTagName()); // outputs active element\n});\n\nit(\'should use Androids DataMatcher or ViewMatcher selector\', async () => {\n    const menuItem = await $({\n        "name": "hasEntry",\n        "args": ["title", "ViewTitle"],\n        "class": "androidx.test.espresso.matcher.ViewMatchers"\n    });\n    await menuItem.click();\n\n    const menuItem = await $({\n        "name": "hasEntry",\n        "args": ["title", "ViewTitle"]\n    });\n    await menuItem.click();\n});\n'))),(0,l.kt)(o.Z,{value:"sync",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<ul id="menu">\n    <li><a href="/">Home</a></li>\n    <li><a href="/">Developer Guide</a></li>\n    <li><a href="/">API</a></li>\n    <li><a href="/">Contribute</a></li>\n</ul>\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="$.js"',title:'"$.js"'},'it(\'should get text a menu link\', () => {\n    const text = $(\'#menu\');\n    console.log(text.$$(\'li\')[2].$(\'a\').getText()); // outputs: "API"\n});\n\nit(\'should get text a menu link - JS Function\', () => {\n    const text = $(\'#menu\');\n    console.log(text.$$(\'li\')[2].$(function() { // Arrow function is not allowed here.\n        // this is Element https://developer.mozilla.org/en-US/docs/Web/API/Element\n        // in this particular example it is HTMLLIElement\n        // TypeScript users may do something like this\n        // return (this as Element).querySelector(\'a\')\n        return this.querySelector(\'a\'); // Element\n    }).getText()); // outputs: "API"\n});\n\nit(\'should allow to convert protocol result of an element into a WebdriverIO element\', () => {\n    const activeElement = browser.getActiveElement();\n    console.log($(activeElement).getTagName()); // outputs active element\n});\n\nit(\'should use Androids DataMatcher or ViewMatcher selector\', () => {\n    const menuItem = $({\n        "name": "hasEntry",\n        "args": ["title", "ViewTitle"],\n        "class": "androidx.test.espresso.matcher.ViewMatchers"\n    });\n    menuItem.click();\n\n    const menuItem = $({\n        "name": "hasEntry",\n        "args": ["title", "ViewTitle"]\n    });\n    menuItem.click();\n});\n')),(0,l.kt)("div",{className:"admonition admonition-caution alert alert--warning"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"}))),"caution")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"Synchronous Mode will depcrecated with Node.js v16. With an update to the\nunderlying Chromium version it became technically impossible to provide the\nsame synchronous behavior. We recommend to start transition to asynchronous\ncommand execution. For more information, see our ",(0,l.kt)("a",{href:"https://github.com/webdriverio/webdriverio/discussions/6702"},"RFC"),"."))))))}h.isMDXComponent=!0}}]);