如何用cypressjs测试quasar组件？

Question

我使用 quasar 来构建我的 web 应用程序，并且我对使用 CypressJS 测试组件有疑问。

我在我的 web 应用程序上使用 https://quasar.dev/vue-components/select#Example--Generate-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

我在 cypress Commands.js 中添加了一个命令：

Cypress.Commands.add('quasarSelect', (select, optionToSelect) => {
  // Quasar doesn't render normal html select so we have to do a round about way to get at it
  cy.get(select)
    .click({ force: true })
  cy.wait(100) // '.q-item__label' takes a little bit of time to load
  cy.get('.q-item__label')
    .each(($el) => {
      cy.wrap($el).invoke('text').then((text) => {
        if (text.trim() === optionToSelect) {
          cy.wrap($el).click({ force: true })
        }
      })
    })
})

从规范中调用它：

cy.quasarSelect('[data-cy="activity-type-select"]', 'Activity')

Answer 2

首先给你的

q-select

组件一个 id 属性：

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

获取具有 id 的组件，单击它并检查包含所需选项的 span 元素，然后单击它。

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

虽然不是很完美，但是是一种值得的方法。

Answer 3

这取决于目标，在这里我发表我的建议：

搜索输入使用：

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