时间戳

首页 > 解决方案 > 了解第 n 个选择器

css-selectors - 了解第 n 个选择器

问题描述

我使用 TestCafe Studio 来记录一些测试。但是，如果您要更改某些列表的结构，这些测试很有用。我尝试在 Java Script 中稍微优化选择器，以使测试可以在某些列表中独立运行。但为此，我还需要了解 Selector 的“第 n 个”元素。

就我而言，TestCafe Studio 脚本包含：

.click(Selector('div').withText('testcafe#1').nth(9).find('div').nth(2).find('div').nth(1))

来自 devtools 的树

请看一下页面树。我不明白“nth(9)”元素是什么意思。这里的祖先形式“withText”是什么？意味着我必须从树中的哪个元素向前数 9？

我有一个大问题，“nth”看起来总是一个动态数字。React 网页中的特殊功能。所以在我知道父母在哪里之前，它真的是不可用的。在网页上，我必须测试一个列表元素有时是 nth(36)，有时是 nth(37)。所以任何人都可以帮助我从哪里开始 TestCafe 开始计数？

标签： css-selectorsautomated-testsselectore2e-testingtestcafe

解决方案

我不明白“nth(9)”元素是什么意思。  

TestCafe文档帮助主题说：“通过匹配集中的索引查找元素。”。即TestCafe 获取链的结果并通过索引获取必要的元素。为了计算Selector('div').withText('testcafe#1').nth(9)选择器的目标元素，TestCafe 将执行以下步骤：

  • 找到所有div元素
  • 仅过滤innerText属性包含“testcafe#1”值的元素

  • 从上一步的结果中取出第 9 个元素

     

我有一个大问题，“nth”看起来总是一个动态数字。  

你说的对。nth使用动态列表的方法是不正确的。相反，尝试使用基于类名、标签名或其他内容的另一个选择器。

推荐阅读