reactjs - Testcafe - 如何迭代不同元素类型的选择器？

Question

我有一个配置驱动的 React 地址表单，每个元素可以是文本 <input>或<select>落下。当尝试使用下面的代码填写表单时，文本输入已成功填充，但找不到选择元素。如果我从循环中删除选择元素并随后单独选择它们，则效果很好。 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 内的选择器时做错了什么吗？ ？

提前致谢!

Answer 1

根据 TestCafe documentation ，如果元素不具有 display: none 或 visibility: hide CSS 属性并且具有非零宽度和高度，则该元素被视为“可见”。使用浏览器开发工具来调查测试中使用的元素的属性。