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

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 中的实现方式进行解释。你可以相应地修改。

我将创建一个抽象 class HomePage 来定义所有语言环境的所有通用功能。 USHomePage、CAHomePage classes 应该扩展 HomePage。或者，您也可以使用 USHomePage 作为基础 class HomePage 并且 CAHomePage 将扩展它。

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

例如：

 export class CAHomepage extends HomePage {

  public loanPurposeRadio: string;

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

}

现在您可以维护一些工厂 class 到 return 主页的特定实例取决于您测试的站点。

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

基于locale/country，您可以访问特定的主页。您的测试与特定站点无关，而是非常通用。取决于您测试的站点，它们的行为会有所不同。

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

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

What is the best way to handle Page Objects for different environments?

selenium

protractor

pageobjects