Refactoring. Page classes changed to singleton pattern. Updated tests.

example/pages/FeedbackPage.js

@@ -1,9 +1,11 @@
 import { Element } from "test-juggler";
 import TopBar from "../components/TopBar";
 
-export default class FeedbackPage {
+class FeedbackPage {
     constructor() {
         this.TopBar = new TopBar();
         this.TitleText = new Element("#feedback-title");
     }
-}
+}
+
+export default new FeedbackPage();

example/pages/HomePage.js

@@ -2,7 +2,7 @@
 import { Element } from "test-juggler";
 import TopBar from "../components/TopBar";
 
-export default class HomePage {
+class HomePage {
     constructor() {
         this.TopBar = new TopBar();
         this.NavigationBar = new Element("#nav");
@@ -32,4 +32,6 @@ export default class HomePage {
     async clicOnlineFeedBackLink() {
         await this.FeedBackLink.click();
     }
-}
+}
+
+export default new HomePage();

example/tests/VisualRegression.test.js

@@ -3,11 +3,8 @@ import HomePage from "../pages/HomePage";
 import FeedbackPage from "../pages/FeedbackPage";
 
 describe("Visual Regression", () => {
-    let homepage = new HomePage();
-    let feedbackpage = new FeedbackPage();
-
     beforeEach(async () => {
-        await homepage.visit();
+        await HomePage.visit();
         console.log("Running test: " + jasmine["currentTest"].fullName);
     });
 
@@ -50,7 +47,7 @@ describe("Visual Regression", () => {
 
     it("should capture screenshot of specific page element", async () => {
         //Arrange, Act
-        const screenshot = await (await feedbackpage.TopBar.SignInButton.wait()).screenshot();
+        const screenshot = await (await FeedbackPage.TopBar.SignInButton.wait()).screenshot();
 
         //Assert
         expect(screenshot).toMatchImageSnapshot();
@@ -61,7 +58,7 @@ describe("Visual Regression", () => {
         await page.evaluate((selector) => {
             let signinButtonDomElement = document.querySelector(selector);
             signinButtonDomElement.innerText = "Expected Content";
-        }, feedbackpage.TopBar.SignInButton.selector);
+        }, FeedbackPage.TopBar.SignInButton.selector);
 
         //Act
         const screenshot = await page.screenshot();
@@ -72,7 +69,7 @@ describe("Visual Regression", () => {
 
     it("should cover unwanted element before making screenshot comparison", async () => {
         //Arrange
-        await homepage.NavigationBar.cover();
+        await HomePage.NavigationBar.cover();
 
         //Act
         const screenshot = await page.screenshot();

example/tests/helpers.test.js

@@ -3,8 +3,6 @@ import { Element, Helpers } from "test-juggler";
 const fs = require("fs");
 
 describe("Helpers", () => {
-    let helpers = new Helpers();
-
     beforeEach(async () => {
         console.log("Running test: " + jasmine["currentTest"].fullName);
     });
@@ -16,7 +14,7 @@ describe("Helpers", () => {
         const expectedFilePath = `./logs/Helpers/should take screenshot, save to logs folder and return filepath/${fileName}.png`;
 
         //Act
-        const actualFilePath = await helpers.takeScreenshot(fileName);
+        const actualFilePath = await Helpers.takeScreenshot(fileName);
 
         //Assert
         expect(actualFilePath).toBe(expectedFilePath);
@@ -28,7 +26,7 @@ describe("Helpers", () => {
         await page.goto("http://the-internet.herokuapp.com/");
 
         //Act
-        const actualFilePath = await helpers.takeScreenshot();
+        const actualFilePath = await Helpers.takeScreenshot();
 
         //Assert
         expect(actualFilePath).toContain(Date.now().toString().slice(0, -6));
@@ -42,7 +40,7 @@ describe("Helpers", () => {
 
         //Act
         await startButton.click();
-        await helpers.retry(async () => {
+        await Helpers.retry(async () => {
             await elementToLoad.click();
         });
 
@@ -56,7 +54,7 @@ describe("Helpers", () => {
         const progressLoader = new Element("html.nprogress-busy");
 
         //Act
-        await helpers.goToUrlAndLoad("https://www.jqueryscript.net/demo/jQuery-Html5-Based-Preloader-Plugin-html5loader/");
+        await Helpers.goToUrlAndLoad("https://www.jqueryscript.net/demo/jQuery-Html5-Based-Preloader-Plugin-html5loader/");
 
         //Assert
         await expect(progressLoader.exists()).resolves.toBeFalsy();
@@ -69,7 +67,7 @@ describe("Helpers", () => {
         await page.goto("http://the-internet.herokuapp.com/iframe");
 
         //Act
-        const frame = await helpers.getFrame(iFrameSelector);
+        const frame = await Helpers.getFrame(iFrameSelector);
         const textContent = await frame.$eval(textFrameSelector, element => element.textContent);
 
         //Assert

example/tests/interceptor.test.js

@@ -7,9 +7,6 @@ const successMessage = new Element(".alert-success");
 const addToCartButton = new Element(".product-layout:nth-child(1) > div button:nth-child(1)");
 
 describe("Interceptor", () => {
-    let helpers = new Helpers();
-    let interceptor = new Interceptor();
-
     beforeEach(async () => {
         console.log(`Running test: '${jasmine["currentTest"].fullName}'`);
         //this is workaraound to avoid 'Request is already handled!' error. Shoud be removed when https://github.com/smooth-code/jest-puppeteer/issues/308 defect is fixed.
@@ -21,7 +18,7 @@ describe("Interceptor", () => {
         const navBar = new Element(".navbar");
         const requestUrlFragment = "topmenu";
 
-        await interceptor.abortRequests(requestUrlFragment);
+        await Interceptor.abortRequests(requestUrlFragment);
 
         //Act
         await page.goto(DemoGuruSite);
@@ -48,7 +45,7 @@ describe("Interceptor", () => {
         await expect(navBar.exists()).resolves.toBeTruthy();
 
         //Act
-        await interceptor.abortRequests(requestUrlFragment);
+        await Interceptor.abortRequests(requestUrlFragment);
         await page.reload( { waitUntil: "networkidle2" } );
 
         //Assert
@@ -59,7 +56,7 @@ describe("Interceptor", () => {
         //Arrange
         const navBar = new Element(".navbar");
         const requestUrlFragment = "topmenu";
-        await interceptor.abortRequestsDuringAction(page.goto(DemoGuruSite), requestUrlFragment);
+        await Interceptor.abortRequestsDuringAction(page.goto(DemoGuruSite), requestUrlFragment);
 
         //Assert
         await expect(navBar.exists()).resolves.toBeFalsy();
@@ -73,22 +70,22 @@ describe("Interceptor", () => {
 
     it("should block any request during action", async () => {
         //Arrange
-        await helpers.goToUrlAndLoad(DemoOpenCartSite);
+        await Helpers.goToUrlAndLoad(DemoOpenCartSite);
         await page.on("dialog", dialog => {
             console.log(`Alert was detected: '${dialog.message()}'`);
             dialog.dismiss();
         });
 
         //Act
-        await interceptor.abortRequestsDuringAction(() => { addToCartButton.click(); });
+        await Interceptor.abortRequestsDuringAction(() => { addToCartButton.click(); });
 
         //Assert
         await expect(successMessage.isVisible()).resolves.toBeFalsy();
     });
 
     it("should count all requests", async () => {
         //Act
-        var totalRequests = await interceptor.getAllRequestsData(helpers.goToUrlAndLoad(DemoOpenCartSite));
+        var totalRequests = await Interceptor.getAllRequestsData(Helpers.goToUrlAndLoad(DemoOpenCartSite));
 
         //Assert
         expect(totalRequests.length > 0).toBeTruthy();
@@ -98,10 +95,10 @@ describe("Interceptor", () => {
     it("should detect specific response after action", async () => {
         //Arrange
         const responsetUrlFragment = "cart/info";
-        await helpers.goToUrlAndLoad(DemoOpenCartSite);
+        await Helpers.goToUrlAndLoad(DemoOpenCartSite);
 
         //Act
-        var responseAfterAction = await interceptor.waitForResponseAfterAction(addToCartButton.click(), responsetUrlFragment);
+        var responseAfterAction = await Interceptor.waitForResponseAfterAction(addToCartButton.click(), responsetUrlFragment);
 
         //Assert
         await expect(successMessage.isVisible()).resolves.toBeTruthy();
@@ -112,10 +109,10 @@ describe("Interceptor", () => {
 
     it("should detect any request after action", async () => {
         //Arrange
-        await helpers.goToUrlAndLoad(DemoOpenCartSite);
+        await Helpers.goToUrlAndLoad(DemoOpenCartSite);
 
         //Act
-        var requestAfterAction = await interceptor.waitForRequestAfterAction(addToCartButton.click());
+        var requestAfterAction = await Interceptor.waitForRequestAfterAction(addToCartButton.click());
 
         //Assert
         await expect(successMessage.isVisible()).resolves.toBeTruthy();

example/tests/pageObjectModel.test.js

@@ -2,26 +2,23 @@ import HomePage from "../pages/HomePage";
 import FeedbackPage from "../pages/FeedbackPage";
 
 describe("Example", () => {
-    let homepage = new HomePage();
-    let feedbackpage = new FeedbackPage();
-
     beforeEach(async () => {
-        await homepage.visit();
+        await HomePage.visit();
         console.log("Running test: " + jasmine["currentTest"].fullName);
     });
 
     it("should access methods defined in pages and components", async () => {
-        await expect(homepage.isNavbarDisplayed()).resolves.toBeTruthy();
-        await expect(homepage.TopBar.isTopBarDisplayed()).resolves.toBeTruthy();
+        await expect(HomePage.isNavbarDisplayed()).resolves.toBeTruthy();
+        await expect(HomePage.TopBar.isTopBarDisplayed()).resolves.toBeTruthy();
     });
 
     it("should access an element defined in component defined in page", async () => {
-        await expect(homepage.TopBar.LogoButton.exists()).resolves.toBeTruthy();
+        await expect(HomePage.TopBar.LogoButton.exists()).resolves.toBeTruthy();
     });
 
     it("should access an element defined directly in page", async () => {
-        await homepage.FeedBackLink.click();
+        await HomePage.FeedBackLink.click();
         console.log("Clicked on feedback link");
-        await expect(feedbackpage.TitleText.exists()).resolves.toBeTruthy();
+        await expect(FeedbackPage.TitleText.exists()).resolves.toBeTruthy();
     });
 });

framework/Element.js

@@ -2,8 +2,6 @@
 import Helpers from "./helpers";
 
 const config = require(process.cwd() + "/framework.config");
-var helpers = new Helpers();
-
 const defaultTimeout = config.defaultTimeout;
 const shortTimeout = config.shortTimeout;
 
@@ -24,7 +22,7 @@ export default class Element {
         console.log(`Waiting for ${this.selector} ...`);
         const elementHandle = await page.waitFor(this.selector, { timeout: timeout });
         if (config.captureScreenshots) {
-            await helpers.takeScreenshot();
+            await Helpers.takeScreenshot();
         }
         return elementHandle;
     }
@@ -33,7 +31,7 @@ export default class Element {
         console.log(`Waiting for ${this.selector} to be visible...`);
         const elementHandle = await page.waitFor(this.selector, { visible: true, timeout: timeout });
         if (config.captureScreenshots) {
-            await helpers.takeScreenshot();
+            await Helpers.takeScreenshot();
         }
         return elementHandle;
     }
@@ -42,7 +40,7 @@ export default class Element {
         console.log(`Waiting for ${this.selector} to be invisible...`);
         await page.waitFor(this.selector, { hidden: true, timeout: timeout });
         if (config.captureScreenshots) {
-            await helpers.takeScreenshot();
+            await Helpers.takeScreenshot();
         }
     }
 

framework/helpers.js

@@ -2,7 +2,7 @@
 const fs = require("fs");
 const retry = require("async-retry");
 
-export default class Helpers {
+class Helpers {
     async takeScreenshot(filename) {
         var targetDir = `./logs/${jasmine["currentSuite"].fullName}`;
         if (typeof jasmine["currentTest"] !== "undefined") {
@@ -35,4 +35,6 @@ export default class Helpers {
         const elementHandle = await page.$(selector);
         return await elementHandle.contentFrame();
     }
-}
+}
+
+export default new Helpers();

framework/interceptor.js

@@ -1,7 +1,7 @@
 /*global page*/
 const fs = require("fs");
 
-export default class Interceptor {
+class Interceptor {
     async takeScreenshot(filename) {
         const targetDir = `./logs/${jasmine["currentSuite"].fullName}/${jasmine["currentTest"].description}`;
         fs.mkdirSync(targetDir, { recursive: true });
@@ -53,4 +53,6 @@ export default class Interceptor {
         console.log(`Url: '${responseAferAction.url()}'`);
         return responseAferAction;
     }
-}
+}
+
+export default new Interceptor();