title: Reference native UI elements in test with vue 3 & vue test utils without adding attributes to a UI element
body: <p>Question: <strong>How can you reference native UI elements in vue 3 and vue test utils without adding extra attributes to that UI element?</strong></p>
  <p>When testing vue components with <strong>vue 3</strong> and <strong>vue test utils</strong>, I noticed that there wasn't really an elegant way to find UI elements. Since Vue 3, Vue Test Utils do not provide a way to use the ref attribute anymore on a native UI element like a button for example.</p>
  <p>I know about these solutions:</p>
  <pre><code>&lt;button data-test=&quot;button&quot; &gt;&lt;/button&gt; or &lt;button class=&quot;button&quot;&gt; &lt;/button&gt;
  </code></pre>
  <p>But adding extra attributes or classes to the component just for the sake of testing the component doesn't feel like a solution. Also the error that the test throws is not very descriptive. For example when testing events  <code>Error: Cannot call trigger on an empty DOMWrapper.</code></p>