{"action":"created","issue":{"url":"https://api.github.com/repos/webdriverio/webdriverio/issues/356","labels_url":"https://api.github.com/repos/webdriverio/webdriverio/issues/356/labels{/name}","comments_url":"https://api.github.com/repos/webdriverio/webdriverio/issues/356/comments","events_url":"https://api.github.com/repos/webdriverio/webdriverio/issues/356/events","html_url":"https://github.com/webdriverio/webdriverio/issues/356","id":49516847,"number":356,"title":"WebdriverIO and page object pattern","user":{"login":"thibaut-sticky","id":7137472,"avatar_url":"https://avatars.githubusercontent.com/u/7137472?v=3","gravatar_id":"","url":"https://api.github.com/users/thibaut-sticky","html_url":"https://github.com/thibaut-sticky","followers_url":"https://api.github.com/users/thibaut-sticky/followers","following_url":"https://api.github.com/users/thibaut-sticky/following{/other_user}","gists_url":"https://api.github.com/users/thibaut-sticky/gists{/gist_id}","starred_url":"https://api.github.com/users/thibaut-sticky/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thibaut-sticky/subscriptions","organizations_url":"https://api.github.com/users/thibaut-sticky/orgs","repos_url":"https://api.github.com/users/thibaut-sticky/repos","events_url":"https://api.github.com/users/thibaut-sticky/events{/privacy}","received_events_url":"https://api.github.com/users/thibaut-sticky/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/webdriverio/webdriverio/labels/Docs","name":"Docs","color":"ea5906"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/webdriverio/webdriverio/milestones/2","html_url":"https://github.com/webdriverio/webdriverio/milestones/Upcoming","labels_url":"https://api.github.com/repos/webdriverio/webdriverio/milestones/2/labels","id":1138980,"number":2,"title":"Upcoming","description":"Features or issues that are not blocked and reasonable to work on.","creator":{"login":"christian-bromann","id":731337,"avatar_url":"https://avatars.githubusercontent.com/u/731337?v=3","gravatar_id":"","url":"https://api.github.com/users/christian-bromann","html_url":"https://github.com/christian-bromann","followers_url":"https://api.github.com/users/christian-bromann/followers","following_url":"https://api.github.com/users/christian-bromann/following{/other_user}","gists_url":"https://api.github.com/users/christian-bromann/gists{/gist_id}","starred_url":"https://api.github.com/users/christian-bromann/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/christian-bromann/subscriptions","organizations_url":"https://api.github.com/users/christian-bromann/orgs","repos_url":"https://api.github.com/users/christian-bromann/repos","events_url":"https://api.github.com/users/christian-bromann/events{/privacy}","received_events_url":"https://api.github.com/users/christian-bromann/received_events","type":"User","site_admin":false},"open_issues":20,"closed_issues":16,"state":"open","created_at":"2015-05-29T00:45:55Z","updated_at":"2015-08-07T15:42:47Z","due_on":null,"closed_at":null},"comments":12,"created_at":"2014-11-20T09:18:49Z","updated_at":"2015-08-11T05:39:46Z","closed_at":null,"body":"Hi, \r\n\r\nIn the Java or protractor world, we can implement the [Page Object](https://code.google.com/p/selenium/wiki/PageObjects) pattern.\r\n\r\nWith protractor which use WebdriverJS, it looks like\r\n\r\n```Javascript\r\nvar LoginPage = function() {\r\n    this.userName = element(by.input('login.userName'));\r\n    this.password = element(by.input('login.password'));\r\n    this.loginButton = element(by.css('Button[ng-click^=\"login\"]'));\r\n    this.logoutButton = element(by.css('Button[ng-click^=\"logout\"]'));\r\n    this.registerButton = element(by.css('Button[ng-click^=\"register\"]'));\r\n    this.greeting = element(by.binding(\"Welcome, {{currentBrewer.FirstName}}\"));\r\n    this.gravatarImage = element(by.tagName('img'));\r\n};\r\n\r\nmodule.exports = new LoginPage();\r\n```\r\n\r\n```JS\r\nit('should allow a user to log in', function () {\r\n        loginPage.userName.sendKeys('test_user');\r\n        loginPage.password.sendKeys('abc123');\r\n        loginPage.loginButton.click();\r\n        browser.waitForAngular();\r\n        expect(loginPage.greeting.getText()).toContain('Welcome, Test User');\r\n    });\r\n```\r\n\r\nAs you can see, `element(by.css('Button[ng-click^=\"register\"]'));` returns an object on which we can send again a command with a new scope.\r\n\r\nIs it possible to have the same approach using WebdriverIO? This pattern could be really helpful.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/webdriverio/webdriverio/issues/comments/129711438","html_url":"https://github.com/webdriverio/webdriverio/issues/356#issuecomment-129711438","issue_url":"https://api.github.com/repos/webdriverio/webdriverio/issues/356","id":129711438,"user":{"login":"mmrko","id":1456748,"avatar_url":"https://avatars.githubusercontent.com/u/1456748?v=3","gravatar_id":"","url":"https://api.github.com/users/mmrko","html_url":"https://github.com/mmrko","followers_url":"https://api.github.com/users/mmrko/followers","following_url":"https://api.github.com/users/mmrko/following{/other_user}","gists_url":"https://api.github.com/users/mmrko/gists{/gist_id}","starred_url":"https://api.github.com/users/mmrko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mmrko/subscriptions","organizations_url":"https://api.github.com/users/mmrko/orgs","repos_url":"https://api.github.com/users/mmrko/repos","events_url":"https://api.github.com/users/mmrko/events{/privacy}","received_events_url":"https://api.github.com/users/mmrko/received_events","type":"User","site_admin":false},"created_at":"2015-08-11T05:39:46Z","updated_at":"2015-08-11T05:39:46Z","body":"+1"}}