End-to-end UI tests for a collaborative web app?

We have a collaborative web app where actions taken in User A's browser will have side effects in User B's browser. A chat room is part of the app, and a good example of what we're trying to test.

Our current stack is:

  • AngularJS on the front end
  • Express running on Node to serve up static files
  • Socket.IO running on Node to process web socket communications between client browsers
  • Brunch for our build process
  • Angular Seed is the starting point for our tests
  • Jasmine for the actual test framework
  • Testacular runs the tests

What's the best way to go about testing this? And by "best" I mean "any". The full integration test requires 2 browsers and 2 web servers (HTML and web socket). Both web servers are running on Node so at least it's in the same environment as the rest of Testacular.

In my mind it's going to require

  1. Starting an instance of our socket server
  2. Starting a web browser in Jasmine, and keeping a reference to that Browser A
  3. Start another browser, Browser B, and hold that reference.
  4. Issue commands to Browser A and test the resulting changes in Browser B.

Has anyone come across documentation or examples (preferably in Testacular with Jasmine, but we're open to options) of this sort of testing? Even advice on what search terms to use could be helpful.

I am not sure whether my advice will help you but anyway.

The first tool that comes to my mind would be Selenium. The good news (based on stack you are currently using) is that you can use JavaScript for writing test. Here is an example which searches for the term “Cheese” on Google and then outputs the result page’s title to the console:

var driver = new webdriver.Builder().build();
driver.get('http://www.google.com');

var element = driver.findElement(webdriver.By.name('q'));
element.sendKeys('Cheese!');
element.submit();

driver.getTitle().then(function(title) {
  console.log('Page title is: ' + title);
});

driver.wait(function() {
  return driver.getTitle().then(function(title) {
    return title.toLowerCase().lastIndexOf('cheese!', 0) === 0;
  });
}, 3000);

driver.getTitle().then(function(title) {
  console.log('Page title is: ' + title);
});

driver.quit();

I think that with Selenium 2 there is possibility to 'open' more instances of browser - that would mean you will be able to test side effects / interaction among them.

As alternative you could also take a look at WindMill project, UItest.js or commercial product Twist that uses Selenium or (also mentioned by Spudley) Sahi as a driver for tests.