feat(skeleton): running e2e test

package.json

@@ -32,11 +32,16 @@
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "^5.5.0",
     "@wdio/cli": "^7.16.10",
+    "@wdio/local-runner": "^7.16.10",
+    "@wdio/mocha-framework": "^7.16.6",
+    "@wdio/spec-reporter": "^7.16.9",
+    "chromedriver": "^96.0.0",
     "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "prettier": "^2.5.0",
     "ts-node": "^10.4.0",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "wdio-chromedriver-service": "^7.2.2"
   }
 }

test/example.e2e.ts

@@ -0,0 +1,12 @@
+import LoginPage from "./po/login.page"
+import SecurePage from "./po/secure.page"
+
+describe("My Login application", () => {
+    it("should login with valid credentials", async () => {
+        await LoginPage.open()
+
+        await LoginPage.login("tomsmith", "SuperSecretPassword!")
+        await expect(SecurePage.flashAlert).toBeExisting()
+        await expect(SecurePage.flashAlert).toHaveTextContaining("You logged into a secure area!")
+    })
+})

test/po/login.page.ts

@@ -0,0 +1,42 @@
+import { ChainablePromiseElement } from "webdriverio"
+
+import Page from "./page"
+
+/**
+ * sub page containing specific selectors and methods for a specific page
+ */
+class LoginPage extends Page {
+    /**
+     * define selectors using getter methods
+     */
+    public get inputUsername(): ChainablePromiseElement<Promise<WebdriverIO.Element>> {
+        return $("#username")
+    }
+
+    public get inputPassword(): ChainablePromiseElement<Promise<WebdriverIO.Element>> {
+        return $("#password")
+    }
+
+    public get btnSubmit(): ChainablePromiseElement<Promise<WebdriverIO.Element>> {
+        return $('button[type="submit"]')
+    }
+
+    /**
+     * a method to encapsule automation code to interact with the page
+     * e.g. to login using username and password
+     */
+    public async login(username: string, password: string): Promise<void> {
+        await this.inputUsername.setValue(username)
+        await this.inputPassword.setValue(password)
+        await this.btnSubmit.click()
+    }
+
+    /**
+     * overwrite specific options to adapt it to page object
+     */
+    public open(): Promise<string> {
+        return super.open("login")
+    }
+}
+
+export default new LoginPage()

test/po/page.ts

@@ -0,0 +1,13 @@
+/**
+ * main page object containing all methods, selectors and functionality
+ * that is shared across all page objects
+ */
+export default class Page {
+    /**
+     * Opens a sub page of the page
+     * @param path path of the sub page (e.g. /path/to/page.html)
+     */
+    public open(path: string): Promise<string> {
+        return browser.url(`https://the-internet.herokuapp.com/${path}`)
+    }
+}

test/po/secure.page.ts

@@ -0,0 +1,17 @@
+import { ChainablePromiseElement } from "webdriverio"
+
+import Page from "./page"
+
+/**
+ * sub page containing specific selectors and methods for a specific page
+ */
+class SecurePage extends Page {
+    /**
+     * define selectors using getter methods
+     */
+    public get flashAlert(): ChainablePromiseElement<Promise<WebdriverIO.Element>> {
+        return $("#flash")
+    }
+}
+
+export default new SecurePage()

test/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "types": [
+            "node",
+            "webdriverio/async",
+            "@wdio/mocha-framework",
+            "expect-webdriverio"
+        ],
+        "target": "ES5"
+    }
+}