Add id's to elements to make automated testing easier
We use Selenium to automate our integration tests, in order to identify elements on the page we are currently having to rely on CSS selectors, but these are brittle and subject to change.
For example to automate the login process we can navigate a browser to:
https://portal.test.canterbury.ac.uk/campusm/home#select-profile
then to click a profile we were using
body > div.modal > div.modal-body > div > div > ul > li:nth-child(1) > a
to select the Student profile, but changing the order of elements breaks our tests and it seems that the underlying markup has also changed so now the Student profile is accessed by
body > div.modal > div.modal-body > div > div.listview > ul > li:nth-child(2) > a
This would be much easier if we could rely on key elements on a page having an ID attribute.
For example the student profile could have an ID profile-student , the developers profile profile-developers etc.