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 中大型任务的最佳设计模式的主要内容,如果未能解决你的问题,请参考以下文章
使用Gulp任务和WebStorm调试Protractor测试