https://serenity-js.org/assets/js/65d44fd8.e611460a.js

1"use strict";(self.webpackChunkserenity_js_org=self.webpackChunkserenity_js_org||[]).push([[7218],{28453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>a});var n=s(96540);const r={},i=n.createContext(r);function o(e){const t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(i.Provider,{value:t},e.children)}},69611:(e,t,s)=>{s.r(t),s.d(t,{contentTitle:()=>o,default:()=>l,frontMatter:()=>i,toc:()=>a});var n=s(74848),r=s(28453);const i={},o=void 0,a=[{value:"Features",id:"features",level:2},{value:"Quick Start",id:"quick-start",level:2},{value:"Creating a project",id:"creating-a-project",level:3},{value:"Writing a test scenario",id:"writing-a-test-scenario",level:3},{value:"Running your tests and generating reports",id:"running-your-tests-and-generating-reports",level:3},{value:"Documentation",id:"documentation",level:2},{value:"Contributing",id:"contributing",level:2},{value:"Community",id:"community",level:2},{value:"License",id:"license",level:2},{value:"Support",id:"support",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"https://badge.fury.io/js/%40serenity-js%2Fwebdriverio",children:(0,n.jsx)(t.img,{src:"https://badge.fury.io/js/%40serenity-js%2Fwebdriverio.svg",alt:"NPM Version"})}),"\n",(0,n.jsx)(t.a,{href:"https://github.com/serenity-js/serenity-js/actions",children:(0,n.jsx)(t.img,{src:"https://github.com/serenity-js/serenity-js/actions/workflows/main.yaml/badge.svg?branch=main",alt:"Build Status"})}),"\n",(0,n.jsx)(t.a,{href:"https://qlty.sh/gh/serenity-js/projects/serenity-js",children:(0,n.jsx)(t.img,{src:"https://qlty.sh/gh/serenity-js/projects/serenity-js/maintainability.svg",alt:"Maintainability"})}),"\n",(0,n.jsx)(t.a,{href:"https://qlty.sh/gh/serenity-js/projects/serenity-js",children:(0,n.jsx)(t.img,{src:"https://qlty.sh/gh/serenity-js/projects/serenity-js/coverage.svg",alt:"Code Coverage"})}),"\n",(0,n.jsx)(t.a,{href:"https://github.com/serenity-js/serenity-js/graphs/contributors",children:(0,n.jsx)(t.img,{src:"https://img.shields.io/github/contributors/serenity-js/serenity-js.svg",alt:"Contributors"})}),"\n",(0,n.jsx)(t.a,{href:"https://snyk.io/test/npm/@serenity-js/webdriverio",children:(0,n.jsx)(t.img,{src:"https://snyk.io/test/npm/@serenity-js/webdriverio/badge.svg",alt:"Known Vulnerabilities"})}),"\n",(0,n.jsx)(t.a,{href:"https://github.com/serenity-js/serenity-js",children:(0,n.jsx)(t.img,{src:"https://img.shields.io/github/stars/serenity-js/serenity-js?style=flat",alt:"GitHub stars"})})]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"https://www.linkedin.com/company/serenity-js",children:(0,n.jsx)(t.img,{src:"https://img.shields.io/badge/Follow-Serenity%2FJS%20-0077B5?logo=linkedin",alt:"Follow Serenity/JS on LinkedIn"})}),"\n",(0,n.jsx)(t.a,{href:"https://www.youtube.com/@serenity-js",children:(0,n.jsx)(t.img,{src:"https://img.shields.io/badge/Watch-@serenity--js-E62117?logo=youtube",alt:"Watch Serenity/JS on YouTube"})}),"\n",(0,n.jsx)(t.a,{href:"https://matrix.to/#/#serenity-js:gitter.im",children:(0,n.jsx)(t.img,{src:"https://img.shields.io/badge/Chat-Serenity%2FJS%20Community-FBD30B?logo=matrix",alt:"Join Serenity/JS Community Chat"})}),"\n",(0,n.jsx)(t.a,{href:"https://github.com/sponsors/serenity-js",children:(0,n.jsx)(t.img,{src:"https://img.shields.io/badge/Support-@serenity--js-703EC8?logo=github",alt:"Support Serenity/JS on GitHub"})})]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"https://serenity-js.org",children:"Serenity/JS"})," revolutionises automated testing by enabling your team to write ",(0,n.jsx)(t.strong,{children:"expressive"}),", ",(0,n.jsx)(t.strong,{children:"maintainable tests"})," that align\nwith ",(0,n.jsx)(t.strong,{children:"your unique domain"}),". Seamlessly integrating with ",(0,n.jsx)(t.a,{href:"https://webdriver.io",children:"WebdriverIO"})," and test runners like\n",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/test-runners/mocha/",children:(0,n.jsx)(t.strong,{children:"Mocha"})}),",\n",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/test-runners/cucumber/",children:(0,n.jsx)(t.strong,{children:"Cucumber"})}),",\nand ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/test-runners/jasmine/",children:(0,n.jsx)(t.strong,{children:"Jasmine"})}),",\nSerenity/JS also offers ",(0,n.jsx)(t.strong,{children:"advanced reporting"})," that provides clear insights into test results,\nhelping both technical teams and business stakeholders understand the quality of the system under test."]}),"\n",(0,n.jsx)(t.h2,{id:"features",children:"Features"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Write ",(0,n.jsx)(t.strong,{children:"expressive"}),", ",(0,n.jsx)(t.strong,{children:"maintainable"})," tests that align with your unique domain using the ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/design/screenplay-pattern",children:(0,n.jsx)(t.strong,{children:"Serenity/JS Screenplay Pattern"})})," APIs."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Leverage advanced reporting"})," to track progress, detect failures, and share results with both technical and business stakeholders."]}),"\n",(0,n.jsx)(t.li,{children:"Build on flexible, modular, and extensible architecture that supports a wide range of test automation needs."}),"\n",(0,n.jsx)(t.li,{children:"Integrate with WebdriverIO and modern test automation tools."}),"\n"]}

