Does TestCafe support sections in page objects (like Nightwatch does) ? If not, how can we achieve this in TestCafe?

Question

We have rich UI with lot of web elements & multi levels of elements on UI segregated into sections. As part of evaluation for a new test automation framework, I am looking to see if we can use TESTCAFE. Currently we are using Nightwatch (Java Script) framework which support Sections in Page Objects. Now we are moving to TestCafe (Java Script) framework. Could anyone give me an example on how we can maintain SECTIONS in PageObjects using TestCafe ?? If TestCafe doesn't support, how do we achieve same in TestCafe.
NighWatch Page Object with Sections Example: Multiple level of sections in page_objects in nightwatch.js

Answer 1

In TestCafe page model is just a JavaScript class (https://devexpress.github.io/testcafe/documentation/guides/concepts/page-model.html#page-model-example), so you can create several nested classes that will reflect your page structure.

For example, if there are a title, toolbar and list objects on the page, you can use the following code for your page model:

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

    }

}