-
Notifications
You must be signed in to change notification settings - Fork 0
/
6eb54612.a809394a.js
1 lines (1 loc) · 28.8 KB
/
6eb54612.a809394a.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{111:function(e,t,a){"use strict";a.d(t,"a",(function(){return m})),a.d(t,"b",(function(){return u}));var n=a(0),r=a.n(n);function b(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){b(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},b=Object.keys(e);for(n=0;n<b.length;n++)a=b[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(n=0;n<b.length;n++)a=b[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var o=r.a.createContext({}),d=function(e){var t=r.a.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},m=function(e){var t=d(e.components);return r.a.createElement(o.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},s=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,b=e.originalType,i=e.parentName,o=l(e,["components","mdxType","originalType","parentName"]),m=d(a),s=n,u=m["".concat(i,".").concat(s)]||m[s]||p[s]||b;return a?r.a.createElement(u,c(c({ref:t},o),{},{components:a})):r.a.createElement(u,c({ref:t},o))}));function u(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var b=a.length,i=new Array(b);i[0]=s;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var o=2;o<b;o++)i[o]=a[o];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}s.displayName="MDXCreateElement"},195:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/fruits-store-19a4757ef9d0916e6a8cd13ddff3eb2b.png"},196:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/home-place-4b85b0a35e22226a7ba0f230950b5b0c.png"},197:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/go-to-home-transition-32259ef99d693ab3b92857fe6ecdff5f.png"},198:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/add-transition-49e9647a0135e59267d477ad4d102a70.png"},199:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/remove-transition-efb1b306c1381489ef3d370698f3f1d7.png"},200:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/open-cart-transition-611d276cef0e1d8b0fc6604d61efa7d3.png"},201:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/close-cart-transition-d65492c548c4f8a9001f82812405226c.png"},202:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/random-remove-product-transition-abba98a204665b3ab6f6e0459c3f60f9.png"},203:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/random-add-product-transition-205988e7bb6d371338fbed8cb96912e9.png"},204:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/random-quantity-transition-12f5aafeca3915d723e13d256b3da6e9.png"},205:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/task-8a87e85c903319b5444c97d8a0ca0f2d.png"},206:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/tasks-ea9dbdd7132ee882652d3fea6797016a.png"},207:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/bug-c8461022ec19bf92c42165429f3692a3.png"},208:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/reduced-ae66fbbe166440c8757e2b62e82018da.png"},209:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/verify-c671813ebabca510c640f7987b7068da.png"},91:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"toc",(function(){return l})),a.d(t,"default",(function(){return d}));var n=a(3),r=a(7),b=(a(0),a(111)),i={id:"tutorial",title:"Tutorial",sidebar_label:"Tutorial",slug:"/tutorial"},c={unversionedId:"tutorial",id:"tutorial",isDocsHomePage:!1,title:"Tutorial",description:"Overview",source:"@site/docs/tutorial.mdx",slug:"/tutorial",permalink:"/docs/tutorial",editUrl:"https://github.com/sicope-model/sicope-model-website/edit/master/docs/tutorial.mdx",version:"current",sidebar_label:"Tutorial"},l=[{value:"Overview",id:"overview",children:[]},{value:"Model",id:"model",children:[]},{value:"Places",id:"places",children:[{value:"Home",id:"home",children:[]}]},{value:"Transitions",id:"transitions",children:[{value:"Go To Home",id:"go-to-home",children:[]},{value:"Add",id:"add",children:[]},{value:"Remove",id:"remove",children:[]},{value:"Open Cart",id:"open-cart",children:[]},{value:"Close Cart",id:"close-cart",children:[]},{value:"Random Remove Product",id:"random-remove-product",children:[]},{value:"Random Add Product",id:"random-add-product",children:[]},{value:"Random Quantity",id:"random-quantity",children:[]}]},{value:"Task",id:"task",children:[]},{value:"Bug",id:"bug",children:[]},{value:"Summarize",id:"summarize",children:[]}],o={toc:l};function d(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(b.b)("wrapper",Object(n.a)({},o,i,{components:t,mdxType:"MDXLayout"}),Object(b.b)("h2",{id:"overview"},"Overview"),Object(b.b)("p",null,"In this tutorial, we will test a simple web application using SICOPE Model: ",Object(b.b)("a",{parentName:"p",href:"http://react-compare-app.surge.sh/"},"http://react-compare-app.surge.sh/")),Object(b.b)("p",null,Object(b.b)("img",{alt:"fruits-store",src:a(195).default})),Object(b.b)("p",null,"This application is very simple. It has these features:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"Add product"),Object(b.b)("li",{parentName:"ul"},"Remove product"),Object(b.b)("li",{parentName:"ul"},"Open cart"),Object(b.b)("li",{parentName:"ul"},"Close cart")),Object(b.b)("h2",{id:"model"},"Model"),Object(b.b)("p",null,"To test this application, we need to create models. There are 2 ways to create models:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"Models > Build"),Object(b.b)("li",{parentName:"ul"},"Models > Import")),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",{parentName:"div",className:"admonition-heading"},Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",{parentName:"h5",className:"admonition-icon"},Object(b.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(b.b)("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")),Object(b.b)("div",{parentName:"div",className:"admonition-content"},Object(b.b)("p",{parentName:"div"},"We exported the model for you so you don't have to build it from scratch. All you need to do is download and import by\nthe link below:"),Object(b.b)("a",{target:"_blank",href:"/json/fruits-store.json",download:"fruits-store.json"},"Download"))),Object(b.b)("p",null,"For this web application, one model is enough:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"Label: ",Object(b.b)("inlineCode",{parentName:"li"},"Fruits Store")),Object(b.b)("li",{parentName:"ul"},"Tags: ",Object(b.b)("inlineCode",{parentName:"li"},"fruits"),", ",Object(b.b)("inlineCode",{parentName:"li"},"store"))),Object(b.b)("h2",{id:"places"},"Places"),Object(b.b)("p",null,"This web application only have one page, so we can create one place called ",Object(b.b)("inlineCode",{parentName:"p"},"Home")),Object(b.b)("h3",{id:"home"},"Home"),Object(b.b)("p",null,Object(b.b)("img",{alt:"home-place",src:a(196).default})),Object(b.b)("p",null,"To verify that we actually in home page, we can add a command to verify an element in it:"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr",align:null},"Command"),Object(b.b)("th",{parentName:"tr",align:null},"Target"),Object(b.b)("th",{parentName:"tr",align:null},"Value"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Assert Element Present"),Object(b.b)("td",{parentName:"tr",align:null},"css=.ProductList"),Object(b.b)("td",{parentName:"tr",align:null})))),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",{parentName:"div",className:"admonition-heading"},Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",{parentName:"h5",className:"admonition-icon"},Object(b.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(b.b)("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")),Object(b.b)("div",{parentName:"div",className:"admonition-content"},Object(b.b)("p",{parentName:"div"},"Everytime our model reach ",Object(b.b)("inlineCode",{parentName:"p"},"Home")," place, it run this command to verify that we are actually in ",Object(b.b)("inlineCode",{parentName:"p"},"Home")," web page."))),Object(b.b)("h2",{id:"transitions"},"Transitions"),Object(b.b)("p",null,"We define transitions based on features this web application have:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"Add"),Object(b.b)("li",{parentName:"ul"},"Remove"),Object(b.b)("li",{parentName:"ul"},"Close Cart"),Object(b.b)("li",{parentName:"ul"},"Open Cart")),Object(b.b)("p",null,"We also need one starting transition to tell this tool where to begin with:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"Go To Home")),Object(b.b)("p",null,"Usually those transitions are enough. But since we also want to choose random quantity, choose random product to\nadd to cart, choose random product to remove from cart, we need at least 3 more transitions:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"Random Remove Product"),Object(b.b)("li",{parentName:"ul"},"Random Add Product"),Object(b.b)("li",{parentName:"ul"},"Random Quantity")),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",{parentName:"div",className:"admonition-heading"},Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",{parentName:"h5",className:"admonition-icon"},Object(b.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(b.b)("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")),Object(b.b)("div",{parentName:"div",className:"admonition-content"},Object(b.b)("p",{parentName:"div"},"We need to create extra transitions, because we don't want them to affect variables when reducing bug's reproduce steps"))),Object(b.b)("h3",{id:"go-to-home"},"Go To Home"),Object(b.b)("p",null,Object(b.b)("img",{alt:"go-to-home-transition",src:a(197).default})),Object(b.b)("p",null,"We need these commands:"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr",align:null},"Command"),Object(b.b)("th",{parentName:"tr",align:"center"},"Target"),Object(b.b)("th",{parentName:"tr",align:"right"},"Value"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Open"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("a",{parentName:"td",href:"https://renaudtertrais.github.io/fruits-store/"},"https://renaudtertrais.github.io/fruits-store/")),Object(b.b)("td",{parentName:"tr",align:"right"})),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Store"),Object(b.b)("td",{parentName:"tr",align:"center"},"4"),Object(b.b)("td",{parentName:"tr",align:"right"},"added")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Store"),Object(b.b)("td",{parentName:"tr",align:"center"},"closed"),Object(b.b)("td",{parentName:"tr",align:"right"},"cart")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Store"),Object(b.b)("td",{parentName:"tr",align:"center"}),Object(b.b)("td",{parentName:"tr",align:"right"},"removeProduct")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Store"),Object(b.b)("td",{parentName:"tr",align:"center"}),Object(b.b)("td",{parentName:"tr",align:"right"},"quantity")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Store"),Object(b.b)("td",{parentName:"tr",align:"center"}),Object(b.b)("td",{parentName:"tr",align:"right"},"addProduct")))),Object(b.b)("p",null,"There is no restriction to apply this transition, so the guard has value ",Object(b.b)("inlineCode",{parentName:"p"},"true"),"."),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",{parentName:"div",className:"admonition-heading"},Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",{parentName:"h5",className:"admonition-icon"},Object(b.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(b.b)("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")),Object(b.b)("div",{parentName:"div",className:"admonition-content"},Object(b.b)("p",{parentName:"div"},"Each transition must come from at least 1 place to at least 1 place. There is one exception in this case: it is a\nstarting transition, so it does not come from any place. There is only and only one starting transition in a model."),Object(b.b)("p",{parentName:"div"},"Unlike starting transition, all transitions below come from transition ",Object(b.b)("inlineCode",{parentName:"p"},"Home")," to transition ",Object(b.b)("inlineCode",{parentName:"p"},"Home"),"."))),Object(b.b)("h3",{id:"add"},"Add"),Object(b.b)("p",null,Object(b.b)("img",{alt:"add-transition",src:a(198).default})),Object(b.b)("p",null,"We need these commands:"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr",align:null},"Command"),Object(b.b)("th",{parentName:"tr",align:"center"},"Target"),Object(b.b)("th",{parentName:"tr",align:"right"},"Value"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Type"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"xpath=//div[@class='ProductListItem__name' and text()='${addProduct}']/..//input")),Object(b.b)("td",{parentName:"tr",align:"right"},"${quantity}")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Click"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"xpath=//div[@class='ProductListItem__name' and text()='${addProduct}']/..//button")),Object(b.b)("td",{parentName:"tr",align:"right"})),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Assert Element Not Preset"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"xpath=//div[@class='ProductListItem__name' and text()='${addProduct}']/..//button[contains(@class, 'ProductListItem__add-to-cart-button')]")),Object(b.b)("td",{parentName:"tr",align:"right"})),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Execute Script"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"return ${added} + 1")),Object(b.b)("td",{parentName:"tr",align:"right"},"added")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Store"),Object(b.b)("td",{parentName:"tr",align:"center"}),Object(b.b)("td",{parentName:"tr",align:"right"},"addProduct")))),Object(b.b)("p",null,"The condition to apply this transition is ",Object(b.b)("inlineCode",{parentName:"p"},"added < 8 && addProduct !== null && quantity !== null"),", meaning:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"We have at least 1 product remaining to add"),Object(b.b)("li",{parentName:"ul"},"We chose random product to add"),Object(b.b)("li",{parentName:"ul"},"We chose random quantity")),Object(b.b)("h3",{id:"remove"},"Remove"),Object(b.b)("p",null,Object(b.b)("img",{alt:"remove-transition",src:a(199).default})),Object(b.b)("p",null,"We need these commands:"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr",align:null},"Command"),Object(b.b)("th",{parentName:"tr",align:"center"},"Target"),Object(b.b)("th",{parentName:"tr",align:"right"},"Value"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Click"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"xpath=//div[@class='CartItem__name' and text()='${removeProduct}']/..//button")),Object(b.b)("td",{parentName:"tr",align:"right"})),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Assert Element Not Preset"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"xpath=//div[@class='CartItem__name' and text()='${removeProduct}']/..//button[contains(@class, 'CartItem__remove-button')]")),Object(b.b)("td",{parentName:"tr",align:"right"})),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Execute Script"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"return ${added} - 1")),Object(b.b)("td",{parentName:"tr",align:"right"},"added")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Store"),Object(b.b)("td",{parentName:"tr",align:"center"}),Object(b.b)("td",{parentName:"tr",align:"right"},"removeProduct")))),Object(b.b)("p",null,"The condition to apply this transition is ",Object(b.b)("inlineCode",{parentName:"p"},"added > 0 && cart === 'open' && removeProduct !== null"),", meaning:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"We added at least 1 product to the cart"),Object(b.b)("li",{parentName:"ul"},"We chose random product to remove"),Object(b.b)("li",{parentName:"ul"},"Cart is open")),Object(b.b)("h3",{id:"open-cart"},"Open Cart"),Object(b.b)("p",null,Object(b.b)("img",{alt:"open-cart-transition",src:a(200).default})),Object(b.b)("p",null,"We need these commands:"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr",align:null},"Command"),Object(b.b)("th",{parentName:"tr",align:"center"},"Target"),Object(b.b)("th",{parentName:"tr",align:"right"},"Value"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Click"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"css=.App__cart-button")),Object(b.b)("td",{parentName:"tr",align:"right"})),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Store"),Object(b.b)("td",{parentName:"tr",align:"center"},"open"),Object(b.b)("td",{parentName:"tr",align:"right"},"cart")))),Object(b.b)("p",null,"The condition to apply this transition is ",Object(b.b)("inlineCode",{parentName:"p"},"cart === 'closed'"),", meaning:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"Cart must be closed to be open")),Object(b.b)("h3",{id:"close-cart"},"Close Cart"),Object(b.b)("p",null,Object(b.b)("img",{alt:"close-cart-transition",src:a(201).default})),Object(b.b)("p",null,"We need these commands:"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr",align:null},"Command"),Object(b.b)("th",{parentName:"tr",align:"center"},"Target"),Object(b.b)("th",{parentName:"tr",align:"right"},"Value"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Click"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"css=.App__cart-button.active")),Object(b.b)("td",{parentName:"tr",align:"right"})),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Store"),Object(b.b)("td",{parentName:"tr",align:"center"},"closed"),Object(b.b)("td",{parentName:"tr",align:"right"},"cart")))),Object(b.b)("p",null,"The condition to apply this transition is ",Object(b.b)("inlineCode",{parentName:"p"},"cart === 'open'"),", meaning:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"Cart must be open to be closed")),Object(b.b)("h3",{id:"random-remove-product"},"Random Remove Product"),Object(b.b)("p",null,Object(b.b)("img",{alt:"random-remove-product-transition",src:a(202).default})),Object(b.b)("p",null,"We need these commands:"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr",align:null},"Command"),Object(b.b)("th",{parentName:"tr",align:"center"},"Target"),Object(b.b)("th",{parentName:"tr",align:"right"},"Value"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Execute Script"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"var elements = document.querySelectorAll('.CartItem__remove-button'); var element = elements[Math.floor(Math.random() * elements.length)]; return element.parentElement.querySelector('.CartItem__name').textContent;")),Object(b.b)("td",{parentName:"tr",align:"right"},"removeProduct")))),Object(b.b)("p",null,"The condition is ",Object(b.b)("inlineCode",{parentName:"p"},"added > 0 && cart === 'open'"),", meaning:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"The cart is open"),Object(b.b)("li",{parentName:"ul"},"At least 1 product is added to cart")),Object(b.b)("h3",{id:"random-add-product"},"Random Add Product"),Object(b.b)("p",null,Object(b.b)("img",{alt:"random-add-product-transition",src:a(203).default})),Object(b.b)("p",null,"We need these commands:"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr",align:null},"Command"),Object(b.b)("th",{parentName:"tr",align:"center"},"Target"),Object(b.b)("th",{parentName:"tr",align:"right"},"Value"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Execute Script"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"var elements = document.querySelectorAll('.ProductListItem__add-to-cart'); var element = elements[Math.floor(Math.random() * elements.length)]; return element.parentElement.querySelector('.ProductListItem__name').textContent;")),Object(b.b)("td",{parentName:"tr",align:"right"},"addProduct")))),Object(b.b)("p",null,"The condition is ",Object(b.b)("inlineCode",{parentName:"p"},"added < 8"),", meaning:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"At least 1 product is not added to cart")),Object(b.b)("h3",{id:"random-quantity"},"Random Quantity"),Object(b.b)("p",null,Object(b.b)("img",{alt:"random-quantity-transition",src:a(204).default})),Object(b.b)("p",null,"We need these commands:"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr",align:null},"Command"),Object(b.b)("th",{parentName:"tr",align:"center"},"Target"),Object(b.b)("th",{parentName:"tr",align:"right"},"Value"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr",align:null},"Execute Script"),Object(b.b)("td",{parentName:"tr",align:"center"},Object(b.b)("inlineCode",{parentName:"td"},"return Math.floor(Math.random() * 10);")),Object(b.b)("td",{parentName:"tr",align:"right"},"quantity")))),Object(b.b)("h2",{id:"task"},"Task"),Object(b.b)("p",null,"Now, in order to test, we need to create a task and run it. Go to Tasks > Add New:"),Object(b.b)("p",null,Object(b.b)("img",{alt:"task",src:a(205).default})),Object(b.b)("p",null,"After creating a task, you will be redirected to tasks list page. Simply click on ",Object(b.b)("inlineCode",{parentName:"p"},"Run")," action to run it."),Object(b.b)("p",null,Object(b.b)("img",{alt:"tasks",src:a(206).default})),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",{parentName:"div",className:"admonition-heading"},Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",{parentName:"h5",className:"admonition-icon"},Object(b.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(b.b)("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")),Object(b.b)("div",{parentName:"div",className:"admonition-content"},Object(b.b)("p",{parentName:"div"},"When a bug is found, it will be notified to these channels if selected:"),Object(b.b)("ul",{parentName:"div"},Object(b.b)("li",{parentName:"ul"},"Email"),Object(b.b)("li",{parentName:"ul"},"Slack")))),Object(b.b)("h2",{id:"bug"},"Bug"),Object(b.b)("p",null,"You can encounter a bug when you run the task for several times."),Object(b.b)("p",null,"At first, the bug's steps can be very long like this:"),Object(b.b)("p",null,Object(b.b)("img",{alt:"bug",src:a(207).default})),Object(b.b)("p",null,"But you can run ",Object(b.b)("inlineCode",{parentName:"p"},"Reduce")," action to make it shorter after several tries."),Object(b.b)("p",null,Object(b.b)("img",{alt:"reduced",src:a(208).default})),Object(b.b)("p",null,"Now it's time to take a look at the bug. The message is:"),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},'Unexpected element "xpath=//div',"[@class='ProductListItem__name' and text()='Ananas']","/..//button","[contains(@class, 'ProductListItem__add-to-cart-button')]",'" was found in page')),Object(b.b)("p",null,"It means when we set quantity to ",Object(b.b)("inlineCode",{parentName:"p"},"0"),", the ",Object(b.b)("inlineCode",{parentName:"p"},"Add to cart")," button does not work as expected."),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",{parentName:"div",className:"admonition-heading"},Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",{parentName:"h5",className:"admonition-icon"},Object(b.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(b.b)("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")),Object(b.b)("div",{parentName:"div",className:"admonition-content"},Object(b.b)("p",{parentName:"div"},"We can export the bug to Selenium IDE to verify:\n",Object(b.b)("img",{alt:"verify",src:a(209).default})))),Object(b.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(b.b)("div",{parentName:"div",className:"admonition-heading"},Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",{parentName:"h5",className:"admonition-icon"},Object(b.b)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},Object(b.b)("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")),Object(b.b)("div",{parentName:"div",className:"admonition-content"},Object(b.b)("p",{parentName:"div"},Object(b.b)("inlineCode",{parentName:"p"},"Type")," command does not work well with Selenium IDE"))),Object(b.b)("h2",{id:"summarize"},"Summarize"),Object(b.b)("p",null,"That's it, we tested the ",Object(b.b)("inlineCode",{parentName:"p"},"Fruits Store")," web application and found a bug using SICOPE Model tool."))}d.isMDXComponent=!0}}]);