https://webdriver.io/assets/js/f8984ba7.97e57e8e.js

1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9092],{1001:(e,t,r)=>{r.d(t,{A:()=>k});var n=r(7378),i=r(23372),s=r(41129),o=r(82434),a=r(30505),l=r(90703),d=r(8663),c=r(39164),u=r(60534);function h(e){return n.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,n.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 p(e){const{values:t,children:r}=e;return(0,n.useMemo)(()=>{const e=t??function(e){return h(e).map(({props:{value:e,label:t,attributes:r,default:n}})=>({value:e,label:t,attributes:r,default:n}))}(r);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,r])}function m({value:e,tabValues:t}){return t.some(t=>t.value===e)}function f({queryString:e=!1,groupId:t}){const r=(0,a.W6)(),i=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,d.aZ)(i),(0,n.useCallback)(e=>{if(!i)return;const t=new URLSearchParams(r.location.search);t.set(i,e),r.replace({...r.location,search:t.toString()})},[i,r])]}function x(e){const{defaultValue:t,queryString:r=!1,groupId:i}=e,s=p(e),[o,a]=(0,n.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(!m({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 r=t.find(e=>e.default)??t[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:s})),[d,c]=f({queryString:r,groupId:i}),[h,x]=function({groupId:e}){const t=function(e){return e?`docusaurus.tab.${e}`:null}(e),[r,i]=(0,u.Dv)(t);return[r,(0,n.useCallback)(e=>{t&&i.set(e)},[t,i])]}({groupId:i}),b=(()=>{const e=d??h;return m({value:e,tabValues:s})?e:null})();(0,l.A)(()=>{b&&a(b)},[b]);return{selectedValue:o,selectValue:(0,n.useCallback)(e=>{if(!m({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);a(e),c(e),x(e)},[c,x,s]),tabValues:s}}var b=r(17933);const g={tabList:"tabList_PGOh",tabItem:"tabItem_Wr1C"};var j=r(86106);function v({className:e,block:t,selectedValue:r,selectValue:n,tabValues:s}){const a=[],{blockElementScrollPositionUntilNextRender:l}=(0,o.a_)(),d=e=>{const t=e.currentTarget,i=a.indexOf(t),o=s[i].value;o!==r&&(l(t),n(o))},c=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const r=a.indexOf(e.currentTarget)+1;t=a[r]??a[0];break}case"ArrowLeft":{const r=a.indexOf(e.currentTarget)-1;t=a[r]??a[a.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.A)("tabs",{"tabs--block":t},e),children:s.map(({value:e,label:t,attributes:n})=>(0,j.jsx)("li",{role:"tab",tabIndex:r===e?0:-1,"aria-selected":r===e,ref:e=>{a.push(e)},onKeyDown:c,onClick:d,...n,className:(0,i.A)("tabs__item",g.tabItem,n?.className,{"tabs__item--active":r===e}),children:t??e},e))})}function w({lazy:e,children:t,selectedValue:r}){const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const e=s.find(e=>e.props.value===r);return e?(0,n.cloneElement)(e,{className:(0,i.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:s.map((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r}))})}function y(e){const t=x(e);return(0,j.jsxs)("div",{className:(0,i.A)(s.G.tabs.container,"tabs-container",g.tabList),

1children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(w,{...t,...e})]})}function k(e){const t=(0,b.A)();return(0,j.jsx)(y,{...e,children:h(e.children)},String(t))}},22002:(e,t,r)=>{r.d(t,{R:()=>o,x:()=>a});var n=r(7378);const i={},s=n.createContext(i);function o(e){const t=n.useContext(s);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(i):e.components||i:o(e.components),n.createElement(s.Provider,{value:t},e.children)}},56864:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"wdio-timeline-reporter","title":"Timeline Reporter","description":"wdio-timeline-reporter is a 3rd party package, for more information please see GitHub | npm","source":"@site/docs/_wdio-timeline-reporter.md","sourceDirName":".","slug":"/wdio-timeline-reporter","permalink":"/docs/wdio-timeline-reporter","draft":false,"unlisted":false,"editUrl":"https://github.com/QualityOps/wdio-timeline-reporter/edit/master/README.md","tags":[],"version":"current","frontMatter":{"id":"wdio-timeline-reporter","title":"Timeline Reporter","custom_edit_url":"https://github.com/QualityOps/wdio-timeline-reporter/edit/master/README.md"},"sidebar":"docs","previous":{"title":"HTML Reporter","permalink":"/docs/wdio-html-nice-reporter"},"next":{"title":"CucumberJS JSON Reporter","permalink":"/docs/wdio-cucumberjs-json-reporter"}}');var i=r(86106),s=r(22002);r(1001),r(87780);const o={id:"wdio-timeline-reporter",title:"Timeline Reporter",custom_edit_url:"https://github.com/QualityOps/wdio-timeline-reporter/edit/master/README.md"},a=void 0,l={},d=[{value:"Why",id:"why",level:2},{value:"Features include:",id:"features-include",level:4},{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:3},{value:"Reporter Options",id:"reporter-options",level:3},{value:"Add Additional information to test context",id:"add-additional-information-to-test-context",level:3},{value:"Basic usage",id:"basic-usage",level:4},{value:"Mocha example",id:"mocha-example",level:5},{value:"Acknowledgement",id:"acknowledgement",level:2}];function c(e){const t={a:"a",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",h4:"h4",h5:"h5",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.blockquote,{children:["\n",(0,i.jsxs)(t.p,{children:["wdio-timeline-reporter is a 3rd party package, for more information please see ",(0,i.jsx)(t.a,{href:"https://github.com/QualityOps/wdio-timeline-reporter",children:"GitHub"})," | ",(0,i.jsx)(t.a,{href:"https://www.npmjs.com/package/wdio-timeline-reporter",children:"npm"})]}),"\n"]}),"\n",(0,i.jsxs)(t.blockquote,{children:["\n",(0,i.jsx)(t.p,{children:'A one stop shop WebdriverIO reporter for an aggregated visualisation of your test results because "Seeing is believing"'}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/QualityOps/wdio-timeline-reporter/blob/master/./images/example.png",alt:"example.png"})}),"\n",(0,i.jsx)(t.h2,{id:"why",children:"Why"}),"\n",(0,i.jsx)(t.p,{children:"Because we spend a lot of time debugging failing tests switching from terminal output to viewing error screenshots etc. This reporter aggregates all the typical information you will need into one report. Run tests and have a nice timeline of events you can look back at to further verify everything looks ok."}),"\n",(0,i.jsx)(t.h4,{id:"features-include",children:"Features include:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Works great with Mocha and Jasmine frameworks. Also works with Cucumber but every step will be reported as a test"}),"\n",(0,i.jsx)(t.li,{children:"Loud Summary of the Test Results."}),"\n",(0,i.jsx)(t.li,{children:"Detail of each test run including all screenshots captured during test execution."}),"\n",(0,i.jsx)(t.li,{children:"Test Results filtering. Great for focusing on failed tests"}),"\n",(0,i.jsx)(t.li,{children:"Error stack trace attached to test."}),"\n",(0,i.jsx)(t.li,{children:"Ability to add additional information to test at runtime."}),"\n",(0,i.jsx)(t.li,{children:"No post processing required. On completion of wdio test process, a static html report file will get generated."}),"\n",(0,i.jsx)(t.li,{children:"Timeline service to manage the taking of screenshots including resizing of the images."}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["An example html report can be found ",(0,i.jsx)(t.a,{href:"http://htmlpreview.github.io/?https://github.com/QualityOps/wdio-timeline-reporter/blob/master/images/example-timeline-report.html",children:"here"})]}),"\n",(0,i.jsxs)(t.p,{children:["Instructions on how to install ",(0,i.jsx)(t.code,{children:"WebdriverIO"})," can be found ",(0,i.jsx)(t.a,{href:"http://webdriver.io/guide/getstarted/install.html",children:"here"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsxs)(t.strong,{children:["FOR VERSION COMPATIBLE WITH WEBDRIVERIO V4 SEE ",(0,i.jsx)(t.a,{href:"https://github.com/QualityOps/wdio-timeline-reporter/tree/v4",children:"HERE"})]})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-shell",children:"npm install --save wdio-timeline-reporter\n"})}),"\n",(0,i.jsxs)(t.p,{children:["A dependency will be added to your ",(0,i.jsx)(t.code,{children:"package.json"})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",children:'{\n  "depen

1dencies": {\n    "wdio-timeline-reporter": "^5.1.0"\n  }\n}\n'})}),"\n",(0,i.jsx)(t.h3,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["Add ",(0,i.jsx)(t.code,{children:"timeline"})," to the reporters array in your wdio config file."]}),"\n",(0,i.jsxs)(t.p,{children:["Also import and add ",(0,i.jsx)(t.code,{children:"TimelineService"})," from wdio-timeline-reporter."]}),"\n",(0,i.jsxs)(t.p,{children:["Service is mandatory to combine reports and create html as reporters are now initialised per runner instance in webdriverio 5. ",(0,i.jsx)(t.a,{href:"https://github.com/webdriverio/webdriverio/issues/3780",children:"See open discussion on webdriverio"})]}),"\n",(0,i.jsxs)(t.p,{children:["The TimelineService can also manage taking of screenshots during tests execution. You have the option to reduce the size and quality of the images and to embed the images into the report as base64. These are configurable using the ",(0,i.jsx)(t.a,{href:"#reporter-options",children:"reporter options."})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"// wdio.conf.js\nconst { TimelineService } = require('wdio-timeline-reporter/timeline-service');\nexports.config = {\n  // ...\n  reporters: [['timeline', { outputDir: './desired_location' }]],\n  // ...\n  services: [[TimelineService]]\n};\n"})}),"\n",(0,i.jsx)(t.h3,{id:"reporter-options",children:"Reporter Options"}),"\n",(0,i.jsx)(t.p,{children:"If you wish to override the default reporter configuration add a reporterOptions object literal to timeline array under reporters as shown below."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/QualityOps/wdio-timeline-reporter/blob/master/./images/reporter-options.png",alt:"reporter-options.png"})}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"index"}),(0,i.jsx)(t.th,{children:"description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"1."}),(0,i.jsx)(t.td,{children:"Directory where html file and screenshots will be created in. Mandatory option"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"2."}),(0,i.jsxs)(t.td,{children:["Name of report html file. Default value is ",(0,i.jsx)(t.code,{children:"timeline-report.html"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"3."}),(0,i.jsxs)(t.td,{children:["Embed images as base64 in html file. Default value is ",(0,i.jsx)(t.code,{children:"false"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"4."}),(0,i.jsx)(t.td,{children:"Object options for image manipulation"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"5."}),(0,i.jsxs)(t.td,{children:["Set JPEG quality. Only relevant if ",(0,i.jsx)(t.code,{children:"resize"})," option is ",(0,i.jsx)(t.code,{children:"true"}),". The smaller the value, the smaller image size and quality would be. Default value is ",(0,i.jsx)(t.code,{children:"70"}),". Max value allowed is ",(0,i.jsx)(t.code,{children:"100"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"6."}),(0,i.jsxs)(t.td,{children:["Resize image. Default value is ",(0,i.jsx)(t.code,{children:"false"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"7."}),(0,i.jsxs)(t.td,{children:["value to decrease the total number of pixels by. Only relevant if ",(0,i.jsx)(t.code,{children:"resize"})," option is true. Defaults to ",(0,i.jsx)(t.code,{children:"1"})," Valid values ",(0,i.jsx)(t.code,{children:"1 - 5"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"8."}),(0,i.jsxs)(t.td,{children:["how often to take screenshots. Supported values are ",(0,i.jsx)(t.code,{children:"on:error"}),", ",(0,i.jsx)(t.code,{children:"before:click"}),", ",(0,i.jsx)(t.code,{children:"none"}),". Defaults to ",(0,i.jsx)(t.code,{children:"none"}),". ",(0,i.jsx)(t.code,{children:"before:click"})," is a great option for creating a timeline of screenshots of app under test."]})]})]})]}),"\n",(0,i.jsx)(t.h3,{id:"add-additional-information-to-test-context",children:"Add Additional information to test c

1ontext"}),"\n",(0,i.jsxs)(t.p,{children:["It is possible to add additional information to a test using the ",(0,i.jsx)(t.code,{children:"addContext"})," static method. This can be useful for adding important information that could help in debugging failed tests for example a user created during the test run with a dynamic username"]}),"\n",(0,i.jsx)(t.h4,{id:"basic-usage",children:"Basic usage"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"TimelineReporter.addContext"})," static method accepts either a string parameter or an object literal with two properties ",(0,i.jsx)(t.code,{children:"title"})," and ",(0,i.jsx)(t.code,{children:"value"})," e.g"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"{ title: 'sessionId', value: 'b59bb9ec-ab15-475e-9ce6-de8a14ca0cd3' }\n"})}),"\n",(0,i.jsx)(t.p,{children:"value could be also be a link"}),"\n",(0,i.jsx)(t.h5,{id:"mocha-example",children:"Mocha example"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"const TimelineReporter = require('wdio-timeline-reporter').default;\n\ndescribe('Suite', function() {\n  it('Test', function() {\n    // object literal parameter\n    TimelineReporter.addContext({\n      title: 'Test User',\n      value: 'user id created during the test'\n    });\n\n    // value as anchor tag\n    TimelineReporter.addContext({\n      title: 'Dynamic link',\n      value: '<a href=\"\">Some important link related to test</a>'\n    });\n\n    // string parameter\n    TimelineReporter.addContext('This test might be flaky');\n  });\n});\n"})}),"\n",(0,i.jsx)(t.h2,{id:"acknowledgement",children:"Acknowledgement"}),"\n",(0,i.jsxs)(t.p,{children:["Would love to give a shout out to the authors and maintainers of ",(0,i.jsx)(t.a,{href:"https://github.com/fijijavis/wdio-json-reporter",children:"wdio-json-reporter"})," Going through their v5 solution helped speed up my work"]})]})}function u(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},87780:(e,t,r)=>{r.d(t,{A:()=>o});r(7378);var n=r(23372);const i={tabItem:"tabItem_l0gC"};var s=r(86106);function o({children:e,hidden:t,className:r}){return(0,s.jsx)("div",{role:"tabpanel",className:(0,n.A)(i.tabItem,r),hidden:t,children:e})}}}]);