3

I'm interested in how to develop Web-GUIs using test-driven-development.

Especially I'd like to know if there are any guidelines/hints/best-practises on how to design Web-Frontends (i.e. the HTML) in order to be (automatically, of course...) testable? (in classical UI-developement there are patterns such as MVVC which support TDD and automated testing)

MartinStettner
  • 28,719
  • 15
  • 79
  • 106
  • What are you trying to test? That the HTML is laid out correctly? Or are you just looking for a pattern of web development that separates concerns like MVVM? – Davin Tryon Mar 09 '12 at 08:13
  • More or less the latter: I'd like to run automated UI tests against the web frontent. Especially I don't want to need to redefine the tests when layout changes. I think for this, a clear separation of content/layout with HTML/CSS would be the first choice. But I'm curious if there any other things to consider or if there are any tutorials on TDD with Web-Frontends. – MartinStettner Mar 10 '12 at 09:47

2 Answers2

1

I don't know of any specific guidelines, but writing clean, semantic HTML and making appropriate use of CSS class and IDs is normally sufficient.

Andy Waite
  • 10,785
  • 4
  • 33
  • 47
1

The are very similar patterns for web development as there are in desktop development. But, and it is a big one, the web is stateless. This sounds obvious but I think it clearly defines the boundaries for testing.

There are many, many popular incarnations of MVC for the web. However, in some web technologies it is hard to separate out pure UI (HTML, CSS etc) from code. You can always fall back on more of an MVP approach, which is like MVVM except the view is passive (won't respond to events and rebind). These patterns should cover you for the main UI logic of the application. All of these patterns can be used with TDD.

If you want to then go up a level, you are into tools like Selenium. These tools allow record/playback of user interactions with the web ui. However, if used casually, they can lead to brittle tests that break when the layout changes.

Hope this helps.

Davin Tryon
  • 66,517
  • 15
  • 143
  • 132