{"action":"created","issue":{"url":"https://api.github.com/repos/scenarioo/scenarioo/issues/149","labels_url":"https://api.github.com/repos/scenarioo/scenarioo/issues/149/labels{/name}","comments_url":"https://api.github.com/repos/scenarioo/scenarioo/issues/149/comments","events_url":"https://api.github.com/repos/scenarioo/scenarioo/issues/149/events","html_url":"https://github.com/scenarioo/scenarioo/issues/149","id":30385907,"number":149,"title":"Screen Annotations: graphically mark events and add other interessting annotations to Screenshots","user":{"login":"adiherzog","id":3780183,"avatar_url":"https://avatars.githubusercontent.com/u/3780183?v=3","gravatar_id":"","url":"https://api.github.com/users/adiherzog","html_url":"https://github.com/adiherzog","followers_url":"https://api.github.com/users/adiherzog/followers","following_url":"https://api.github.com/users/adiherzog/following{/other_user}","gists_url":"https://api.github.com/users/adiherzog/gists{/gist_id}","starred_url":"https://api.github.com/users/adiherzog/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adiherzog/subscriptions","organizations_url":"https://api.github.com/users/adiherzog/orgs","repos_url":"https://api.github.com/users/adiherzog/repos","events_url":"https://api.github.com/users/adiherzog/events{/privacy}","received_events_url":"https://api.github.com/users/adiherzog/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/scenarioo/scenarioo/labels/needs%20sponsor","name":"needs sponsor","color":"e11d21"},{"url":"https://api.github.com/repos/scenarioo/scenarioo/labels/topic:screen-annotations","name":"topic:screen-annotations","color":"bfd4f2"},{"url":"https://api.github.com/repos/scenarioo/scenarioo/labels/user-story","name":"user-story","color":"fbca04"}],"state":"open","locked":false,"assignee":{"login":"bruderol","id":755721,"avatar_url":"https://avatars.githubusercontent.com/u/755721?v=3","gravatar_id":"","url":"https://api.github.com/users/bruderol","html_url":"https://github.com/bruderol","followers_url":"https://api.github.com/users/bruderol/followers","following_url":"https://api.github.com/users/bruderol/following{/other_user}","gists_url":"https://api.github.com/users/bruderol/gists{/gist_id}","starred_url":"https://api.github.com/users/bruderol/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bruderol/subscriptions","organizations_url":"https://api.github.com/users/bruderol/orgs","repos_url":"https://api.github.com/users/bruderol/repos","events_url":"https://api.github.com/users/bruderol/events{/privacy}","received_events_url":"https://api.github.com/users/bruderol/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/scenarioo/scenarioo/milestones/25","html_url":"https://github.com/scenarioo/scenarioo/milestones/2.1%20-%20Release%202.1","labels_url":"https://api.github.com/repos/scenarioo/scenarioo/milestones/25/labels","id":1208753,"number":25,"title":"2.1 - Release 2.1","description":"Release 2.1 with new features like screen annotations.","creator":{"login":"bruderol","id":755721,"avatar_url":"https://avatars.githubusercontent.com/u/755721?v=3","gravatar_id":"","url":"https://api.github.com/users/bruderol","html_url":"https://github.com/bruderol","followers_url":"https://api.github.com/users/bruderol/followers","following_url":"https://api.github.com/users/bruderol/following{/other_user}","gists_url":"https://api.github.com/users/bruderol/gists{/gist_id}","starred_url":"https://api.github.com/users/bruderol/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bruderol/subscriptions","organizations_url":"https://api.github.com/users/bruderol/orgs","repos_url":"https://api.github.com/users/bruderol/repos","events_url":"https://api.github.com/users/bruderol/events{/privacy}","received_events_url":"https://api.github.com/users/bruderol/received_events","type":"User","site_admin":false},"open_issues":7,"closed_issues":19,"state":"open","created_at":"2015-07-15T08:18:30Z","updated_at":"2015-09-04T13:48:54Z","due_on":"2015-07-23T22:00:00Z","closed_at":null},"comments":31,"created_at":"2014-03-28T13:17:39Z","updated_at":"2015-09-28T14:03:50Z","closed_at":null,"body":"As a user of the scenarioo documentation I want to see important informations directly inside the screenshots as so called \"screen annotations\", such that I can see where the test interacted with the UI or other important informations that we want to highlight in the screenshots (e.g. caption/subtitle, URL the test entered or changed, click region, typed text, selection items inside a dropdown, mouse-over-texts, validated fields, etc.)\r\n\r\nWe identified the following important types of annotations so far, that we want to support with our design\r\n* click events (button, checkbox, etc.)\r\n* select event inside a combo-box or list\r\n* typing inside a text box\r\n* typing an URL in the browser navigation address bar\r\n* pressing refresh / back / forward buttons in browser\r\n* mark a field who's content was validated by the test (assertion)\r\n* mark fields for additional informations about the fields (e.g. all selection items inside a combo box)\r\n* any important text you want to put visually on the screenshot (any warning, or a caption/subtitle about what happens in this step)\r\n* there might be more types of annotations we did not think of yet\r\n\r\nIn general the annotations are realized generically, such that any other information can be stored in a similar way. The design therefore consists of the possibility to place arbitrary rectangular regions as \"screen annotations\" on a step, with addtional informations like text and description and additional informations (as generic data structure as other details in scenarioo documentation format). Detailed format description see acceptance criterias and JSON example below.\r\n\r\n#### Acceptance criteria\r\n\r\n* The API (Java and C#) is extended such that multiple \"screen annotations\" can be added to a step. Each screenAnnotation consists of following informations (see also JSON example below):\r\n  * region: rectangular area on the screen to highlight (x,y,width,height), origin of coordinates is the top left corner of the screenshot.\r\n  * text (optional): a text to display inside the region directly on the screen (client will cut off the text if too long). The text is also displayed in popup (in full length and strong in any case)\r\n  * description (optional): A longer description text to only display inside the popup that appears when clicking on an annotation (below the other 'text' which is displayed as strong caption above the description text inside the popup)\r\n  * style (optional): Determines, how the marked region is styled. One of several predefined styles: \"click\" | \"keyboard\" | \"expected\" | \"navigateToUrl\" | \"warn\" | \"error\" | \"info\" | \"highlight\" | \"neutral\".\r\n  * clickAction (optional): Determines what happens if the annotated region is clicked. One of \"toNextStep\" | \"toUrl\". Default behaviour is to open the information popup.\r\n  * clickActionUrl (optional): URL that is opened in case the clickAction is set to \"toUrl\". (mandatory if clickAction is set to \"toUrl\")\r\n  * details (optional): Generic Metadata as everywhere else in Scenarioo. This is also displayed in the popup below the description (usual rendering as in metadata trees on other pages of Scenarioo).\r\n* Whenever a step contains screen annotations, the Scenarioo client displays them in the correct position as an overlay on the screenshot (rectangular marker, in color dependent on style, text inside rectangular region).\r\n* the regions are placed correctly over the screenshot in all supported browsers and are placed correctly depending on the size of the screenshot. Font of text is also scaled accordingly, if regions get to small the texts will not appear anymore (user can still click to open the details popup to see it).\r\n* each annotation is styled depending on the specified style property (different color, special icon in upper left corner), if \"style\" is not specified, the \"neutral\" style is used.\r\n* if an annotation has additional information to display (text, description, details), there is a small button \"...\" in the lower right corner, that opens a popup to display this details (or some other mechanism to open the details in any case, even if a clickAction on the whole region is defined, is provided)\r\n    * the popup displays the text in bold font, below the description, and then any details informations (as usually in metadata trees)\r\n    * the popup is closed when clicking outside the popup or clicking the close button (a usual x-button in upper right corner of the popup)\r\n    * the popup should have a scrolled region inside for large content (if many details are contained)\r\n* if no clickAction is specified, clicking the whole rectangular region has the same effect as clicking the details button \"...\" to open the popup\r\n* If a screen annotation has a defined clickAction, the region is clickable with the specified behaviour (go to next step, go to previous step, open a specified clickActionURL). \r\n* user can choose to turn rendering of screen annotations on and off in the client (this setting is stored in local storage in the client, if a user turned it off, it will disappear, until the user turns it on again).\r\n* all objects stored in details of screen annotations are also stored in object repository and can therefore be retrieved (see new demo tab \"UI Elements\")\r\n\r\n#### JSON structure on step object for the client\r\n\r\nOnly the \"region\" field is mandatory in the API.\r\n\r\n\t{\r\n\t\t\"stepStatistics\" : { ... },\r\n\t\t\"stepIdentifier\" : { ... },\r\n\t\t\"fallback\" : false,\r\n\t\t\"step\" : {\r\n\t\t\t\"page\" : { ... },\r\n\t\t\t\"metadata\" : { ... },\r\n\t\t\t\"html\" : { ... },\r\n\t\t\t\"screenAnnotations\" : [\r\n\t\t\t\t{\r\n\t\t\t\t\tregion : {\r\n\t\t\t\t\t\tx: 123,\r\n\t\t\t\t\t\ty: 222,\r\n\t\t\t\t\t\twidth: 222,\r\n\t\t\t\t\t\theight: 20\t\t\t\t\t\r\n\t\t\t\t\t},\r\n\t\t\t\t\tscreenText: \"Blabla\",\r\n                                        title: \"Title for Popup\",\r\n\t\t\t\t\tdescription: \"Bliblubb\",\r\n\t\t\t\t\tstyle: \"CLICK\" | \"KEYBOARD\" | \"EXPECTED\" | \"NAVIGATE_TO_URL\" | \"WARN\" | \"ERROR\" | \"INFO\" | \"HIGHLIGHT\" | \"DEFAULT\"  /* Attention: in XML we use camel case without underscores for these enum values instead! */,\r\n\t\t\t\t\tclickAction: \"TO_NEXT_STEP\" | \"TO_URL\" /* Attention: in XML we use camel case without underscores for these enum values instead! */,\r\n\t\t\t\t\tclickActionUrl: \"http://...\",\r\n\t\t\t\t\tdetails: {\r\n\t\t\t\t\t\t...\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t],\r\n\t\t\t\"stepDescription\" : { ... }\r\n\t\t},\r\n\t\t\"stepNavigation\" : { ... },\r\n\t\t\"useCaseLabels\" : { ... },\r\n\t\t\"scenarioLabels\" : { ... }\r\n\t}\r\n\r\nThis design also covers story #393 because it is generic and extendable enough to cover this additional possibility to add arbitrary annotations.\r\n"},"comment":{"url":"https://api.github.com/repos/scenarioo/scenarioo/issues/comments/143751874","html_url":"https://github.com/scenarioo/scenarioo/issues/149#issuecomment-143751874","issue_url":"https://api.github.com/repos/scenarioo/scenarioo/issues/149","id":143751874,"user":{"login":"bruderol","id":755721,"avatar_url":"https://avatars.githubusercontent.com/u/755721?v=3","gravatar_id":"","url":"https://api.github.com/users/bruderol","html_url":"https://github.com/bruderol","followers_url":"https://api.github.com/users/bruderol/followers","following_url":"https://api.github.com/users/bruderol/following{/other_user}","gists_url":"https://api.github.com/users/bruderol/gists{/gist_id}","starred_url":"https://api.github.com/users/bruderol/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bruderol/subscriptions","organizations_url":"https://api.github.com/users/bruderol/orgs","repos_url":"https://api.github.com/users/bruderol/repos","events_url":"https://api.github.com/users/bruderol/events{/privacy}","received_events_url":"https://api.github.com/users/bruderol/received_events","type":"User","site_admin":false},"created_at":"2015-09-28T14:03:50Z","updated_at":"2015-09-28T14:03:50Z","body":"the constants are now refactored to be also in XML in upper case. \r\nfor ScreenAnnotationStyle: “CLICK”, “KEYBOARD”, “EXPECTED”, “NAVIGATE_TO_URL”, “ERROR”, “WARN”, “INFO”, “HIGHLIGHT”, “DEFAULT“\r\nfor ScreenAnnotationClickAction: “TO_NEXT_STEP”, “TO_URL”\r\n\r\n@tobiaszuercher please refactor this in your code and any example files."}}