testing - 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>
现在我想检查or中的.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');
});
推荐阅读
- flutter - 计算列表中的元素
- javascript - 重命名列表的每个对象中的字段
- asp.net - 非 root 用户无法在 docker 中启动 w3svc 服务
- java - 数据如何插入 H2 数据库?
- python - 如何过滤 Dataframe 以在 Pyspark 中将 True 或 False 返回到特定条件?
- r - 获取在 R 中不同时间点从各自集群中“退出”的 ID 的百分比
- c# - ON DELETE NO ACTION时如何在EF Core中删除表中的行?
- python - 修剪没有到任何目标节点集的路径的图节点
- javascript - 放入传奇后调用redux select是否等待商店更新?
- javascript - 我做了一张卡片,我想循环整个卡片组件