TestCafe：单页应用程序的页面模型

Question

我一直在努力寻找在 TestCafe 中表示单页应用程序的最佳方式，想知道是否有人可以帮助我？

目前我的结构如下（当然是假页面名称）。为了讨论起见，我在这里大大简化了它，但你应该开始看到的问题是，随着应用程序变得越来越大，主页开始导入越来越多。这些进口中的每一个都有进口，进口可能更多。因此，级联效应导致 TestCafe 在启动测试时急剧变慢。

强制测试本身导入他们使用的所有“部分”是否更有意义？对于涉及多个部分的较长工作流程测试怎么办？那还有意义吗？

任何建议将不胜感激！

import {Selector, t} from 'testcafe';
import {
    ConsumerSection,
    ManufacturerSection,
    SupplierSection,
    <AndSoOn>
} from './CarPageSections';

export class CarPage extends BasePage {

    // BasePage contains all of the Header, Footer, NavBar, SideBar, Action Flyouts

    CarSelectionTimer: Selector;
    ModelSelectionModal: ModelSelectionModal;
    SomeOtherModal: SomeOtherModal;

    // Section Selectors
    sectionPanels = {
        ConsumerSection: null as ConsumerSection,
        ManufacturerSection: null as ManufacturerSection,
        SupplierSection: null as SupplierSection,
        <AndSoOn>: null as <AndSoOn>
    };

    sections = {
        ConsumerSection: null as SectionControl,
        ManufacturerSection: null as SectionControl,
        SupplierSection: null as SectionControl,
        <AndSoOn>: null as SectionControl
    };

    constructor() {
        this.CarSelectionTimer = Selector('#car-selection-timer');

        // Sections
        this.sections = {
            ConsumerSection: new SectionControl('Consumer'),
            ManufacturerSection: new SectionControl('Manufacturer'),
            SupplierSection: new SectionControl('Supplier'),
            <AndSoOn>: new SectionControl('<AndSoOn>')
        };

        this.sectionPanels = {
            ConsumerSection: new ConsumerSection(this.sections.ConsumerSection.control),
            ManufacturerSection: new ManufacturerSection(this.sections.ManufacturerSection.control),
            SupplierSection: new SupplierSection(this.sections.SupplierSection.control),
            <AndSoOn>: new <AndSoOn>(this.sections.<AndSoOn>.control)
        };

        this.ModelSelectionModal = new ModelSelectionModal();
        this.SomeOtherModal = new SomeOtherModal();
    }

    async SomeActionToPerformOnThePage(params) {
        // DO STUFF
    }

    async SomeOtherActionToPerformOnThePage(params) {
        // DO STUFF
    }
}

注意事项：

1. 具有上述 ConsumerSection(control) 等参数的构造函数。
2. 使用文件导出多个对象/类以简化测试（或其他模型）中的导入。

需要考虑的问题：

1. 是否应该将每个模型与其他模型分离？
2. 如果没有耦合模型，您如何使其尽可能易于使用？在其他测试框架中，您可以根据给定的方法/操作交还新的页面类型：即 LoginPage.Submit() 返回 HomePage()。

Answer 1

如果没有完整的页面模型，很难确定问题的原因。您的问题与此类似：https://github.com/DevExpress/testcafe/issues/4054。请检查该 Github 线程并应用其中的建议。 如果这没有帮助，请分享您的整页模型。如果你不能在这里分享，你可以发送到 support@devexpress.com