While the Notes application displays well in the browser, how do we write test software to distinguish one page from another?  The key requirement is for test scripts to inspect the page, determine which page is being displayed, and read the data on the page. That means each HTML element must be easily addressable using a CSS selector. 

While developing the Notes application, we forgot to do that, and the Software Quality Engineering (SQE) manager has requested our assistance. At stake is the testing budget, which will be stretched further the more the SQE team can automate their tests.

All that's necessary is to add a few id or class attributes to HTML elements to improve testability. With a few identifiers, and a commitment to maintain those identifiers, the SQE team can write repeatable test scripts to validate the application.

In notes/partials/header.hbs, change these lines:

...
<a id="btnGoHome" class="navbar-brand" href='/'>
...
{{#if user}}
...
<a class="nav-item nav-link btn btn-dark col-auto" id="btnLogout" href="/users/logout">...</a>
<a class="nav-item nav-link btn btn-dark col-auto" id="btnAddNote" href='/notes/add'>...</a>
{{else}}
...
<a class="nav-item nav-link btn btn-dark col-auto" id="btnloginlocal" href="/users/login">..</a>
<a class="nav-item nav-link btn btn-dark col-auto" 
                        id="btnLoginTwitter" href="/users/auth/twitter">...</a>
...
{{/if}}
...

In notes/views/index.hbs, make these changes:

<div id="notesHomePage" class="container-fluid">
  <div class="row">
    <div id="notetitles" class="col-12 btn-group-vertical" role="group">
      {{#each notelist}}
      <a id="{{key}}" class="btn btn-lg btn-block btn-outline-dark" 
          href="/notes/view?key={{ key }}">...</a>
      {{/each}}
    </div>
  </div>
</div>

In notes/views/login.hbs, make these changes:

<div id="notesLoginPage" class="container-fluid">
...
<form id="notesLoginForm" method='POST' action='/users/login'> 
...
<button type="submit" id="formLoginBtn" class="btn btn-default">Submit</button> 
</form>
...
</div>

In notes/views/notedestroy.hbs, make these changes:

<form id="formDestroyNote" method='POST' action='/notes/destroy/confirm'>
...
<button id="btnConfirmDeleteNote" type="submit" value='DELETE' 
                class="btn btn-outline-dark">DELETE</button>
...
</form>

In notes/views/noteedit.hbs, make these changes:

<form id="formAddEditNote" method='POST' action='/notes/save'>
...
<button id='btnSave' type="submit" class="btn btn-default">Submit</button>
...
</form>

In notes/views/noteview.hbs, make these changes:

<div id="noteView" class="container-fluid">
...
<p id="showKey">Key: {{ notekey }}</p>
...
<a id="btnDestroyNote" class="btn btn-outline-dark" 
     href="/notes/destroy?key={{notekey}}" role="button"> ...  </a>
<a id="btnEditNote" class="btn btn-outline-dark" 
     href="/notes/edit?key={{notekey}}" role="button"> ... </a>
<button id="btnComment" type="button" class="btn btn-outline-dark" 
     data-toggle="modal" data-target="#notes-comment-modal"> ... </button> 
...
</div>

What we've done is add id= attributes to selected elements in the templates. We can now easily write CSS selectors to address any element. The engineering team can also start using these selectors in UI code.