{"action":"closed","issue":{"url":"https://api.github.com/repos/syndesisio/syndesis-ui/issues/663","repository_url":"https://api.github.com/repos/syndesisio/syndesis-ui","labels_url":"https://api.github.com/repos/syndesisio/syndesis-ui/issues/663/labels{/name}","comments_url":"https://api.github.com/repos/syndesisio/syndesis-ui/issues/663/comments","events_url":"https://api.github.com/repos/syndesisio/syndesis-ui/issues/663/events","html_url":"https://github.com/syndesisio/syndesis-ui/issues/663","id":245710731,"number":663,"title":"Discuss guidelines for css selectors in ui","user":{"login":"jludvice","id":8707241,"avatar_url":"https://avatars1.githubusercontent.com/u/8707241?v=4","gravatar_id":"","url":"https://api.github.com/users/jludvice","html_url":"https://github.com/jludvice","followers_url":"https://api.github.com/users/jludvice/followers","following_url":"https://api.github.com/users/jludvice/following{/other_user}","gists_url":"https://api.github.com/users/jludvice/gists{/gist_id}","starred_url":"https://api.github.com/users/jludvice/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jludvice/subscriptions","organizations_url":"https://api.github.com/users/jludvice/orgs","repos_url":"https://api.github.com/users/jludvice/repos","events_url":"https://api.github.com/users/jludvice/events{/privacy}","received_events_url":"https://api.github.com/users/jludvice/received_events","type":"User","site_admin":false},"labels":[{"id":406478943,"url":"https://api.github.com/repos/syndesisio/syndesis-ui/labels/question","name":"question","color":"cccccc","default":true},{"id":555355422,"url":"https://api.github.com/repos/syndesisio/syndesis-ui/labels/testing%20&%20qe","name":"testing & qe","color":"fbca04","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-07-26T12:47:37Z","updated_at":"2017-08-23T13:11:58Z","closed_at":"2017-08-23T13:11:58Z","body":"Hi @gashcrumb  @kahboom  (CC @dsimansk  @lvydra )\n\nWe have several places in syndesis-ui where it's tricky to write proper selectors in e2e tests.\nMostly because it's deep tree of nested `div` elements and we have to select elements based on text content of some nested `h2` or `p` element.\n\n## List items (connection list, integration step...)\n\nIt's little bit easier on connections list page.\nHere the elements have `title` and we could write something like `$('div[title=\"Some Twitter Connection\"]')`\nThere was brief discussion in comments of https://github.com/syndesisio/syndesis-ui/issues/546\n\nSo far our preferred solution would be to have angular component for collection items.\nWould it be benefitial also for you @kahboom @gashcrumb  to create angular components for collection items like this?\n\n* `integration` where I could write CSS selector `$('integration[title=\"My awesome integration\"]')\n* `integration-step` where I could write `$('integration-step[title=\"Data Mapper\"]')\n\nIn cases where we don't wont (or can't do right now) introduce angular componnet,\nthe approach with nested div elements -> can we at least \n* add the `title` or similar to be able to lookup given item from list\n* add meaningful css class to filter out proper element I want to click on\nExamples of selectors\n* for integration in integrations list: `$('div.integration[title=\"My sample integration\"])`\n* for integration step `$('div.integration-step[title=\"Data Mapper\"]')`\n\nOne option which might be easy to use for us is to use IDs on elements.\nI didn't focus in this option because I thought it would be more complicated for you to always come up with unique id for list items.\n\n\n## Forms (create connection / access tokens...)\nWe didn't have any issues with automated form filling afaik.\nThe selector used to lookup input fields looks like this: `$('input[name=\"accessToken\"]')` and it looks pretty straightforward. Do you agree?\n\n"}}
{"actor":{"display_login":"gashcrumb"}}