如何为Quasar输入验证错误消息分配ID?

huangapple go评论73阅读模式
英文:

How to assign id to quasar input validation error message?

问题

我想要使用Selenium测试来检查我的q-input下是否出现错误消息,为此我需要它有一个id,这样我就可以找到该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>

这个部分看起来是这样的:
如何为Quasar输入验证错误消息分配ID?

我想要的只是在具有role="alert"的这个div上添加一个id,以便能够获取其文本并进行断言。

有办法做到这一点吗?

英文:

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:

 &lt;q-input v-model=&quot;emailInput&quot; 
      :rules=&quot;[(val) =&gt; validateEmail(val) || &#39;Val&#243;s email c&#237;met adj meg.&#39;]&quot;
      for=&quot;username&quot; label=&quot;Email&quot; square type=&quot;email&quot;&gt;  
 &lt;/q-input&gt;

This looks like this then:
如何为Quasar输入验证错误消息分配ID?

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?

答案1

得分: 1

&lt;div id=&quot;q-app&quot; style=&quot;min-height: 100vh&quot;&gt;
  &lt;div class=&quot;q-pa-md&quot; style=&quot;max-width: 300px&quot;&gt;
    &lt;q-input
      ref=&quot;inputRef&quot;
      v-model=&quot;model&quot;
      filled
      label=&quot;在此输入&quot;
      hint=&quot;最多3个字符&quot;
      bottom-slots
      :error=&quot;!isValid&quot;
    &gt;
      &lt;template #error&gt;
        &lt;div id=&quot;error-alert&quot;&gt;自定义错误消息&lt;/div&gt;
      &lt;/template&gt;
    &lt;/q-input&gt;
  &lt;/div&gt;
&lt;/div&gt;
英文:

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

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

如何为Quasar输入验证错误消息分配ID?

codepen example

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

huangapple
  • 本文由 发表于 2023年5月11日 03:06:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76221817.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定