cypress 中 .click() 函数的行为不一致

Question

我有一个编辑框想要单击然后输入值。

所以，我的代码是

cy.get('.ag-row-last > [aria-colindex="3"] ').click().type('65{enter}')

问题是 50% 的时候，它可以打开如下图所示的编辑框，然后我可以输入值

不过，50%的时间。我失败了。它无法打开它，如下图所示

因此，它给了我这个错误

cy.type() 失败，因为它需要有效的可输入元素。

输入的元素是：

<div class="ag-cell ag-cell-not-inline-editing ag-cell-normal-height is-editable 
   ccr-cell-with-icon ccr-numeric-input right-border 
   ag-right-aligned-cell ag-cell-focus ag-cell-value" 
   unselectable="on" tabindex="-1" aria-colindex="3" 
   role="gridcell" col-id="weight" style="left: 562.5px; width: 120px;">
</div>

可输入的元素与以下选择器之一匹配......

我理解此错误是因为编辑框已关闭而找不到输入。

我怎样才能摆脱这个不一致的问题？

Answer 1

.click()一般来说，不一致的行为可以通过在操作（即命令和命令）之间添加“防护”检查来修复.type()。

例如，查看类，单击后ag-cell-not-inline-editing会更改为，因此您可以尝试ag-cell-inline-editing

cy.get('.ag-row-last > [aria-colindex="3"] ')
  .should('have.class', 'ag-cell-not-inline-editing')
  .click()
  .should('have.class', 'ag-cell-inline-editing')      // wait for cell state change
  .type('65{enter}')

单击后还有其他更改，例如以下 HTML 块添加到网格单元格中

<div class="ag-cell-edit-wrapper">
  <!--AG-INPUT-TEXT-FIELD-->
  <div
    role="presentation"
    class="ag-cell-editor ag-labeled ag-label-align-left ag-text-field ag-input-field"
    ref="eInput"
  >
    <div
      ref="eLabel"
      class="ag-input-field-label ag-label ag-hidden ag-text-field-label"
      aria-hidden="true"
      role="presentation"
    ></div>
    <div
      ref="eWrapper"
      class="ag-wrapper ag-input-wrapper ag-text-field-input-wrapper"
      role="presentation"
    >
      <input
        ref="eInput"
        class="ag-input-field-input ag-text-field-input"
        type="text"
        id="ag-895-input"
        aria-label="Input Editor"
      />
    </div>
  </div>
</div>

所以你可以在测试中使用它

cy.get('.ag-row-last > [aria-colindex="3"] ')
  .should('have.class', 'ag-cell-not-inline-editing')
  .click()
  .find('input.ag-input-field-input')               // waits for the input to appear
  .type('65{enter}')