时间戳

首页 > 解决方案 > 如何将 Chrome 选择器路径转换为 ​​testCafe 选择器

reactjs - 如何将 Chrome 选择器路径转换为 ​​testCafe 选择器

问题描述

如何将我通过使用从 chrome 复制的选择器字符串转换为Inspect > Copy > Copy Selector我可以在 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 的可用功能。

标签： reactjsautomated-testsselectore2e-testingtestcafe

解决方案

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

    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`));

推荐阅读