Question

我们有两个支持点，例如美国和加拿大。有些页面完全相同，而有些页面则有不同的选择。如何针对这种情况使用页面对象模式定义页面并减少重复项？

让我们进入“登录”页面，对于美国如下所示，

import { by, element, ElementFinder } from 'protractor';

export class Homepage {

  public startNowButton: ElementFinder;
  public signinLink: ElementFinder;

  constructor() {
    this.startNowButton = element(by.css('button[sso-modal="SignUp"]'));
    this.signinLink = element(by.linkText('Sign in'));
  }
}

对于加拿大，还有一个复选框，

export class Homepage {

  public startNowButton: ElementFinder;
  public signinLink: ElementFinder;
  public loanPurposeRadio: string;

  constructor() {
    this.startNowButton = element(by.css('button[sso-modal="SignUp"]'));
    this.signinLink = element(by.linkText('Sign in'));
    this.loanPurposeRadio = '[ng-form="loanPurposeField"] label';
  }
}

如果我想同时支持两个站点，那么在这种情况下而不是创建两个类的最佳方法是建模页面对象？谢谢

Answer 1

我不是JS专家。我没有验证以下代码。我正在根据我将如何在Java中实现这一目标进行解释。您可以进行相应的修改。

我将创建一个抽象类HomePage，该类定义所有语言环境的所有通用功能。 USHomePage，CAHomePage类应扩展HomePage。或者，您也可以将USHomePage用作基类HomePage，CAHomePage将对此进行扩展。

现在在下面的示例中，您具有美国主页的所有功能，并且还添加了CA的特定功能。

例如：

 export class CAHomepage extends HomePage {

  public loanPurposeRadio: string;

  constructor() {
    super();
    this.loanPurposeRadio = '[ng-form="loanPurposeField"] label';
  }

}

现在，您可以维护某种工厂类，以根据测试的站点返回HomePage的特定实例。

var homePageFactory = {
   "US": () => { return new HomePage() },
   "CA": () => { return new CAHomePage() },
   "UK": () => { return new UKHomePage() }
}

根据语言环境/国家/地区，您可以访问特定的主页。您的测试不受特定站点的限制，而是非常通用。取决于您测试的网站，它们的行为会有所不同。

var lang = "US"
var homePage = homepageFactory[lang]();
homePage.login();
homePage.register();

在不同环境下处理页面对象的最佳方法是什么？

1 个答案: