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

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();