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

Posted 2023-04-19

【中文标题】TestCafe：单页应用程序的页面模型

【英文标题】：TestCafe: Page Models for Single Page Applications

【发布时间】：2021-11-16 09:12:14

【问题描述】：

我一直在努力寻找在 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
    

注意事项：

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

需要考虑的问题：

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

【参考方案1】：

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

【讨论】：

我对此有几个问题，至少还有一个潜在问题。您如何处理具有带参数的构造函数的类？ “导出默认新的 ClassNameHere();”无效，并且参数值在使用之前不会存在： 示例 - 具有多个部分的页面传递父控件选择器以使子选择器更智能。此外，这似乎不允许使用聚合器文件进行导出/导入。那是对的吗？一个文件：export * from 'file1';从'file2'导出*；从'file3'导出*；

建议的解决方案是针对该问题的。看起来您的页面模型和您对页面模型的要求比提到的问题更复杂。所以，也许，解决方法是不合适的。请与我们分享您的测试和页面模型。您可以使用以下链接在我们的 Github 存储库中创建一个单独的问题：github.com/DevExpress/testcafe/issues/… 如果您无法共享您的项目/测试/页面模型，您可以将其发送到 [e-mail]