testing - TestCafe 是否支持页面对象中的部分（如 Nightwatch 一样）？如果没有，我们如何在 TestCafe 中实现这一点？

Question

我们拥有丰富的 UI，其中包含许多 Web 元素和 UI 上的多层次元素，这些元素被划分为多个部分。作为新测试自动化框架评估的一部分，我希望看看我们是否可以使用 TESTCAFE。目前我们正在使用支持页面对象中的部分的 Nightwatch（Java 脚本）框架。现在我们正在转向 TestCafe（Java Script）框架。谁能给我一个例子，说明我们如何使用 TestCafe 在 PageObjects 中维护 SECTIONS ？如果 TestCafe 不支持，我们如何在 TestCafe 中实现相同的功能。
带有部分的 NightWatch 页面对象示例： nightwatch.js 中 page_objects 中的多级部分

Answer 1

在 TestCafe 中，页面模型只是一个 JavaScript 类（https://devexpress.github.io/testcafe/documentation/guides/concepts/page-model.html#page-model-example），因此您可以创建几个嵌套类反映您的页面结构。

例如，如果页面上有标题、工具栏和列表对象，您可以将以下代码用于您的页面模型：

class ListModel {
    getItem(i) {
        //find an item
    }

    constructor (selector) {
        this.selector = selector;
    }
}

class ToolbarModel {
    action(){
    //perform an action        
    }

    constructor (selector) {
        this.selector = selector;
    }
}


class PageModel {    
    constructor (selector) {
        this.selector = selector;
        this.title = selector.find('#tile');
        this.toolBar = new ToolbarModel(selector.find('#toolbar'));
        this.list = new ListModel(selector.find('#list'));

    }

}