TestCafe：选择器中的选择器

Question

我正在为我的页面模型开发一组助手。

这就是 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>

现在我想检查 #parentA 或 #parentB 中的 .child 个元素之一。

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 可以匹配多个元素
没有简单的方法来访问选择器选择的元素以便将其与另一个选择器进行比较
如何比较选择器？
functions/callbacks在Element层面上的操作都是在浏览器中执行的。将选择器或选择器匹配的元素传递给浏览器函数有多冷？

嗯，我应该写一个功能请求，还是有一个聪明的方法来做到这一点？

Answer 1

您可以链接 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');
});

TestCafe：选择器中的选择器

TestCafe: Selector within Selector

testing

automation

automated-tests

e2e-testing

testcafe