Тестовый сценарий TestCafe checkbox.checked всегда возвращает false, даже если установлен, как я могу проверить состояние флажка в условии if? - PullRequest
0 голосов
/ 11 января 2019

Вот краткое изложение моей проблемы: У нас есть таблица с флажками и именами файлов в приложении для обмена файлами. В верхней части таблицы находится кнопка «Задать предварительный просмотр», которая позволяет карусели предварительного просмотра всегда отображать элемент предварительного просмотра по умолчанию. Пользователи могут установить флажок и нажать кнопку предварительного просмотра, и элемент предварительного просмотра изменится, а карусель предварительного просмотра обновится.

У меня есть сценарий автоматизации тестирования, который проверяет это поведение, написанное на JavaScript, используя TestCafe, NodeJS & ES6.

Когда мы тестируем предварительный просмотр, мы устанавливаем флажок для элемента, для которого мы хотим установить предварительный просмотр. Затем мы нажимаем кнопку Set Preview. Убедитесь, что значок предварительного просмотра установлен в той строке, где мы только что установили флажок. Есть несколько вещей, на которые стоит обратить внимание: Когда пользователь щелкает по флажку, если выбранный флажок уже имеет предварительный просмотр, установленный для этой строки, то кнопка предварительного просмотра отключается. Также при щелчке по предварительному просмотру выбранная строка автоматически не проверяется.

Таким образом, если строка, для которой уже установлен предварительный просмотр, отмечена, то пользователь не сможет щелкнуть установленный предварительный просмотр и, следовательно, флажок никогда не будет снят. Когда цикл сбрасывается и проверяется следующий элемент, теперь проверяются два элемента, и предварительный просмотр набора отключен, поскольку невозможно установить два элемента с предварительным просмотром набора.

Я добавил код, чтобы проверить, проверена ли текущая строка и есть ли она; снять галочку Проблема в том, что когда я проверяю состояние флажка, чтобы увидеть, если он установлен:

var checkbox = await projectDetails.tableRowCheckBox(fileName);
if (checkbox.checked === true) {

Возвращает false, даже если флажок установлен. Так что это никогда не проверяется и сценарий не работает. Сайт TestCafe дает похожий пример того, как это сделать здесь: https://devexpress.github.io/testcafe/documentation/test-api/actions/click.html

Так что я решил, что это должно работать, и в Интернете есть несколько других форм, которые показывают аналогичные проверки if-условия на флажках, так что это похоже на действительный код, но все же он не работает.

Одно из возможных решений, которое я еще не пробовал, состоит в том, чтобы проверить, установлена ​​ли для строки предварительного просмотра текущая строка, и полностью ли пропустить эту строку. Однако, даже если это решит мою общую проблему, я все равно хотел бы решить эту проблему. Вот почему я разместил это здесь.

РЕДАКТИРОВАТЬ: В другой заметке, прежде чем я добавил условие if (которое не выполняется), мне показалось, что у меня там был щелчок, и я запустил скрипт, и курсор переместился на флажок, чтобы отменить его выбор. , но это на самом деле не сняло флажок. Хотя, возможно, я ошибся, и он просто повторно устанавливал флажок после выполнения предварительного просмотра, который сам по себе автоматически снимал флажок. (Хорошо, теперь моя голова действительно кружится)

Более полный код:

for (var j = 0; j < dataElementCount; j++) {
     // Act
     await t.click(projectDetails.tableRowCheckBox(fileName).with({ selectorTimeout: 30000}));
     await t.click(projectDetails.setPreviewButton, { selectorTimeout: 5000 });

     // Assert
     var previewRow = projectDetails.previewRow;
     // NOTE: Do not feed in test data that doesn't support the preview, or setting the preview will fail for that item.
     // tif and tiff files are not supported for the preview.
     await t.expect(projectDetails.rowFileName(previewRow).textContent).eql(fileName);

     // Cleanup
     // We have to now unselect the item that was just selected, because if we don't then when we go to select the next one,
     // the setPreview will fail, because two items would be selected at the same time.
     // Yes multi-select is now a thing, and we have to deal with it.
     // NOTE: Multi-select may be a thing, but it really only gets in our way with this workflow,
     // if we click a checkbox above for an item that already has the preview set.
     // After the SetPreview button is clicked the checkbox is unclicked,
     // but if the preview is already set for an item, then the item never gets unclicked.
     var checkbox = await projectDetails.tableRowCheckBox(fileName);
     if (checkbox.checked === true) {
          await t.click(projectDetails.tableRowCheckBox(fileName).with({ selectorTimeout: 30000}));
     } else {
          await t.wait(5000);
          console.log('DENIED: The checkbox is NOT checked for the checkbox with the row filename: ' + fileName);
          await t.wait(5000);
     }
}

селекторы:

 const rowFileName = row => row.find('td[data-label="Name"] span');
 const setPreviewButton = Selector('div.table-actions')
      .find('a.set-preview-button');
 const tableRowCheckBox = filename => tableRowName(filename)
      .sibling()
      .find('td.checkbox-cell span.check');
 const previewRow = Selector('td.table-preview-column span')
      .filter(node => node.childElementCount === 1)
      .parent('tr');

Извините, я не могу предоставить доступ к самому сайту, так как это будет нарушением интеллектуальной собственности.

Надеюсь, я включил всю информацию, которую смогу найти возможное решение.

Заранее благодарю за любую помощь, которую вы можете оказать!

1 Ответ

0 голосов
/ 12 января 2019

Метод:

const tableRowCheckBox = filename => tableRowName(filename)
      .sibling()
      .find('td.checkbox-cell span.check')

нацеливается на элемент <span class="check">.

Итак, когда вы вызываете этот вспомогательный метод:

var checkbox = await projectDetails.tableRowCheckBox(fileName);

вы получите <span>. Проблема в том, что свойство checked существует только для элемента <input type="checkbox"> и не существует для элемента <span>.

Это означает, что checkbox.checked всегда undefined

Ваш код должен быть:

const tableRowCheckBox = filename => tableRowName(filename)
      .sibling()
      .find('td.checkbox-cell span') 
      .nth(0);

    const checkbox = projectDetails.tableRowCheckBox(fileName);
    const isChecked = await checkbox.hasClass('check');
    if ( isChecked ) {
      ...
    }
...