What DOM element to specify with a Directive? - node.js

Question

I'm using Soda (node.js) w/ Selenium RC to automate browser testing.
If I have an AngularJS directive -> say a button that has a spinner -> and it appears multiple times on a page, how can I make sure to click on that particular button...when it has no DOM ID or unique class? In my case, "Login" and "Some Other Button" are dynamic and would be unique for all buttons in the ng-view.
<my-requesting-button text="Login" class="ng-isolate-scope ng-scope">
<button type="submit" class="btn btn-large">
<img src="/img/progress.gif" style="display: none;">
<span>Login</span>
</button>
</requesting-button>
<my-requesting-button text="Some Other Button" class="ng-isolate-scope ng-scope">
<button type="submit" class="btn btn-large">
<img src="/img/progress.gif" style="display: none;">
<span>Some Other Button</span>
</button>
</requesting-button>
Soda (basically directly from the example):
browser
.chain
.session()
.open('/')
.clickAndWait('...LOGIN BUTTON REF?')
.waitForPageToLoad(2 * 1000)
.clickAndWait('...SOMEOTHER BUTTON REF?')
.waitForPageToLoad(2 * 1000)

Answer 1

You can give it a unique ID/class name. If you know this element will only ever be on the page once, you can give it a unique ID. If not, you can give it a class name so that Selenium can find just the first one, or the one near your login form.
To do this, you can either pass the text value (e.g. "Login") to your button so that it has it:
<button class="{{text}}Button">
or you can tell Selenium to find the button that comes right after the element whose text attribute is "Login".