[英]How to test quasar component with cypressjs?
I use quasar to build my webapp and I have question regarding testing components with CypressJS.我使用 quasar 构建我的 webapp,我对使用 CypressJS 测试组件有疑问。
I am using https://quasar.dev/vue-components/select#Example--Generating-multiple-values on my webapp and that looks as the following:我在我的 webapp 上使用https://quasar.dev/vue-components/select#Example--Generating-multiple-values ,如下所示:
and the component code:和组件代码:
<q-select
filled
label="Enter your interests"
new-value-mode="add-unique"
v-model="user_interests"
use-chips
multiple
option-value="id"
option-label="description"
input-debounce="0"
:options="interests_filtered"
@remove="interestRemoved"
@filter="filterInterests"
style="width: 400px"
/>
I would like to write a test for q-select
for instance, if the component q-select
contains any values.例如,如果组件q-select
包含任何值,我想为q-select
编写一个测试。
My question is, how to write such a test with CypressJS?我的问题是,如何使用 CypressJS 编写这样的测试?
Give your q-select
component an id attribute first:首先给你的q-select
组件一个 id 属性:
<q-select id="select"></q-select>
Get the component with the id, click it and check for span elements containing your desired option and click it as well.获取带有 id 的组件,单击它并检查包含所需选项的 span 元素,然后也单击它。
cy.get("select").click()
cy.get("span").contains("LABEL_OF_OPTION").click()
Not quite perfect, but is an approach worth.不是很完美,但是是一种值得的方法。
It depends on the targets, here I post my suggestion:这取决于目标,在这里我发布我的建议:
Search input use:搜索输入使用:
<q-select search-id-attr />
Dialog list items use:对话框列表项使用:
<q-select>
<template v-slot:option="scope">
<q-item search-select-attr v-bind="scope.itemsProps">
<q-item-section>
<q-item-label>{{scope.opt.yourProperty}}</q-item-label>
</q-item-section>
</q-item>
</template>
</q-select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.