title: How to find a element based on text several tags deep in Selenium
body: <p>All, I,m very new to Selenium and programming in general. I'm stuck on automating a site. I'm needing some help on how I can find and click on a element based on the text several tags into the html code.  </p>
  
  <p>I'm looking for the element that has the text <code>TEXT DISPLAYED IN BROWSER</code> in the following HTML code. I can locate the element if I use "find element by id" on
  <code>&lt;div id="appt-24175027" class="grid-row pointer"&gt;</code>, but the problem is the ID <code>appt-24175027</code> changes dynamically.</p>
  
  <p>In the HTML code I am looking for the following...  </p>
  
  <pre><code>1st ELEMENT/TEXT DISPLAYED IN BROWSER
  2nd ELEMENT / TEXT DISPLAYED IN BROWSER
  3rd ELEMENT / Text DISPLAYED IN BROWSER
  </code></pre>
  
  <p>Can someone point me in the right direction?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  &lt;script type="text/javascript"&gt;
  &lt;div id="content" class="content"&gt;
  &lt;div class="grid-container started"&gt;
  &lt;div id="started-block" class="grid-header pointer"&gt;
  &lt;div class="grid-header-icon"&gt;
  &lt;div class="icon-started"&gt;
  &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="appt-24175027" class="grid-row pointer"&gt;
  &lt;div class="cell cell-content"&gt;
  &lt;div class="main-field"&gt;
  &lt;span style="color:#000000"&gt;TASK ACTIVE&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="grid-container pending expanded"&gt;
  &lt;div id="pending-block" class="grid-header pointer"&gt;
  &lt;div class="grid-expander"&gt;
  &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="grid-header-icon"&gt;
  &lt;div class="icon-pending"&gt;
  &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="grid-header-title"&gt;Pending (5)&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="pending-grid" class="grid-body"&gt;
  &lt;div id="appt-24181299" class="grid-row pointer"&gt;
  &lt;div class="cell appt-color" style="border-top: 1px solid rgb(255, 244,          0);border-right: 1px solid rgb(204, 177, 0); background: #FFDE00;"&gt;&lt;/div&gt;
  &lt;div class="cell cell-content"&gt;
  &lt;div class="main-field"&gt;
  &lt;span style="color:#000000"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="appt-24180104" class="grid-row pointer"&gt;
  &lt;div class="cell appt-color" style="border-top: 1px solid rgb(255, 244,   0);border-right: 1px solid rgb(204, 177, 0); background: #FFDE00;"&gt;&lt;/div&gt;
  &lt;div class="cell cell-content"&gt;
  &lt;div class="main-field"&gt;
  &lt;span style="color:#000000"&gt; 1st ELEMENT/TEXT DISPLAYED IN BROWSER&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="appt-24175024" class="grid-row pointer"&gt;
  &lt;div class="cell appt-color" style="border-top: 1px solid rgb(255, 224,     168);border-right: 1px solid rgb(204, 163, 122); background: #FFCC99;"&gt;&lt;/div&gt;
  &lt;div class="cell cell-content"&gt;
  &lt;div class="main-field"&gt;
  &lt;span style="color:#000000"&gt; 2nd ELEMENT / TEXT DISPLAYED IN BROWSER&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="appt-24175025" class="grid-row pointer"&gt;
  &lt;div class="cell appt-color" style="border-top: 1px solid rgb(255, 224, 168);border-right: 1px solid rgb(204, 163, 122); background: #FFCC99;"&gt;&lt;/div&gt;
  &lt;div class="cell cell-content"&gt;
  &lt;div class="main-field"&gt;
  &lt;span style="color:#000000"&gt;3rd ELEMENT / Text DISPLAYED IN BROWSER&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="appt-24175026" class="grid-row pointer"&gt;
  &lt;/div&gt;
  </code></pre>