Cypress: after clicking button page doesn't open

Question

I need to click search button which should open a new page with search result. But click() function of does not work. Cypress clicks the button, but there is nothing happens, the current page just refreshes and the search result page does not open.

here is my HTML structure in the DOM:

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

What I am really doing:

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

I tried many ways, with {force:true} and without, and these also: .trigger('click'), .invoke('click'), .trigger('mouseover').click({force:true})

It unfortunately does not work.

By the way other buttons work fine, only the search button has this issue, and I think this issue related to type="submit" of the Vue.js component. But manually everything works fine in any browser. Here is the submitForm() itself:

<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;
      }
    },

If you suggest plugin for Cypress like cypress-real-events, it is unfortunately does not support Firefox browser, so I cannot use that.

Can you provide any suggestion?

Answer 1

Nothing worked, so I contacted our developers and they finally found another solution for the Search form. Now it works fine in Cypress. Thanks to all of you!