I'm trying to do some e2e tests using CucumberJS and ProtractorJS for a website. However my code is becoming a mess. The same code is in different places: in the World object, the Before and After hooks file and the steps definitions file. The different files don't seem to have a well defined use: I'm just extending them putting some reusable parts in the World object. (E.g. I put the Login in the World object, however I also have an before hook that does login). The World and step files are also becoming quite large. Another difficulty I come across is that some updates on the site happen asynchronously. All of this makes it hard to reason about the general flow of the test and hard to debug. My question: what are some possible architectures of the code of e2e tests using Cucumber.
Update:
The project has been enlarged. I have to test flows through multiple sites. Two front ends and one back end site. Users can submit on one of both frontend sites various types of information. This has to be checked by the site administrators on the backend, and then it should appear on one of both frontend sites. I should also check mails being sent when a user submits information and when an admin accepts/edits the information. To me it seems that is the easiest using a web mail account and using ProtractorJS for checking this? Furthermore I have the constraint that the tests should be in a certain time frame. Therefore I don't log in/log out the background conditions of every test (depending on the scenario) and don't refresh the page for every scenario anymore (extra difficulty the two frontends use the same login).
Are there any examples/patterns of how I should do this?
How I did this was starting using the Page Object pattern. But some logic like logging in is different for every site, so I put them some logic in separate objects. Also I have a Cached Page Object next to the Page Object. The first delegates to the last, but only if the url or login state has changed.
I recommend you read the Page Object pattern very well described by Martin Fowler here http://martinfowler.com/bliki/PageObject.html You can also find a lot of information searching the web about this pattern.
For common functions that you use in many places you could create a file that contains them or many files that expose functions with common responsabilities.
That way you can keep your architecture consistent and use the SRP correctly.