Selenium WebdriverJS，如何使用PageFactory？

Question

我目前正在尝试开始使用TypeScript编写测试（JavaScript中的解决方案也不错），并且我很难理解如何使用C＃中的PageFactory。 在C＃中，我曾经为我正在测试的网站的每个页面/表单编写单独的类，例如：

public class RegisterForm
{
    public RegisterForm()
    {
        PageFactory.InitElements(Driver.Chrome, this);
    }

    [FindsBy(How = How.CssSelector, Using = @"........")]
    public IWebElement EmailField { get; set; }
}

每当我需要使用RegisterForm中的元素时，我都会初始化该类并在此处使用它们。 如何在TypeScript或JavaScript中执行类似的操作？

Answer 1

下面是我如何在非角度页面上使用量角器创建页面对象的示例

'use strict';

var DocumentationPage = function () {

    var documentationLink = element(by.css(".nav-global a[href*='Docs'"));
    var documentationURL = "https://docs.docker.com/"
    var installButton = element(by.buttonText("Install"));
    var dockerEngineButton = element(by.buttonText("Docker Engine"));
    var dockerLinuxButton = element(by.buttonText("Linux"));
    var dockerCloudButton = element(by.buttonText("Cloud"));
    var dockerFundamentalsButton = element(by.buttonText("Docker Fundamentals"));
    var useDockerButton = element(by.buttonText("Use Docker"));
    var amazonInstallLink = element(by.partialLinkText("Amazon EC2 Installation"));


    this.go = function(){
        browser.get(documentationURL);
        browser.sleep(100);
    };
    this.drillDownToAmazonInstallDocumentation = function(){
        installButton.click();
        browser.sleep(100);
        dockerEngineButton.click();
        browser.sleep(100);
        dockerCloudButton.click();
        browser.sleep(100);
    };
    this.clickInstallOnAmazonLink = function(){
        amazonInstallLink.click();
        browser.sleep(100);
    };
   this.drillUpToAmazonInstallDocumentation = function(){
        dockerCloudButton.click();
        browser.sleep(100);
        dockerEngineButton.click();
        browser.sleep(100);
        installButton.click();
        browser.sleep(2000);
    };
};

module.exports = DocumentationPage;

我在测试中使用了页面对象，如下所示。

var HomePage = require("./pages/HomePage.js");
var DocumentationPage = require('./pages/DocumentationPage.js');


describe("Testing the Docker Documentation UI", function(){

  var hp = new HomePage();
  var dp = new DocumentationPage();

 beforeEach(function(){
   browser.ignoreSynchronization = true;
   dp.go();
 });

  it("Validate accordion navigation drills down", function(){
    dp.drillDownToAmazonInstallDocumentation();
    dp.clickInstallOnAmazonLink();
    expect(browser.getTitle()).toContain("Amazon EC2 Installation");
  });

  it("Validate accordion navigation drills up", function(){
    dp.drillDownToAmazonInstallDocumentation();
    dp.drillUpToAmazonInstallDocumentation();
  });
});