Here is an example of how I implemented my page objects in Protractor for a non-angular page:
'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;
In my tests, I utilized the page objects as shown 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();
});
});