title: casperJS How select element(s) by specific starting text with querySelector or querySelectorAll
body: <p>I have to use casperJS to upload one file to a customer server, now before uploading I need to emulate a click on two specific links, these links (simple HTML anchors) don't have a name/id/class... (really ugly HTML code) so I have the only option to select it by it's text content.</p>
  
  <p>How can I find it using the <code>querySelector</code> or <code>querySelectorAll</code> methods?</p>
  
  <p>So far, I could come up with the following (unsuccessful attempts) :(</p>
  
  <pre><code>querySelector("a[text()='texttofind']");
  querySelector("a[text='texttofind']");
  querySelector("a[text=texttofind]");
  </code></pre>
  
  <p><strong>EDIT AFTER ALL SUGGESTION</strong> </p>
  
  <p><strong>TITLE UPDATED</strong>
  to be more specific about my problem that seem related only to casperjs</p>
  
  <p><strong>PLATFORM</strong>
  - Windows 7
  - CasperJS version 1.1.0-beta3
  - phantomjs version 1.9.7
  - Python 2.7</p>
  
  <p>so, probably i'm too dumb :( now i post a complete example that sadly don't work for me :( </p>
  
  <p><strong>HTML main index</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;TEST Main Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;frameset cols="100,100" &gt;
      &lt;frame name="menu_a" src="menu_1.html"&gt;
      &lt;frame name="menu_b" src="menu_2.html"&gt;
  &lt;/frameset&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>HTML menu_1.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;TEST Menu 1&lt;/title&gt;
  &lt;/head&gt;
  &lt;body style="background-color:red;"&gt;
  &lt;h3&gt;Menu 1&lt;/h3&gt;
  &lt;select onchange="javscript:alert('test')" id="test" size="1" name="systemID"&gt;
      &lt;option value="0"&gt;---&lt;/option&gt;
      &lt;option selected="selected" value="1"&gt;TestMenu1            &lt;/option&gt;
      &lt;option value="17"&gt;TestMenu2                               &lt;/option&gt;
  &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>HTML menu_2.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;TEST Menu 1&lt;/title&gt;
  &lt;/head&gt;
  &lt;body style="background-color:orange;"&gt;
  &lt;h3&gt;Menu 2&lt;/h3&gt;
   &lt;a href="javascript:alert('test')"&gt;&lt;b&gt;clickhere   &lt;/b&gt;&lt;/a&gt;
   &lt;a href="javascript:alert('noclickhere')"&gt;&lt;b&gt;NoClickHere   &lt;/b&gt;&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CasperJS script</strong></p>
  
  <p>start equal for all tests:</p>
  
  <pre><code>var casper = require('casper').create();
  
  casper.start(serverName, function(){});
  </code></pre>
  
  <p><strong>first test - clicklabel as suggested by @Ka0s</strong></p>
  
  <pre><code>casper.then(function(){
      this.withFrame('menu_b', function(){
          this.clickLabel('clickhere', 'a');
      });
  });
  </code></pre>
  
  <p>result:</p>
  
  <pre><code>CasperError: Cannot dispatch mousedown event on nonexistent selector: xpath selector: //a[text()="test"]
    /bin/casperjs/modules/casper.js:1355 in mouseEvent
    /bin/casperjs/modules/casper.js:462 in click
    /bin/casperjs/modules/casper.js:487 in clickLabel
    /test.js:90
    /bin/casperjs/modules/casper.js:1553 in runStep
    /bin/casperjs/modules/casper.js:399 in checkStep
  </code></pre>
  
  <p>this not work even if i cleanup the string removing blank spaces at the end of the clickhere string on my test code.</p>
  
  <p><strong>second test - xPath as sugggested by @ArtjomB</strong></p>
  
  <pre><code>casper.then(function(){
      this.withFrame('menu_b', function(){
      this.evaluate(function(){
       var element = __utils__.getElementByXPath("//a[starts-with(text(),'clickhere')]");
       console.log(element);
      });
   });
  });
  </code></pre>
  
  <p>result:</p>
  
  <pre><code>remote message caught: undefined
  </code></pre>
  
  <p>so i suppose that the xPath fail finding the element.</p>
  
  <p><strong>Third test - querySelectorAll with for loop as suggested by @Brunis</strong></p>
  
  <p>This is a strange beaviour, casperJS return the content of href instead the object
  this not seem an error on below code but a problem on my implementation or something else.</p>
  
  <pre><code>casper.then(function(){
      this.withFrame('menu_b', function(){
          this.evaluate(function(){
          var as = document.querySelectorAll("a");
          var match = "clickhere";
          var elems = [];     
          for (var i=0; i&lt;as.length; i++){
              if (as[i].textContent === match) {
                  elems.push(as[i]);
              }
          }
          console.log(elems[0]);
      });
   });
  });
  </code></pre>
  
  <p>Result:
   remote message caught: javascript:alert('test')</p>
  
  <p>i obtain the href code not the  object! if i try this example in a fiddle, i receive the object and i can call onclick() on it.</p>