How to assign id to quasar input validation error message?

Question

I want to check with Selenium test if the error message appears under my q-input or not, for this I would need it to have an id, so I can find the Webelement:

 <q-input v-model="emailInput" 
      :rules="[(val) => validateEmail(val) || 'Valós email címet adj meg.']"
      for="username" label="Email" square type="email">  
 </q-input>

This looks like this then:

All I want is to add an id somehow to this div that has role="alert" to be able to get it text and assert.

Is there a way to do this?

Answer 1

You could add a slot for error messages to the q-input and add id to your own custom alert element

<div id="q-app" style="min-height: 100vh">
  <div class="q-pa-md" style="max-width: 300px">
    <q-input
      ref="inputRef"
      v-model="model"
      filled
      label="Type here"
      hint="Max 3 characters"
      bottom-slots
      :error="!isValid"
    >
      <template #error>
        <div id="error-alert">custom error message</div>
      </template>
    </q-input>
  </div>
</div>

codepen example

Alternatively, you could select the q-input by id and then xpath to the child alert element.