如何将 Chrome 选择器路径转换为 testCafe 选择器答案

【问题标题】：How do I convert a Chrome Selector path to a testCafe Selector如何将 Chrome 选择器路径转换为 testCafe 选择器
【发布时间】：2019-09-26 13:37:19
【问题描述】：

如何将使用 Inspect > Copy > Copy Selector 从 chrome 复制的选择器字符串转换为可以在 testCafe 选择器中使用的字符串？

Chrome 给了我这个：

body div#root div div.fullindy div.container div.row div.col-md-8 div form div.bd-graybackground.padding-64 div.row div.col-md-6 div.row div.col-md-6 div div.form.form-group div.css-10nd86i.clickable.normal-subheader div.css-1aya2g8 div.css-1rtrksz div.css-va7pk8

这不会返回具有我需要检查的文本值的 css-va7pk8 选择器对象。

这行得通：

Selector('form').find('.row').sibling().sibling(3).child(1).find('.row').child().find('div').child(1);

但是尝试弄清楚如何遍历复杂的 DOM 非常耗时。必须有一种更快的方式使用 Chrome 和 testCafe 的可用功能。

【问题讨论】：

我希望从 DevTools 复制的选择器结构看起来更像 #question-header > h1 > a。还显示body div#root 而不是仅仅从#root 开始很奇怪。您能否确认您正在按照此答案中的步骤操作？：stackoverflow.com/a/45078286/3456826
这正是我的做法。有时它包括正文，但大多数时候它以 #root 开头

标签： reactjs automated-tests selector e2e-testing testcafe

【解决方案1】：

您可以将整个 css 选择器字符串用作TestCafe Selector constructor 参数：

    await t.click(Selector(`body div#root div div.fullindy div.container div.row 
div.col-md-8 div form div.bd-graybackground.padding-64 div.row div.col-md-6 
div.row div.col-md-6 div div.form.form-group div.css-10nd86i.clickable.normal-subheader 
div.css-1aya2g8 div.css-1rtrksz div.css-va7pk8`));

【讨论】：