时间戳

首页 > 解决方案 > 如何用 cypressjs 测试 quasar 组件？

javascript - 如何用 cypressjs 测试 quasar 组件？

问题描述

我使用 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 编写这样的测试？

标签： javascriptvuejs2cypressquasar-framework

解决方案

首先给你的q-select组件一个 id 属性：

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

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

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

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

推荐阅读