离子搜索栏搜索不适用于赛普拉斯 {enter}

Question

我有一个 Ionic 6 应用程序，我正在使用 cypress 9.3.1 对其进行测试。

在我的应用程序中，我使用了这样的离子搜索栏：

<ion-searchbar *ngIf="showSearchbar" [value]="search" (search)="searchQuestions($event)"
                     placeholder="{{'components.search.placeholder' | translate}}">

searchQuestions 方法如下所示：

  public searchQuestions(event): void {
    console.log('test');
    this.triggerSearch.emit(event.target.value);
  }

当我手动测试它时一切正常，但是当我像这样执行 cypress 代码时：

cy.get('.searchbar-input')
    .type('test1' + '{leftArrow}{del}{enter}' + 'test');

输入字段填充了 testtest，因此 {leftArrow}{del} 有效，但 searchQuestions 中的 console.log 未执行且事件未发出

编辑：当我使用 (keyup.enter)="searchQuestions($event)" 而不是 (search)="searchQuestions($event)" 时，它似乎工作正常。但我想替换它对本机应用程序来说会有问题，同时保留两者可能会导致问题。

Answer 1

应用程序或 Ionic 框架正在添加事件处理程序来触发 search 事件，但 Cypress 不知道。

在 .type() 命令中，它仅发出键盘事件，这就是 (keyup.enter)="searchQuestions($event)" 触发但 (search)="searchQuestions($event)" 不触发的原因。

首先要尝试的是

cy.get('.searchbar-input')
  .type('test1' + '{leftArrow}{del}{enter}' + 'test')
  .trigger('search')

也尝试触发其他事件，例如 .trigger('change') 和 .trigger('input')。

可能导致它的另一件事是输入字符串中间的 {enter}。

试试 .type('test1' + '{leftArrow}{del}' + 'test' + '{enter}') - 这似乎更像是用户会使用的模式。

离子搜索栏搜索不适用于赛普拉斯 {enter}

Ionic searchbar search not working on cypress {enter}

ionic-framework

cypress