Selenium WebdriverJS, how to use PageFactory?

Question

I am currently trying to start writing my tests using TypeScript(solution in JavaScript is also fine) and I am having a hard time understanding how to use the PageFactory from C#. In C# I used to write separate classes for every page/form of the website that I am testing, for example:

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

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

And whenever I needed to use elements from the RegisterForm I was initializing this class and using them from here. How can I do something like this in TypeScript or in JavaScript?

Answer 1

An example of how I created my page objects using protractor on a non-angular page is below

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

I used the page objects in tests as demonstrated below.

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