Assigning ID to all elements of a page in angular automatically

Question

We are working on an enterprise web application, at the moment we hired an e2e test engineer to perform automation tests.

He asked us to assign IDs to every single element in pages. Is there a tool or something to perform this action automatically and adds some random IDs to all elements in HTML files ? we already have a bunch of files and it would take much time to add them manually.

According to the following question, A selector like body div:nth-of-type(4) ul li:nth-child(5) a to check a certain link is not only obviously ugly, but also prone to changes in the markup. A small change could break half of your testsuite. Adding ID attribute to all HTML elements of a web application?

We are using: Angular v6 / Material v2 / Protractor / Jasmine

Answer 1

We have been working on a React project for which we are doing e2e testing using 'Mocha-Nightwatch'. As a UI automation tester I needed something to access the elements, there were following options for me:

1) Using the "CSS selector", which is ugly and long as you mentioned.

2) Using The "X-path" of the element, which is again long and much more confusing

3) The best of all the "Id's" for elements [because they are unique throughout the app]. But the problem was when we gave id an element, React web pack will append a alphas numeric string to the id each time you build the application,making a unique id every time. So again id's failed in this scenerio.

4) The thing which we settled for was "Classes" for the elements which we wanted to access in testing.

As far is going the id or classnames is concerned, there is no shortcut in doing it. You need to give meaningful names for the id/classnames, some tool [which may or may not exist] will add some random id to all the elements which is not at all needed, and just increases the space complexity of your application.

The better solution is take up module by module and add class or id's[id they are not made dynamic by Webpack in you case] names by yourself.

The approach we used was we taught the automation tested how to add class names or id's, and how to inspect in the chrome dev tools, if the id's/classes really exist or not. But the limitaion of this is, the tester may add some classes or id which may conflict with your functionality. to solve this you can use a proper naming convention, for e.g. we use .test-something-something or #test-something-somethig as our convention for naming the test id's and classes.

Here is a sample from your selectors file:

  usernameInput: '.test--auth-username > input',
  passwordInput: '.test--auth-password > input',
  loginButton: '.test--auth-submit > button',
  loginError: '.test--auth-error',
  inputError: '.test--inputField-errorText',

Hope this helps, Cheers