https://testing-library.com/assets/js/74cee25e.6ce36746.js

1"use strict";(self.webpackChunkreact_testing_library_docs=self.webpackChunkreact_testing_library_docs||[]).push([[8145],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>m});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(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,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,b=d["".concat(s,".").concat(m)]||d[m]||c[m]||i;return n?r.createElement(b,l(l({ref:t},u),{},{components:n})):r.createElement(b,l({ref:t},u))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,l=new Array(i);l[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:a,l[1]=o;for(var p=2;p<i;p++)l[p]=n[p];return r.createElement.apply(null,l)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},5162:(e,t,n)=>{n.d(t,{Z:()=>l});var r=n(7294),a=n(6010);const i="tabItem_Ymn6";function l(e){var t=e.children,n=e.hidden,l=e.className;return r.createElement("div",{role:"tabpanel",className:(0,a.Z)(i,l),hidden:n},t)}},5488:(e,t,n)=>{n.d(t,{Z:()=>m});var r=n(7462),a=n(7294),i=n(6010),l=n(2389),o=n(7392),s=n(7094),p=n(2466);const u="tabList__CuJ",c="tabItem_LNqP";function d(e){var t,n,l=e.lazy,d=e.block,m=e.defaultValue,b=e.values,g=e.groupId,y=e.className,f=a.Children.map(e.children,(function(e){if((0,a.isValidElement)(e)&&"value"in e.props)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.')})),h=null!=b?b:f.map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes}})),v=(0,o.l)(h,(function(e,t){return e.value===t.value}));if(v.length>0)throw new Error('Docusaurus error: Duplicate values "'+v.map((function(e){return e.value})).join(", ")+'" found in <Tabs>. Every value needs to be unique.');var k=null===m?m:null!=(t=null!=m?m:null==(n=f.find((function(e){return e.props.default})))?void 0:n.props.value)?t:f[0].props.value;if(null!==k&&!h.some((function(e){return e.value===k})))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+k+'" but none of its children has the corresponding value. Available values are: '+h.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");var w=(0,s.U)(),N=w.tabGroupChoices,T=w.setTabGroupChoices,E=(0,a.useState)(k),O=E[0],x=E[1],C=[],P=(0,p.o5)().blockElementScrollPositionUntilNextRender;if(null!=g){var D=N[g];null!=D&&D!==O&&h.some((function(e){return e.value===D}))&&x(D)}var L=function(e){var t=e.currentTarget,n=C.indexOf(t),r=h[n].value;r!==O&&(P(t),x(r),null!=g&&T(g,String(r)))},j=function(e){var t,n=null;switch(e.key){case"ArrowRight":var r,a=C.indexOf(e.currentTarget)+1;n=null!=(r=C[a])?r:C[0];break;case"ArrowLeft":var i,l=C.indexOf(e.currentTarget)-1;n=null!=(i=C[l])?i:C[C.length-1]}

1null==(t=n)||t.focus()};return a.createElement("div",{className:(0,i.Z)("tabs-container",u)},a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":d},y)},h.map((function(e){var t=e.value,n=e.label,l=e.attributes;return a.createElement("li",(0,r.Z)({role:"tab",tabIndex:O===t?0:-1,"aria-selected":O===t,key:t,ref:function(e){return C.push(e)},onKeyDown:j,onFocus:L,onClick:L},l,{className:(0,i.Z)("tabs__item",c,null==l?void 0:l.className,{"tabs__item--active":O===t})}),null!=n?n:t)}))),l?(0,a.cloneElement)(f.filter((function(e){return e.props.value===O}))[0],{className:"margin-top--md"}):a.createElement("div",{className:"margin-top--md"},f.map((function(e,t){return(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==O})}))))}function m(e){var t=(0,l.Z)();return a.createElement(d,(0,r.Z)({key:String(t)},e))}},1711:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>u,default:()=>g,frontMatter:()=>p,metadata:()=>c,toc:()=>m});var r=n(7462),a=n(3366),i=(n(7294),n(3905)),l=n(5488),o=n(5162),s=["components"],p={id:"intro",title:"Puppeteer Testing Library"},u=void 0,c={unversionedId:"pptr-testing-library/intro",id:"pptr-testing-library/intro",title:"Puppeteer Testing Library",description:"pptr-testing-library is a lightweight adapter allowing",source:"@site/docs/pptr-testing-library/intro.mdx",sourceDirName:"pptr-testing-library",slug:"/pptr-testing-library/intro",permalink:"/docs/pptr-testing-library/intro",draft:!1,editUrl:"https://github.com/testing-library/testing-library-docs/edit/main/docs/pptr-testing-library/intro.mdx",tags:[],version:"current",lastUpdatedBy:"Sergio Moreno",lastUpdatedAt:1660067726,formattedLastUpdatedAt:"Aug 9, 2022",frontMatter:{id:"intro",title:"Puppeteer Testing Library"},sidebar:"docs",previous:{title:"Cypress Testing Library",permalink:"/docs/cypress-testing-library/intro"},next:{title:"Testcafe Testing Library",permalink:"/docs/testcafe-testing-library/intro"}},d={},m=[{value:"Usage",id:"usage",level:2},{value:"API",id:"api",level:3},{value:"Forwarded methods",id:"forwarded-methods",level:3},{value:"Known Limitations",id:"known-limitations",level:2}],b={toc:m};function g(e){var t=e.components,n=(0,a.Z)(e,s);return(0,i.kt)("wrapper",(0,r.Z)({},b,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/patrickhulce/pptr-testing-library"},(0,i.kt)("inlineCode",{parentName:"a"},"pptr-testing-library"))," is a lightweight adapter allowing\n",(0,i.kt)("inlineCode",{parentName:"p"},"DOM Testing Library")," to be used with ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/GoogleChrome/puppeteer"},(0,i.kt)("inlineCode",{parentName:"a"},"puppeteer")),"."),(0,i.kt)(l.Z,{groupId:"npm2yarn",mdxType:"Tabs"},(0,i.kt)(o.Z,{value:"npm",mdxType:"TabItem"},(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"npm install --save-dev puppeteer pptr-testing-library\n"))),(0,i.kt)(o.Z,{value:"yarn",label:"Yarn",mdxType:"TabItem"},(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"}

1,"yarn add --dev puppeteer pptr-testing-library\n")))),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://github.com/patrickhulce/pptr-testing-library"},"pptr-testing-library on GitHub"))),(0,i.kt)("h2",{id:"usage"},"Usage"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"const puppeteer = require('puppeteer')\nconst {getDocument, queries, waitFor} = require('pptr-testing-library')\n\nconst {getByTestId, getByLabelText} = queries\n\nconst browser = await puppeteer.launch()\nconst page = await browser.newPage()\n\n// Grab ElementHandle for document\nconst $document = await getDocument(page)\n// Your favorite query methods are available\nconst $form = await getByTestId($document, 'my-form')\n// returned elements are Puppeteer ElementHandles too!\nconst $email = await getByLabelText($form, 'Email')\n// interact with puppeteer like usual\nawait $email.type('[email protected]')\n// waiting works too!\nawait waitFor(() => getByText('Loading...'))\n")),(0,i.kt)("p",null,"A little too un-puppeteer for you? You can attach all the ",(0,i.kt)("inlineCode",{parentName:"p"},"DOM Testing Library"),"\nmethods directly onto puppeteer's ",(0,i.kt)("inlineCode",{parentName:"p"},"ElementHandle")," instead!"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"const puppeteer = require('puppeteer')\nrequire('pptr-testing-library/extend')\n\nconst browser = await puppeteer.launch()\nconst page = await browser.newPage()\n\n// getDocument is added to prototype of Page\nconst $document = await page.getDocument()\n// query methods are added directly to prototype of ElementHandle\nconst $form = await $document.getByTestId('my-form')\n// destructuring works if you explicitly call getQueriesForElement\nconst {getByLabelText} = $form.getQueriesForElement()\n// ...\nconst $email = await getByLabelText('Email')\n")),(0,i.kt)("h3",{id:"api"},"API"),(0,i.kt)("p",null,"Unique methods, not part of ",(0,i.kt)("inlineCode",{parentName:"p"},"DOM Testing Library"),"."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"getDocument(page: puppeteer.Page): ElementHandle")," - get an ElementHandle for\nthe document")),(0,i.kt)("h3",{id:"forwarded-methods"},"Forwarded methods"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"DOM Testing Library")," is injected into the page that puppeteer is controlling on\neach query, so all results will be async. It's still recommended that you use\npuppeteer's built-in methods for interaction rather than ",(0,i.kt)("inlineCode",{parentName:"p"},"fireEvent"),"."),(0,i.kt)("h2",{id:"known-limitations"},"Known Limitations"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"waitForElement")," method is not exposed. Puppeteer has its own set of wait\nutilities that somewhat conflict with the style used in ",(0,i.kt)("inlineCode",{parentName:"li"},"DOM Testing Library"),".\nSee\n",(0,i.kt)("a",{parentName:"li",href:"https://github.com/patrickhulce/pptr-testing-library/issues/3"},"the issue on GitHub"),"."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"fireEvent")," method is not exposed, use puppeteer's built-ins instead."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"expect")," assertion extensions are not available.")))}g.isMDXComponent=!0}}]);