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

【问题标题】：What is the best way to handle Page Objects for different environments?处理不同环境的页面对象的最佳方法是什么？
【发布时间】：2019-02-15 12:07:16
【问题描述】：

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

我们以登录页面为例，对于美国如下，

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';
  }
}

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

【问题讨论】：

标签： selenium protractor pageobjects

【解决方案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();

【讨论】：