test: Add BDD UI tests using Playwright (#911)

client/tests/acceptance/pageObjects/DashboardPage.js

@@ -0,0 +1,16 @@
+class DashboardPage {
+  constructor() {
+    this.createProjectIconSelector = `.Projects_addTitle__tXhB4`;
+    this.projectTitleInputSelector = `input[name="name"]`;
+    this.createProjectButtonSelector = `//button[text()="Create project"]`;
+    this.projectTitleSelector = `//div[@class="item Header_item__OOEY7 Header_title__l+wMf"][text()="%s"]`;
+  }
+
+  async createProject(project) {
+    await page.click(this.createProjectIconSelector);
+    await page.fill(this.projectTitleInputSelector, project);
+    await page.click(this.createProjectButtonSelector);
+  }
+}
+
+module.exports = DashboardPage;

client/tests/acceptance/pageObjects/LoginPage.js

@@ -0,0 +1,38 @@
+const config = require(`../config`);
+
+class LoginPage {
+  constructor() {
+    // url
+    this.homeUrl = config.baseUrl;
+    this.loginUrl = `${this.homeUrl}login`;
+
+    // selectors
+    this.loginButtonSelector = `//i[@class="right arrow icon"]`;
+    this.usernameSelector = `//input[@name='emailOrUsername']`;
+    this.passwordSelector = `//input[@name='password']`;
+    this.errorMessageSelector = `//div[@class='ui error visible message']`;
+    this.userActionSelector = `//span[@class="User_initials__9Wp90"]`;
+    this.logOutSelector = `//a[@class="item UserStep_menuItem__5pvtT"][contains(text(),'Log Out')]`;
+  }
+
+  async goToLoginUrl() {
+    await page.goto(this.loginUrl);
+  }
+
+  async logOut() {
+    await page.click(this.userActionSelector);
+    await page.click(this.logOutSelector);
+  }
+
+  async login(username, password) {
+    await page.fill(this.usernameSelector, username);
+    await page.fill(this.passwordSelector, password);
+    await page.click(this.loginButtonSelector);
+  }
+
+  async getErrorMessage() {
+    return page.innerText(this.errorMessageSelector);
+  }
+}
+
+module.exports = LoginPage;

client/tests/acceptance/pageObjects/dashboardPage.js

@@ -1,20 +0,0 @@
-module.exports = {
-  url: function () {
-    return this.api.launchUrl + "/dashboard";
-  },
-  commands: {
-    isDashboardPage: async function () {
-      let result = false;
-      await this.waitForElementVisible("@dashboardHeader");
-      await this.isVisible("@dashboardHeader", (res) => {
-        result = res.value;
-      });
-      return result;
-    },
-  },
-  elements: {
-    dashboardHeader: {
-      selector: "a.Header_title__3SEjb",
-    },
-  },
-};

client/tests/acceptance/pageObjects/loginPage.js

@@ -1,26 +0,0 @@
-module.exports = {
-  url: function () {
-    return this.api.launchUrl + "/login";
-  },
-  commands: {
-    logIn: function (email, password) {
-      return this.waitForElementVisible("@emailInput")
-        .setValue("@emailInput", email)
-        .waitForElementVisible("@passwordInput")
-        .setValue("@passwordInput", password)
-        .waitForElementVisible("@loginBtn")
-        .click("@loginBtn");
-    },
-  },
-  elements: {
-    emailInput: {
-      selector: "input[name=emailOrUsername]",
-    },
-    passwordInput: {
-      selector: "input[name=password]",
-    },
-    loginBtn: {
-      selector: "form button",
-    },
-  },
-};