在 Testcafe 中，我如何等待同一个选择器的第二个元素出现？

Question

我有一个场景，其中相同 className 的多个元素一个接一个地出现（这取决于服务器响应）。

我想要实现的是仅在存在同一选择器的 2 个元素后才通过测试，但是目前，测试似乎失败了，因为它一直识别 1 个元素然后直接失败而不等待第二个。

这是我的代码（使用 count 参数从外部调用，比如 2）-

import { Selector } from 'testcafe';

export const validateMsg = async (t, headlineText, count = 1) => {
  const msgHeadline = Selector('.myClassName').withText(headlineText).exists;

  const msgHeadLineExists = await t
    .expect(msgHeadline.count)
    .gte(count, `Received less than ${count} desired messages with headline ${headlineText}`);
  return msgHeadLineExists;
};

我假设发生这种情况是因为我正在检查 msgHeadline 是否存在，它在呈现时看到第一个元素，但立即失败。我想等第二个。

有什么想法吗？

Answer 1

如果两个元素有相同的文本并且只有这个元素有这个特定的 className 那么你可以使用 nth() function

const msgHeadline = Selector('.myClassName')..withText(headlineText).nth(1);
await t
    .expect(msgHeadline.exists).ok(`Received less than ${count} desired messages with headline ${headlineText}`)

在这里你使用 headlineText 获取第二个元素，然后断言它存在。虽然我认为你应该检查它是否存在并显示（可见）

Answer 2

只需从选择器中删除 .exists 它 returns 布尔值，然后对其调用 .count 将无法通过测试。

const msgHeadline = Selector('.myClassName').withText(headlineText);

const msgHeadLineExists = await t
  .expect(msgHeadline.count)
  .gte(count, `Received less than ${count} desired messages with headline ${headlineText}`);
return msgHeadLineExists;

您可以在此处阅读更多内容 https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html#check-if-an-element-exists

在 Testcafe 中，我如何等待同一个选择器的第二个元素出现？

In Testcafe, how can I wait for a 2nd element of the same selector to appear?

testing

automated-tests

e2e-testing

testcafe

web-testing