Блог

Я должен ввести значение во входные данные, которые отображаются в DOM только при двойном щелчке мыши. Тем не менее, я пытался дважды щелкнуть, щелкнуть и ввести ввод, в большинстве случаев это не удается (кажется, что он дважды щелкает, но затем выходит из него вместо того, чтобы оставаться в состоянии изображения № 2, поэтому ввод отсутствует, и я не могу ввести это новое значение.

Перед двойным щелчком

 <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="4" comp-id="331" col-id="averageRate" class="ag-cell ag-cell-auto-height ag-right-aligned-cell ag-cell-value ag-cell-focus ag-cell-not-inline-editing" style="width: 168px; left: 504px;">
   <msc-basic-cell-renderer _nghost-mnn-c205="">
     <div _ngcontent-mnn-c205="" class="cell-renderer-wrapper">
       <span _ngcontent-mnn-c205=""> 0.799387 </span>
       <!----><!----><!---->
     </div>
  </msc-basic-cell-renderer>
</div>
 

После двойного щелчка вручную (или нажатия клавиши ввод)

 <div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="4" comp-id="331" col-id="averageRate" class="ag-cell ag-cell-auto-height ag-right-aligned-cell ag-cell-value ag-cell-focus ag-column-hover ag-cell-inline-editing" style="width: 168px; left: 504px;">
   <msc-numeric-input _nghost-mnn-c217="">
       <div _ngcontent-mnn-c217="" class="numeric-cell msc-h100 w-100 ng-touched ng-pristine ng-valid">
          <input _ngcontent-mnn-c217="" type="number" placeholder="Value" class="numeric-input msc-h100 w-100 ng-touched ng-pristine ng-valid focus-visible" data-focus-visible-added="">
       </div><!----> 
    </msc-numeric-input>
</div>
 

До

После

Вот код, который работает большую часть времени. Мне пришлось добавить жестко закодированные ожидания и обойти правила компоновки:

 cy.wait(5000);

cy.get(`.mfc-dialog-overlay div[ref="eCenterContainer"] div[col-id="${field}"]`).click();
cy.wait(1000);
cy.get('.mfc-dialog-overlay div[ref="eCenterContainer"] div.ag-cell-focus')
      .as('cell').type('1');
cy.wait(1000);
cy.get('@cell').invoke('html').then(innerHtml => {
      if (innerHtml.includes('msc-basic-cell-renderer')) {
              cy.wait(1000);
              cy.get('@cell').type('1');
        }
});
cy.wait(1000).get(`msc-numeric-input input`, { timeout: 5000 }).type(value);
cy.get(this.HEADER_ON_RATES_POPOVER).click();
 

Я также попробовал dblclick({force: true}), нажмите (), а затем введите(‘{enter}’) безрезультатно… в лучшем случае он работает с перерывами, но большую часть времени не работает.

Судя по изображениям, у вас есть ag-сетка, которая может быть медленной и требовать дополнительных параметров тайм-аута для команд (а не фиксированных cy.wait() вызовов).

Существует пара классов ag-cell-not-inline-editing , ag-cell-inline-editing которые совпадают с двумя состояниями ячеек, показанными на ваших изображениях.

Они полезны для того, чтобы убедиться, что у вас правильное состояние.

Простейший тест с ванильной ag-сеткой

 cy.get('[row-id="0"]', {timeout: 10000}).within(() => {    // first row

  const field = 'lastName'

  cy.get(`div[col-id="${field}"]`)
    .should('have.class', 'ag-cell-not-inline-editing')  // confirm not editing
  
  cy.get(`div[col-id="${field}"]`)
    .type('Johnson')                                // .type() automatically gives focus
    .should('have.class', 'ag-cell-inline-editing') // confirm entered editing state

  cy.get(`div[col-id="${field}"]`)
    .type('{enter}')                         // close editing state

  cy.get(`div[col-id="${field}"]`)
    .should('have.class', 'ag-cell-not-inline-editing')  // confirm not editing
    .and('have.text', 'Johnson')                       // confirm text
})
 

В ячейках есть дополнительный слой ( <msc-numeric-input> ), который может вызвать проблемы с выбором времени. Я не могу идентифицировать его для непосредственного тестирования, но, возможно, это компонент веб-сборки.

В любом случае, выбор времени можно решить, дождавшись появления входных данных (которые вы, похоже, уже определили).

В ожидании <input>

 cy.get('[row-id="0"]', {timeout: 10000}).within(() => {

  const field = 'lastName'

  cy.get(`div[col-id="${field}"]`)
    .should('have.class', 'ag-cell-not-inline-editing')

  cy.get(`div[col-id="${field}"]`)
    .dblclick()                                      // trigger editing mode
    .should('have.class', 'ag-cell-inline-editing')  // confirm editing mode
    .find('input', {timeout: 10000})                 // confirm input appears
    .type('Johnson')

  cy.get(`div[col-id="${field}"]`)
    .type('{enter}')                                // exit editing mode

  cy.get(`div[col-id="${field}"]`)
    .should('have.class', 'ag-cell-not-inline-editing')
    .and('have.text', 'Johnson')

})
 

Также можно выйти из режима редактирования, щелкнув в стороне от ячейки, например

 cy.get(`div[col-id="${field}"]`)       // exit editing mode
  .next().click()                      // instead of .type('{enter}')
 

или вкладки (которые автоматически вводят редактирование в следующей ячейке)

 cy.get(`div[col-id="${field}"]`)       // exit editing mode
  .trigger('keydown', { keyCode: 9 })  // instead of .type('{enter}')