title: How do I page.click an ember.js computed element?
body: <p>I have an ember.js front end app that I'm trying to create an E2E test using cucumber.js / puppeteer.  I'm using html data- properties for selectors.  I'm having a problem when I have a computed element:</p>
  
  <pre><code>&lt;p class="ao-label" data-test-upload1="true"&gt;Drag and Drop Files or 
      {{#file-upload 
          name="transactions"
          class="ao-file-uploader__file"
          multiple=false
          onfileadd=(action "validateFile")
          accept=allowFileTypeString 
          data-test-upload2="true"
      }}
  &lt;a class="ao-button ao-button--link" data-test-upload3="true"&gt;Click to Browse&lt;/a&gt;
  </code></pre>
  
  <p>and I attempt to <code>page.click</code> it:</p>
  
  <pre><code>async selectLinkToImportPaymentFile() {
      await this.page.click('[test-selector-upload1="true"]');
  }
  </code></pre>
  
  <p>I get the following error: </p>
  
  <blockquote>
    <p>Error: No node found for selector: [test-selector-upload1="true"]</p>
  </blockquote>
  
  <p>I tried <code>test-selector-upload1</code>, <code>test-selector-upload2</code>, and <code>test-selector-upload3</code>.  </p>
  
  <p>I can do it on other elements, such as this one (I can <code>page.click</code>):</p>
  
  <pre><code>&lt;button class="ao-login__button" data-test-selector="buttonSignIn" type="submit"&gt;
      Sign in
  &lt;/button&gt;
  </code></pre>
  
  <p>Can someone please give me some guidance?</p>