Protractor JS 中大型任务的最佳设计模式

Posted

技术标签:

【中文标题】Protractor JS 中大型任务的最佳设计模式【英文标题】:Best design pattern for large tasks in Protractor JS 【发布时间】:2021-09-23 12:51:25 【问题描述】:

我正在为一个非常成熟的网站开发测试套件。有很多菜单和深度嵌套的页面。我正在寻找一些关于使用 Protractor JS 测试框架执行重复性系列任务的最佳方式的想法,这些任务在我的许多测试中都需要。

目前我有我的.test.ts 文件(包含测试和测试逻辑)和我的.po.ts 文件(包含页面对象)。以下两者的示例。

// header.test.ts

...
    const dh: DealerHeader = new DealerHeader();
    const loc: Locators = new Locators();
       it('Dealer Header Display', async() => 
        const dealerHeaderPrimaryDealerName = await dh.dealerHeaderPrimaryDealerName();
        
        await dealerHeaderPrimaryDealerName.isPresent().then(async function(present) 
            if(present) 
                await waitToBeDisplayed(dealerHeaderPrimaryDealerName);
                await expect(dealerHeaderPrimaryDealerName).toBeDisplayed();
                const dealerHeaderDealerRating = await dh.dealerHeaderDealerRating();
                await waitToBeDisplayed(dealerHeaderDealerRating);
                await expect(dealerHeaderDealerRating).toBeDisplayed();
        
                await click(dealerHeaderPrimaryDealerName);
                const dealerHeaderModel = await dh.dealerHeaderModal;
                await waitToBeDisplayed(dealerHeaderModel);
                await expect(dealerHeaderModel).toBeDisplayed();
             else 
                await loc.changeDealer();
            ;
        );
    );
...
// dealerHeader.po.ts
...
    async dealerHeaderPrimaryDealerName() 
        const dealerHeaderTopNavigationElement = await this.dealerHeaderTopNavigationElement();
        return dealerHeaderTopNavigationElement.element(by.xpath(
            './pce-dealerheader/div/section/section/div/span[contains(@class, "dealer-name")]'
        ));
    

    get dealerHeaderModal() 
        return element(by.xpath(
            '//div[@class="dealer-modal"]'
        ));
    
...

async changeDealer() 
 // is dealer set?
 // if dealer is set
    // click header to expand
    // click 'select dealer' button
    // goes to new locator page
    // scroll down
    // type zipcode in, press enter
    // get list of dealers, select random dealer
    // click dealer 'details' button
    // click 'change dealer' button

 // if no dealer is set
    // click header to expand
    // click 'select dealer' button
    // goes to new locator page
    // scroll down
    // type zipcode in, press enter
    // get list of dealers, select random dealer
    // click dealer 'details' button
    // click 'set dealer' button

我的问题是关于changeDealer() 函数。 “更换经销商”需要多次点击和一长串步骤来更换。创建这样的函数的最佳设计模式是什么?

【问题讨论】:

Strategy 或 State 模式。虽然这一系列步骤看起来如果直接翻译成代码就可以正常工作。 【参考方案1】:

如何最好地实施它?我们确实需要成为您应用程序的专家才能准确回答。目前,您将是定义最佳方法的最佳人选

但我最近发现,通常遵循应用程序本身的开发模型是最好的方法。这需要从“页面对象”转向“组件对象”。

例如,您的开发人员编写下拉组件并在多个地方重用它 - 继续做同样的事情。编写一个下拉组件对象,该对象将具有用于操作此 html 组件的主要定位器和方法(例如选择选项、获取选项计数等)。

开发人员创建了一个地址表单组件,它需要更小的组件,例如引擎盖下的下拉菜单 - 做同样的事情。定义另一个组件对象(或称为组件控制器)并定义其定位器和方法,这些定位器和方法将依赖于已经存在的控制器^^^

然后开发人员使用这个表单组件并创建多个实例——个人地址、账单、邮寄?照着做。此时你只需要创建一个在一个地方定义的组件的实例并重复使用它3次

为什么我认为它是最好的?因为您正在尽可能多地重用代码,并在结果中避免重复。其次,应用程序中是否应该有更改,它们可能会发生在组件级别,您需要做的就是更正其各自组件的代码

【讨论】:

以上是关于Protractor JS 中大型任务的最佳设计模式的主要内容,如果未能解决你的问题,请参考以下文章

25个超有用的 AngularJS Web 开发工具

使用Gulp任务和WebStorm调试Protractor测试

ProTractor:用于早季田间表型分析的轻量级地面成像分析系统

转接头加工工艺设计及锻模设计任务书

为大型项目表示 CSS 和 JS 文件的最佳方式

具有 Flux 架构的 ReactJS 生成大型 JS 文件,最佳实践是啥?