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

【问题标题】：Best design pattern for large tasks in Protractor JSProtractor 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 模式。虽然这一系列步骤看起来如果直接翻译成代码就可以正常工作。

标签： javascript automation jestjs protractor

【解决方案1】：

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

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

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

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

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

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

【讨论】：