Testcafe - как мне перебирать селекторы разных типов элементов? - PullRequest
1 голос
/ 17 июня 2020

У меня есть адресная форма React, управляемая конфигурацией, и каждый элемент может быть либо текстом <input>, либо раскрывающимся списком <select>. При попытке заполнить форму с использованием приведенного ниже кода текстовые поля заполняются успешно, но элемент select не может быть найден. Если я удалю выбранные элементы из l oop и затем выберу их по отдельности, он будет работать нормально. Значения MOCKS.deliveryAddress - это просто строки.

  const addressFields = {
    addressLine2: Selector('[data-testid="input-addressLine2"]'),
    addressLine1: Selector('[data-testid="input-addressLine1"]'),
    addressLine3: Selector('[data-testid="input-addressLine3"]'),
    addressLine4: Selector('[data-testid="input-addressLine4"]'),
    postalCode: Selector('[data-testid="input-postalCode"]'),
  };

  const fieldConfig = {
    addressLine1: 'text',
    addressLine2: 'text',
    addressLine3: 'text',
    addressLine4: 'select',
    postalCode: 'text',
  };

  const enterAddress = async () => {
    await Promise.all(
      Object.keys(addressFields).map(async (field) => {
        if (fieldConfig[field] === 'text') {
          if (MOCKS.deliveryAddress[field]) {
            await t.typeText(
              addressFields[field],
              MOCKS.deliveryAddress[field],
              {
                replace: true,
              },
            );
          }
        } else {
          await t.click(addressFields[field]);
          await t.click(
            addressFields[field]
              .find('option')
              .withText(MOCKS.deliveryAddress[field]),
          );
        }
      }),
    );
  };
}

Я получаю сообщение об ошибке 1) The element that matches the specified selector is not visible.

Я что-то делаю не так, как обрабатываю селектор внутри map?

Заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 19 июня 2020

Оказывается, я делал это неправильно! Я должен был связывать события щелчка для открытия раскрывающегося списка и выбора варианта, а не ждать щелчка select, а затем ожидания щелчка option. Например,

await t
  .click(addressFields[field])
  .click(
    addressFields[field]
    .find('option')
    .withText(MOCKS.deliveryAddress.addressLine4),
  );
2 голосов
/ 18 июня 2020

Согласно документации TestCafe , элемент считается «видимым», если он не имеет свойств display: none или visibility: hidden CSS и имеет ненулевые ширину и высоту. Использование инструмента разработки браузера для исследования свойств элементов, используемых в тестах.

...