1),"\n",(0,n.jsx)(t.h2,{id:"quick-start",children:"Quick Start"}),"\n",(0,n.jsx)(t.p,{children:"Serenity/JS integrates with the WebdriverIO command line wizard to help you set up a new project with the required dependencies, configuration and example tests."}),"\n",(0,n.jsxs)(t.p,{children:["If you prefer to review a reference implementation first or use it as a starting point for your project, you can clone a ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/project-templates/",children:"Serenity/JS Project Template"})," for your preferred test runner."]}),"\n",(0,n.jsx)(t.h3,{id:"creating-a-project",children:"Creating a project"}),"\n",(0,n.jsx)(t.p,{children:"To use the WebdriverIO wizard to create a new project, run the following command in your computer terminal:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-sh",children:"npm init wdio ./my-project\n"})}),"\n",(0,n.jsx)(t.p,{children:"To create a Serenity/JS project, select the following options:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Type of testing: ",(0,n.jsx)(t.strong,{children:"E2E Testing"})]}),"\n",(0,n.jsxs)(t.li,{children:["Automation backend: ",(0,n.jsx)(t.strong,{children:"any"})," - Serenity/JS supports both local and remote WebdriverIO test runners; select ",(0,n.jsx)(t.strong,{children:"local"})," to keep it simple"]}),"\n",(0,n.jsxs)(t.li,{children:["Environment: ",(0,n.jsx)(t.strong,{children:"web"})]}),"\n",(0,n.jsxs)(t.li,{children:["Browser: ",(0,n.jsx)(t.strong,{children:"any"})," - Serenity/JS supports all browsers supported by WebdriverIO; selecting ",(0,n.jsx)(t.strong,{children:"Chrome"})," is a good starting point"]}),"\n",(0,n.jsxs)(t.li,{children:["Framework: ",(0,n.jsx)(t.strong,{children:"Jasmine with Serenity/JS"}),", ",(0,n.jsx)(t.strong,{children:"Mocha with Serenity/JS"}),", or ",(0,n.jsx)(t.strong,{children:"Cucumber with Serenity/JS"}),"; we'll use ",(0,n.jsx)(t.strong,{children:"Mocha with Serenity/JS"})," in this example"]}),"\n",(0,n.jsxs)(t.li,{children:["Compiler: ",(0,n.jsx)(t.strong,{children:"any"})," - Serenity/JS supports both TypeScript and JavaScript; we recommend ",(0,n.jsx)(t.strong,{children:"TypeScript"})," for better tooling support"]}),"\n",(0,n.jsxs)(t.li,{children:["Generate test files: ",(0,n.jsx)(t.strong,{children:"yes"}),", if you'd like Serenity/JS to give you a starting point for your test scenarios"]}),"\n",(0,n.jsxs)(t.li,{children:["Test file location: ",(0,n.jsx)(t.strong,{children:"accept the defaults"})," unless you'd like to store your code in a different directory"]}),"\n",(0,n.jsxs)(t.li,{children:["Test reporter: ",(0,n.jsx)(t.strong,{children:"any"}),", Serenity/JS configures the project to use ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/reporting/",children:"Serenity/JS reporting services"}),", and you can add native WebdriverIO reporters too if needed"]}),"\n",(0,n.jsxs)(t.li,{children:["Plugins/add-ons/services: ",(0,n.jsx)(t.strong,{children:"none"}),"; Serenity/JS doesn't require any additional plugins to work with WebdriverIO"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To create a Serenity/JS, WebdriverIO and Cucumber project, follow the tutorial:"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://youtu.be/8mMY6Of4nCw",children:(0,n.jsx)(t.img,{src:"https://img.youtube.com/vi/8mMY6Of4nCw/mqdefault.jpg",alt:"Watch the video"})})}),"\n",(0,n.jsx)(t.h3,{id:"writing-a-test-scenario",children:"Writing a test scenario"}),"\n",(0,n.jsxs)(t.p,{children:["Assuming you've chosen ",(0,n.jsx)(t.strong,{children:"Mocha with Serenity/JS"})," and requested the wizard to generate example test files for you,\nyou'll find your first test file located at ",(0,n.jsx)(t.code,{children:"./test/specs/example.spec.ts"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"// ./test/specs/example.spec.ts\nimport { describe, it } from 'mocha'\n\nimport { Ensure, equals } from '@serenity-js/assertions'\nimport { actorCalled } from '@serenity-js/core'\nimport { By, Navigate, PageElement, Text } from '@serenity-js/web'\n\ndescribe('Example', () => {\n\n    it('interacts with a web page', async () => {\n\n        await actorCalled('Alice').attemptsTo(\n            Navigate.to('https://serenity-js.org'),\n            Ensure.that(\n                Text.of(PageElement.located(By.id('cta-start-automating'))),\n                equals('Start automating \ud83d\ude80')\n            ),\n        )\n    })\n    \n    // ... other examples\n})\n"})}),"\n",(0,n.jsx)(t.p,{children:"You'll notice that the example test file uses:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://serenity-js.org/api/assertions/",children:(0,n.jsx)(t.code,{children:"@serenity-js/assertions"})})," - to make assertions about the state of the system under test"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://serenity-js.org/api/core/",children:(0,n.jsx)(t.code,{children:"@serenity-js/core"})})," - to create and manage actors"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://serenity-js.org/api/web/",children:(0,n.jsx)(t.code,{children:"@serenity-js/web"})})," - to interact with web pages"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["You can learn more about these and other Serenity/JS modules in the ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/api/",children:"Serenity/JS API documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["The configuration of your project is located in the ",(0,n.jsx)(t.code,{children:"wdio.conf.ts"})," file. Check out the ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/test-runners/webdriverio/",children:"Serenity/JS WebdriverIO integration guide"})," for more details."]}),"\n",(0,n.jsx)(t.h3,{id:"running-your-tests-and-generating-reports",children:"Running your tests and generating reports"}),"\n",(0,n.jsx)(t.p,{children:"To run your tests and generate Serenity/JS reports, execute the following command in your terminal:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-sh",children:"npm run serenity\n"})}),"\n",(0,n.jsxs)(t.p,{children:["Your test results will be available in the output directory configured in your reporter settings.\nSee the ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/reporting/",children:"Serenity/JS Reporting guide"})," to learn about available reporters,\nincluding the ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/reporting/html-reporter/",children:"HTML Reporter"})," and ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/reporting/serenity-bdd-reporter/",children:"Serenity BDD Reporter"}),"."]}),"\n",(0,n.jsx)(t.h2,{id:"documentation",children:"Documentation"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://serenity-js.org/api/",children:"API Reference"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/design/screenplay-pattern/",children:"Screenplay Pattern Guide"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/project-templates/",children:"Serenity/JS Project Templates"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/serenity-js/serenity-js/tree/main/examples",children:"More examples and reference implementations"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/tutorials/your-first-web-scenario/",children:"Tutorial: First Web Scenario"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/tutorials/your-first-api-scenario/",children:"Tutorial: First API Scenario"})}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"contributing",children:"Contributing"}),"\n",(0,n.jsxs)(t.p,{children:["Contributions of all kinds are welcome! Get started with the ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/community/contributing/",children:"Contributing Guide"}),"."]}),"\n",(0,n.jsx)(t.h2,{id:"community",children:"Community"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://matrix.to/#/#serenity-js:gitter.im",children:"Community Chat"})}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://github.com/orgs/serenity-js/discussions",children:"Discussions Forum"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Visit the ",(0,n.jsx)(t.a,{href:"https://github.com/orgs/serenity-js/discussions/categories/how-to",children:"\ud83d\udca1How to... ?"})," section for answers to common questions"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["If you enjoy using Serenity/JS, make sure to star \u2b50\ufe0f ",(0,n.jsx)(t.a,{href:"https://github.com/serenity-js/serenity-js",children:"Serenity/JS on GitHub"})," to help others discover the framework!"]}),"\n",(0,n.jsx)(t.h2,{id:"license",children:"License"}),"\n",(0,n.jsxs)(t.p,{children:["The Serenity/JS code base is licensed under the ",(0,n.jsx)(t.a,{href:"https://opensource.org/license/apache-2-0",children:"Apache-2.0"})," license,\nwhile its documentation and the ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/handbook/",children:"Serenity/JS Handbook"})," are licensed under the ",(0,n.jsx)(t.a,{href:"https://creativecommons.org/licenses/by-nc-sa/4.0/",children:"Creative 

1Commons BY-NC-SA 4.0 International"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["See the ",(0,n.jsx)(t.a,{href:"https://serenity-js.org/legal/license/",children:"Serenity/JS License"}),"."]}),"\n",(0,n.jsx)(t.h2,{id:"support",children:"Support"}),"\n",(0,n.jsxs)(t.p,{children:["Support ongoing development through ",(0,n.jsx)(t.a,{href:"https://github.com/sponsors/serenity-js",children:"GitHub Sponsors"}),". Sponsors gain access to ",(0,n.jsx)(t.a,{href:"https://github.com/serenity-js/playbooks",children:"Serenity/JS Playbooks"}),"\nand priority help in the ",(0,n.jsx)(t.a,{href:"https://github.com/orgs/serenity-js/discussions",children:"Discussions Forum"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["For corporate sponsorship or commercial support, please contact ",(0,n.jsx)(t.a,{href:"https://www.linkedin.com/in/janmolak/",children:"Jan Molak"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://github.com/sponsors/serenity-js",children:(0,n.jsx)(t.img,{src:"https://img.shields.io/badge/Support%20@serenity%2FJS-703EC8?style=for-the-badge&logo=github&logoColor=white",alt:"GitHub Sponsors"})})})]})}function l(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}}}]);