title: Ruby watir webdriver - how to click on a div link that is dynamically created
body: <p>I have a link in my web app that looks like this when inspected in developer tools -</p>
  
  <pre><code>&lt;div class="runnable-item alt" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}"&gt;&lt;!-- ngIf: item.working --&gt;Rep&lt;/div&gt;
  </code></pre>
  
  <p>I need to be able to click on it from within Ruby code using watir webdriver.
  I could click on buttons and edit fields so far successfully with code similar to:</p>
  
  <pre><code>browser.text_field(id: 'user').set 'test1'
  browser.button(id: 'submitBtn').click
  browser.a(id: 'start-process').click
  </code></pre>
  
  <p>Now how do I auto-click on a div element as shown above?</p>
  
  <p>Here is a more full HTML code -</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;!-- ngRepeat: list in lists --&gt;&lt;div ng-repeat="list in lists" class=""&gt;
  &lt;div class="col-sm-6"&gt;&lt;h4&gt;Services&lt;/h4&gt;
  &lt;!-- ngIf: list.items === undefined --&gt;
  &lt;!-- ngIf: list.message --&gt;&lt;!-- ngRepeat: item in list.items | orderBy:'name' track by item.id --&gt;
  &lt;div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""&gt;&lt;div class="runnable-item" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}"&gt;
  &lt;!-- ngIf: item.working --&gt;Excel Examples Main (Start here)&lt;/div&gt;&lt;/div&gt;
  &lt;!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id --&gt;
  &lt;div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""&gt;&lt;div class="runnable-item alt" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}"&gt;
  &lt;!-- ngIf: item.working --&gt;Excel Examples&lt;/div&gt;&lt;/div&gt;
  &lt;!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id --&gt;
  &lt;div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""&gt;&lt;div class="runnable-item" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}"&gt;&lt;!-- ngIf: item.working --&gt;Hello World&lt;/div&gt;&lt;/div&gt;
  &lt;!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id --&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;!-- end ngRepeat: list in lists --&gt;&lt;div ng-repeat="list in lists" class=""&gt;
  &lt;div class="col-sm-6"&gt;&lt;h4&gt;Processes&lt;/h4&gt;&lt;!-- ngIf: list.items === undefined --&gt;&lt;!-- ngIf: list.message --&gt;
  &lt;!-- ngRepeat: item in list.items | orderBy:'name' track by item.id --&gt;
  &lt;div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""&gt;&lt;div class="runnable-item" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}"&gt;
  &lt;!-- ngIf: item.working --&gt;CompletedExample&lt;/div&gt;&lt;/div&gt;
  &lt;!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id --&gt;
  &lt;div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""&gt;&lt;div class="runnable-item alt" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}"&gt;
  &lt;!-- ngIf: item.working --&gt;SimpleActiveExample&lt;/div&gt;&lt;/div&gt;
  &lt;!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id --&gt;
  &lt;div ng-repeat="item in list.items | orderBy:'name' track by item.id" class=""&gt;&lt;div class="runnable-item" ng-click="list.click(item)" ng-class="{'alt': $odd, 'disabled': item.working}"&gt;
  &lt;!-- ngIf: item.working --&gt;Standard HR&lt;/div&gt;&lt;/div&gt;
  &lt;!-- end ngRepeat: item in list.items | orderBy:'name' track by item.id --&gt;&lt;/div&gt;&lt;/div&gt;&lt;!-- end ngRepeat: list in lists --&gt;&lt;/div&gt;
  ...
  ...
  </code></pre>