如何使用 cypressjs 測試類星體組件？

Question

我使用 quasar 構建我的 webapp，我對使用 CypressJS 測試組件有疑問。

我在我的 webapp 上使用https://quasar.dev/vue-components/select#Example--Generating-multiple-values ，如下所示：

和組件代碼：

<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"
/>

例如，如果組件q-select包含任何值，我想為q-select編寫一個測試。

我的問題是，如何使用 CypressJS 編寫這樣的測試？

Answer 1

首先給你的q-select組件一個 id 屬性：

<q-select id="select"></q-select>

獲取帶有 id 的組件，單擊它並檢查包含所需選項的 span 元素，然后也單擊它。

cy.get("select").click()
cy.get("span").contains("LABEL_OF_OPTION").click()

不是很完美，但是是一種值得的方法。

Answer 2

這取決於目標，在這里我發布我的建議：

搜索輸入使用：

<q-select search-id-attr />

對話框列表項使用：

<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>