Feature: add page object example

README.md

@@ -6,7 +6,7 @@ It was created to be example for users, who has problems with codecept + TS sett
 
 Used packages:
 
-- codeceptjs ^2.1.5
+- codeceptjs ^2.3.0
 - typescript ^3.4.5
 - ts-lint ^5.16.0
 - ts-node ^8.1.0

codecept.conf.js

@@ -10,7 +10,9 @@ exports.config = {
       require: "./src/specs/e2e/helpers/randomGenerator.helper.ts"
     }
   },
-  include: {},
+  include: {
+    about: "./src/specs/e2e/pages/about.page.ts"
+  },
   bootstrap: null,
   mocha: {},
   name: "codecept-typescript-example",

package.json

@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@types/node": "^12.0.2",
-    "codeceptjs": "^2.1.5",
+    "codeceptjs": "^2.3.0",
     "pm2": "^3.5.1",
     "serve": "^11.0.2",
     "ts-loader": "^6.0.1",

src/app/about.html

@@ -27,9 +27,12 @@
       </ul>
     </nav>
   </header>
-  <div>
-    Some about text.
-  </div>
+  <main>
+    <h1>About</h1>
+    <section id="about-info">
+      <p>This page contains some "about" information for users.</p>
+    </section>
+  </main>
 </body>
 
 </html>

src/app/css/style.css

@@ -27,3 +27,7 @@
 .header nav li a:hover {
   background-color: darkturquoise;
 }
+
+section {
+  margin: 20px 0;
+}

src/app/index.html

@@ -27,9 +27,33 @@
       </ul>
     </nav>
   </header>
-  <div>
-    Some main page text.
-  </div>
+  <main>
+    <h1>Hello</h1>
+    <section id="app-use-warning">
+      <h2>Welcome to example of app for codecetjs tests with typescript.</h2>
+      <p>
+        <b>Don't use it as an example of web-development.</b>
+        <br />
+        Some parts of app have duplications, app has terrific design and its elements are terrible like a web 1.0 pages.
+      </p>
+      <br />
+      <p>Use this app as an E2E test example only.
+        <br />
+        It's not the only truth. But it has the right to exist.
+        <br />
+        Look into folders, see how does files are ordered, how typescript config is set, how tests are placed in one git project with app itself.
+        <br />
+        And make your own solution.
+      </p>
+      <br />
+      <p>Good luck.</p>
+    </section>
+    <section id="app-structure">
+      <h2>Structure of example app</h2>
+      <p>This app is simple and contains several pages: main page, about page</p>
+    </section>
+
+  </main>
 </body>
 
 </html>

src/specs/e2e/pages/about.page.ts

@@ -0,0 +1,11 @@
+"use strict";
+
+const { I } = inject();
+
+module.exports = {
+  aboutSection: "main #about-info",
+  pageHeader: "//main/h1",
+  pageHeaderText: "About",
+  title: "About - Simple app",
+  url: "/",
+};

src/specs/e2e/specs/mainPage.spec.ts

@@ -1,5 +1,7 @@
 "use strict";
 
+import { aboutPage } from "codeceptjs";
+
 Feature("Main page functionality");
 
 Scenario("should see header with links", (I) => {
@@ -11,13 +13,14 @@ Scenario("should see header with links", (I) => {
   });
 });
 
-Scenario("should navigate by header navigation", (I) => {
+Scenario("should navigate by header navigation", (I, about: aboutPage) => {
   I.amOnPage("/");
-  I.see("Some main page text.");
+  I.see("Hello");
 
   I.click("//header[@class='header']//a[@href='/about']");
-  I.see("Some about text.");
+  I.seeElement(about.aboutSection);
+  I.see(about.pageHeaderText, locate(about.pageHeader));
 
   I.click("//header[@class='header']//a[@href='/']");
-  I.see("Some main page text.");
+  I.see("Hello");
 });