Testcafe

Question

我有一个配置驱动的 React 地址表单，每个元素可以是文本 <input> 或 <select> 下拉列表。当尝试使用下面的代码填写表单时，文本输入已成功填充，但找不到 select 元素。如果我从循环中删除 select 元素，然后单独删除 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.

我是不是在处理 select 或 map 内部时做错了什么？

提前致谢！

Answer 1

根据 TestCafe documentation，如果元素没有 display: none 或 visibility: hidden CSS 属性并且没有-零宽度和高度。使用浏览器开发工具调查测试中使用的元素的属性。

Answer 2

原来我做错了！我应该链接点击事件以打开下拉菜单并选择一个选项，而不是等待 select 点击然后等待 option 点击。例如

await t
  .click(addressFields[field])
  .click(
    addressFields[field]
    .find('option')
    .withText(MOCKS.deliveryAddress.addressLine4),
  );

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

Testcafe - how do I iterate over selectors of different element types?

testing

automated-tests

reactjs

e2e-testing