Cypress：单击按钮后页面无法打开

Question

我需要单击搜索按钮，该按钮应该打开一个包含搜索结果的新页面。但 click() 函数不起作用。 Cypress 点击按钮，但没有任何反应，当前页面只是刷新，搜索结果页面没有打开。

这是我在 DOM 中的 HTML 结构：

<groupui-button type="submit" icon-only="" variant="tertiary" size="s" icon="search-24" title="Search" role="button" icon-position="left" target="self" class="hydrated"></groupui-button>

我真正在做什么：

cy.get('groupui-button[icon="search-24"]').click({force:true})

我尝试了很多方法，有

{force:true}

和没有，还有这些：

.trigger('click')

、

.invoke('click')

、

.trigger('mouseover').click({force:true})

不幸的是它不起作用。

顺便说一句，其他按钮工作正常，只有搜索按钮有这个问题，我认为这个问题与

Vue.js

组件的 type="submit" 有关。但手动一切都可以在任何浏览器中正常工作。 这是submitForm()本身：

<groupui-button
        type="submit"
        icon-only="true"
        variant="tertiary"
        size="s"
        icon="search-24"
        @click="submitForm()"
        :title="$t('dnc.search.title')"
      ></groupui-button>

submitForm() {
      if (this.hasInput) {
        this.actionUrl =
          this.searchUrl +
          this.advSearch +
          "?elpmSearchString=" +
          this.searchInput;
      } else {
        this.actionUrl = this.searchUrl + this.advSearch;
      }
    },

如果你建议像cypress-real-events这样的Cypress插件，不幸的是它不支持Firefox浏览器，所以我不能使用它。

你能提供什么建议吗？

Answer 1

在单击搜索按钮之前，请确保您的表单没有重新加载或执行任何操作。我遇到了类似的问题，除非我等待一两秒加载表单，否则我无法单击复选框。我正在使用 Angular，还没有找到更好的方法来使用 Cypress 等待可观察值等，所以我使用了一个简单的

cy.wait(1000)

。