https://serenity-js.org/assets/js/9da183ac.dc1358a0.js

1"use strict";(self.webpackChunkserenity_js_org=self.webpackChunkserenity_js_org||[]).push([[4773],{11470:(e,t,n)=>{n.d(t,{A:()=>v});var r=n(96540),s=n(34164),i=n(23104),a=n(56347),l=n(205),o=n(57485),c=n(31682),d=n(70679);function u(e){return r.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))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.`)})?.filter(Boolean)??[]}function h(e){const{values:t,children:n}=e;return(0,r.useMemo)(()=>{const e=t??function(e){return u(e).map(({props:{value:e,label:t,attributes:n,default:r}})=>({value:e,label:t,attributes:n,default:r}))}(n);return function(e){const t=(0,c.XI)(e,(e,t)=>e.value===t.value);if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[t,n])}function p({value:e,tabValues:t}){return t.some(t=>t.value===e)}function y({queryString:e=!1,groupId:t}){const n=(0,a.W6)(),s=function({queryString:e=!1,groupId:t}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:e,groupId:t});return[(0,o.aZ)(s),(0,r.useCallback)(e=>{if(!s)return;const t=new URLSearchParams(n.location.search);t.set(s,e),n.replace({...n.location,search:t.toString()})},[s,n])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,i=h(e),[a,o]=(0,r.useState)(()=>function({defaultValue:e,tabValues:t}){if(0===t.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!p({value:e,tabValues:t}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const n=t.find(e=>e.default)??t[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:i})),[c,u]=y({queryString:n,groupId:s}),[j,g]=function({groupId:e}){const t=function(e){return e?`docusaurus.tab.${e}`:null}(e),[n,s]=(0,d.Dv)(t);return[n,(0,r.useCallback)(e=>{t&&s.set(e)},[t,s])]}({groupId:s}),m=(()=>{const e=c??j;return p({value:e,tabValues:i})?e:null})();(0,l.A)(()=>{m&&o(m)},[m]);return{selectedValue:a,selectValue:(0,r.useCallback)(e=>{if(!p({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);o(e),u(e),g(e)},[u,g,i]),tabValues:i}}var g=n(92303);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(74848);function f({className:e,block:t,selectedValue:n,selectValue:r,tabValues:a}){const l=[],{blockElementScrollPositionUntilNextRender:o}=(0,i.a_)(),c=e=>{const t=e.currentTarget,s=l.indexOf(t),i=a[s].value;i!==n&&(o(t),r(i))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":t},e),children:a.map(({value:e,label:t,attributes:r})=>(0,x.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...r,className:(0,s.A)("tabs__item",m.tabItem,r?.className,{"tabs__item--active":n===e}),children:t??e},e))})}function b({lazy:e,children:t,selectedValue:n}){const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const e=i.find(e=>e.props.value===n);return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==n}))})}function w(e){const t=j(e);return(0,x.jsxs)("div",{className:(0,s.A)("tabs-container",m.tabList),

1children:[(0,x.jsx)(f,{...t,...e}),(0,x.jsx)(b,{...t,...e})]})}function v(e){const t=(0,g.A)();return(0,x.jsx)(w,{...e,children:u(e.children)},String(t))}},14775:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>o,metadata:()=>r,toc:()=>u});const r=JSON.parse('{"id":"test-runners/playwright-test/installation","title":"Installation","description":"To use Serenity/JS with Playwright Test, follow the Serenity/JS installation guide","source":"@site/src/docs/handbook/test-runners/playwright-test/installation.mdx","sourceDirName":"test-runners/playwright-test","slug":"/test-runners/playwright-test/installation","permalink":"/handbook/test-runners/playwright-test/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/serenity-js/serenity-js.org/tree/main/src/docs/handbook/test-runners/playwright-test/installation.mdx","tags":[],"version":"current","lastUpdatedAt":1789512466000,"sidebarPosition":1,"frontMatter":{"sidebar_position":1},"sidebar":"docs","previous":{"title":"Playwright Test","permalink":"/handbook/test-runners/playwright-test/"},"next":{"title":"Configuration","permalink":"/handbook/test-runners/playwright-test/configuration"}}');var s=n(74848),i=n(28453),a=n(11470),l=n(19365);const o={sidebar_position:1},c="Installation",d={},u=[{value:"Initialising a Playwright Test project",id:"initialising-a-playwright-test-project",level:2},{value:"Installing Serenity/JS",id:"installing-serenityjs",level:2},{value:"What you learnt",id:"what-you-learnt",level:2},{value:"Next step",id:"next-step",level:2}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"installation",children:"Installation"})}),"\n",(0,s.jsxs)(t.p,{children:["To use Serenity/JS with Playwright Test, follow the ",(0,s.jsx)(t.a,{href:"/handbook/installation/",children:"Serenity/JS installation guide"}),"\nto set up your development environment and core runtime dependencies.\nThen, create a new Playwright Test project or add Serenity/JS integration and reporting modules to an existing project."]}),"\n",(0,s.jsx)(t.h2,{id:"initialising-a-playwright-test-project",children:"Initialising a Playwright Test project"}),"\n",(0,s.jsxs)(t.p,{children:["If you already have a Playwright Test project, skip this step and proceed to ",(0,s.jsx)(t.a,{href:"#installing-serenityjs",children:"installing Serenity/JS"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["To create a new Playwright Test project, follow the Playwright Test ",(0,s.jsx)(t.a,{href:"https://playwright.dev/docs/intro#installing-playwright",children:"installation instructions"}),"\nand run the following command:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"npm2yarn",children:[(0,s.jsx)(l.A,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-sh",children:"npm init playwright@latest\n"})})}),(0,s.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-sh",children:"yarn create playwright\n"})})}),(0,s.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-sh",children:"pnpm create playwright\n"})})})]}),"\n",(0,s.jsx)(t.p,{children:"Expected output (example):"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{children:"Getting started with writing end-to-end tests with Playwright:\nInitialising project in '.'\n\u2714 Do you want to use TypeScript or JavaScript? \xb7 TypeScript\n\u2714 Where to put your end-to-end tests? \xb7 tests\n\u2714 Add a GitHub Actions workflow? (y/N) \xb7 false\n\u2714 Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) \xb7 true\n"})}),"\n",(0,s.jsx)(t.admonition,{title:"TypeScript or JavaScript?",type:"tip",children:(0,s.jsxs)(t.p,{children:["Using TypeScript improves code completion support in ",(0,s.jsx)(t.a,{href:"/handbook/integration/jetbrains-idea",children:"JetBrains IDEs"})," and\n",(0,s.jsx)(t.a,{href:"/handbook/integration/visual-studio-code",children:"Visual Studio Code"}),", reducing common coding errors."]})}),"\n",(0,s.jsx)(t.h2,{id:"installing-serenityjs",children:"Installing Serenity/JS"}),"\n",(0,s.jsx)(t.p,{children:"To add Serenity/JS to a Playwright Test project, install the following modules:"}),"\n",(0,s.jsxs)(a.A,{groupId:"npm2yarn",children:[(0,s.jsx)(l.A,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-sh",children:"npm install --save-dev @serenity-js/assertions @serenity-js/console-reporter @serenity-js/core @serenity-js/html-reporter @serenity-js/playwright @serenity-js/playwright-test @serenity-js/rest @serenity-js/web\n"})})}),(0,s.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-sh",children:"yarn add 

1--dev @serenity-js/assertions @serenity-js/console-reporter @serenity-js/core @serenity-js/html-reporter @serenity-js/playwright @serenity-js/playwright-test @serenity-js/rest @serenity-js/web\n"})})}),(0,s.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-sh",children:"pnpm add --save-dev @serenity-js/assertions @serenity-js/console-reporter @serenity-js/core @serenity-js/html-reporter @serenity-js/playwright @serenity-js/playwright-test @serenity-js/rest @serenity-js/web\n"})})})]}),"\n",(0,s.jsx)(t.p,{children:"This command installs:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/api/assertions",children:(0,s.jsx)(t.code,{children:"@serenity-js/assertions"})})," \u2014 Screenplay Pattern assertions and Expectations, such as ",(0,s.jsx)(t.code,{children:"Ensure.that"})," and ",(0,s.jsx)(t.code,{children:"equals"})]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/api/console-reporter",children:(0,s.jsx)(t.code,{children:"@serenity-js/console-reporter"})})," \u2014 reports test progress and outcomes in the terminal"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/api/core",children:(0,s.jsx)(t.code,{children:"@serenity-js/core"})})," \u2014 the Screenplay Pattern foundation: Actors, Abilities, Tasks, Interactions, and Questions"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/api/html-reporter",children:(0,s.jsx)(t.code,{children:"@serenity-js/html-reporter"})})," \u2014 self-contained HTML report with trends, flaky test detection, and an interactive dashboard"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/api/playwright",children:(0,s.jsx)(t.code,{children:"@serenity-js/playwright"})})," \u2014 lets Actors control Playwright browsers through Serenity/JS web APIs"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/api/playwright-test",children:(0,s.jsx)(t.code,{children:"@serenity-js/playwright-test"})})," \u2014 integrates Serenity/JS fixtures and reporting with Playwright Test"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/api/rest",children:(0,s.jsx)(t.code,{children:"@serenity-js/rest"})})," \u2014 lets Actors call REST APIs and inspect their responses"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"/api/web",children:(0,s.jsx)(t.code,{children:"@serenity-js/web"})})," \u2014 browser-independent web interactions, Page Element queries, and automatic screenshots"]}),"\n"]}),"\n",(0,s.jsxs)(t.p,{children:["To ensure that your version of Playwright Test is compatible with the latest version of Serenity/JS, check the ",(0,s.jsx)(t.a,{href:"/releases/",children:"Serenity/JS releases and compatibility page"}),"."]}),"\n",(0,s.jsx)(t.h2,{id:"what-you-learnt",children:"What you learnt"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Initialise a Playwright Test project with ",(0,s.jsx)(t.code,{children:"npm init playwright@latest"}),"."]}),"\n",(0,s.jsxs)(t.li,{children:["Install Serenity/JS modules (",(0,s.jsx)(t.code,{children:"@serenity-js/core"}),", ",(0,s.jsx)(t.code,{children:"@serenity-js/playwright-test"}),", etc.) as dev dependencies."]}),"\n",(0,s.jsxs)(t.li,{children:["Check the ",(0,s.jsx)(t.a,{href:"/releases/",children:"releases page"})," for version compatibility."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"next-step",children:"Next step"}),"\n",(0,s.jsxs)(t.p,{children:["Once you've installed the dependencies, proceed to ",(0,s.jsx)(t.a,{href:"/handbook/test-runners/playwright-test/configuration/",children:"configuring Serenity/JS reporting"}),"."]})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},19365:(e,t,n)=>{n.d(t,{A:()=>a});n(96540);var r=n(34164);const s={tabItem:"tabItem_Ymn6"};var i=n(74848);function a({children:e,hidden:t,className:n}){return(0,i.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,n),hidden:t,children:e})}},28453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>l});var r=n(96540);const s={},i=r.createContext(s);function a(e){const t=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]);