如何解决TestCafe:选择器中的选择器
我为我的页面模型工作了一组助手。
这是DOM的样子:
<div id="parentA">
<div class="child yes">hello</div>
<div class="child">world</div>
</div>
<div id="parentB">
<div class="child no">hello</div>
<div class="child">world</div>
</div>
现在,我要检查.child
或#parentA
中的#parentB
元素之一。
import { Selector } from "testcafe";
fixture `children`
.page `http://localhost:8080/index.html`;
// an example of what I expect.
// this is not how i want to write tests.
test("hard-coded: child in A has class 'yes'",async (t) => {
const yesChild = Selector("#parentA .child").withText("hello");
t.expect((await yesChild.classNames).includes("yes"));
});
// helper function for the page model (in a shared module later)
function getParent(name: string) {
return Selector(`#parent${name}`);
}
// helper function for the page model (in a shared module later)
function getChild() {
return Selector(".child");
}
// this is how I want to write tests.
test("parametric-find: child in A has class 'yes'",async (t) => {
const parent = getParent("A");
const child = getChild().withText("hello");
const yesChild = parent.find(child); // there is no overload for find that takes another Selector.
t.expect((await yesChild.classNames).includes("yes"));
});
async function withinParent(child: Selector,parent: Selector): Selector {
// how should I implement this?
}
另一种解决方案可能是创建filterFunction的高阶函数:
test("parametric-find-descendantChild: child in A has class 'yes'",async (t) => {
const parent = getParent("A");
const child = getChild().withText("hello");
const yesChild = parent.find(descendantChild(child));
t.expect((await yesChild.classNames).includes("yes"));
});
function descendantChild(child: Selector): (node: Element) => boolean {
// how should I implement this?
}
但是我能想到的所有方法都会导致死胡同。
-
parent
和child
可以匹配多个元素 - 没有简单的方法来访问选择器选择的元素以将其与另一个选择器进行比较
- 如何比较选择器? 在浏览器中执行在元素级别上运行的
- 功能/回调。我将选择器或与选择器匹配的元素传递到浏览器功能中有多冷?
那么,我应该写一个功能请求,还是有一个聪明的方法来做到这一点?
解决方法
您可以链接Selector方法来实现这一目标。
function getParent(name) {
return Selector(`#parent${name}`);
}
function getChildren(selector) {
return selector.child('.child');
}
test(`parametric-find: child in A has class 'yes'`,async (t) => {
const parent = getParent('A');
const child = getChildren(parent).withText('hello');
await t.expect(child.classNames).contains('yes');
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。