Selenium 对于不同的环境，处理页面对象的最佳方式是什么？

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

让我们进入登录页面，如下所示

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

---

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

我不是JS专家。我没有验证下面的代码。我在解释如何用Java实现这一点。您可以相应地修改

我将创建一个抽象类

HomePage

，它定义了所有地区的所有通用功能

USHomePage

，

CAHomePage

类应扩展

主页

。或者，您也可以使用

USHomePage

作为基类

HomePage

，而

CAHomePage

将对此进行扩展

现在在下面的示例中，您拥有了US主页的所有功能&您还添加了CA的特定功能

例如：

 export class CAHomepage extends HomePage {

  public loanPurposeRadio: string;

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

}

现在，您可以维护一些工厂类来返回主页的特定实例，具体取决于您测试的站点

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