refactor: 💡 Add a custom click for test helpers

Add a custom click function, it does a workaround for an issue within
playwright. That function has been created in test helpers file

ui/desktop/tests/end2end/authentication.spec.js

@@ -4,6 +4,7 @@ const { _electron: electron } = require('playwright');
 const {
   generateScreenshotPath,
   returnExecutablePath,
+  customClick,
 } = require('./test-helpers');
 
 let electronApp = null;
@@ -29,6 +30,7 @@ test.describe('Authentication end to end test suite', async () => {
   test.describe('user/password authentication test suite', async () => {
     test('Authenticates using user and password method and deauthenticates ', async () => {
       const boundaryWindow = await electronApp.firstWindow(); // The window that contains the app.
+
       // Override local storage origin
       await boundaryWindow.evaluate(() =>
         window.localStorage.setItem('desktop:origin', null)
@@ -47,12 +49,9 @@ test.describe('Authentication end to end test suite', async () => {
       });
 
       // Click the submit button
-      // Due to an error with await boundaryWindow.click('button[type="submit"]'); we are using a workaround.
-      // More info about it here: https://github.com/microsoft/playwright/issues/1808
       await boundaryWindow.waitForSelector('button[type="submit"]');
-      await boundaryWindow.$eval('button[type="submit"]', (element) =>
-        element.click()
-      );
+      await customClick(boundaryWindow, 'button[type="submit"]');
+
       // Fill user & password
       await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
       await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
@@ -64,9 +63,7 @@ test.describe('Authentication end to end test suite', async () => {
 
       // Click submit
       await boundaryWindow.waitForSelector('button[type="submit"]');
-      await boundaryWindow.$eval('button[type="submit"]', (element) =>
-        element.click()
-      );
+      await customClick(boundaryWindow, 'button[type="submit"]');
 
       // Check we are in Targets
       await boundaryWindow.waitForURL('**/#/scopes/global/projects/targets');
@@ -96,14 +93,13 @@ test.describe('Authentication end to end test suite', async () => {
 
       // Clicks Deauthenticate
       await boundaryWindow.waitForSelector('text="Deauthenticate"');
-      await boundaryWindow.$eval('text="Deauthenticate"', (element) =>
-        element.click()
-      );
+      await customClick(boundaryWindow, 'text="Deauthenticate"');
 
       // Makes sure we are log out
       await boundaryWindow.waitForSelector('main >> div.branded-card');
       expect(await boundaryWindow.isVisible('h2 >> text=Authenticate'));
-      // ToDo: create an assertion checking localstorage ember_simple_auth-session key
+      // TODO: create an assertion checking localstorage ember_simple_auth-session key
+      // TODO: try to check we are log out by url
 
       // Take screenshot
       await boundaryWindow.screenshot({
@@ -131,21 +127,16 @@ test.describe('Authentication end to end test suite', async () => {
       });
 
       // Click the submit button
-      // Due to an error with await boundaryWindow.click('button[type="submit"]'); we are using a workaround.
-      // More info about it here: https://github.com/microsoft/playwright/issues/1808
       await boundaryWindow.waitForSelector('button[type="submit"]');
-      await boundaryWindow.$eval('button[type="submit"]', (element) =>
-        element.click()
-      );
+      await customClick(boundaryWindow, 'button[type="submit"]');
+
       // Fill user & password
       await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
       await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
 
       // Click submit
       await boundaryWindow.waitForSelector('button[type="submit"]');
-      await boundaryWindow.$eval('button[type="submit"]', (element) =>
-        element.click()
-      );
+      await customClick(boundaryWindow, 'button[type="submit"]');
 
       // Wait for the notification
       await boundaryWindow.waitForSelector('.rose-notification-body');

ui/desktop/tests/end2end/targets.spec.js

@@ -4,6 +4,7 @@ const { _electron: electron } = require('playwright');
 const {
   generateScreenshotPath,
   returnExecutablePath,
+  customClick,
 } = require('./test-helpers');
 
 let electronApp = null;
@@ -42,21 +43,16 @@ test.describe('Targets end to end test suite', async () => {
     await boundaryWindow.fill('[name=host]', originValue);
 
     // Click the submit button
-    // Due to an error with await boundaryWindow.click('button[type="submit"]'); we are using a workaround.
-    // More info about it here: https://github.com/microsoft/playwright/issues/1808
     await boundaryWindow.waitForSelector('button[type="submit"]');
-    await boundaryWindow.$eval('button[type="submit"]', (element) =>
-      element.click()
-    );
+    await customClick(boundaryWindow, 'button[type="submit"]');
+
     // Fill user & password
     await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
     await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
 
     // Click submit
     await boundaryWindow.waitForSelector('button[type="submit"]');
-    await boundaryWindow.$eval('button[type="submit"]', (element) =>
-      element.click()
-    );
+    await customClick(boundaryWindow, 'button[type="submit"]');
 
     // Check we are in Targets
     await boundaryWindow.waitForURL('**/#/scopes/global/projects/targets');
@@ -65,9 +61,9 @@ test.describe('Targets end to end test suite', async () => {
 
     // Click connect to a target
     await boundaryWindow.waitForSelector('table.rose-table');
-    await boundaryWindow.$eval(
-      'table.rose-table >> tbody >> tr >> nth=0 >> button >> text=Connect',
-      (element) => element.click()
+    await customClick(
+      boundaryWindow,
+      'table.rose-table >> tbody >> tr >> nth=0 >> button >> text=Connect'
     );
 
     // The target popup opens
@@ -82,9 +78,9 @@ test.describe('Targets end to end test suite', async () => {
     });
     // Click copyable in popup
     // TODO: read clipboard value. Running into issues reading clipboard, so will take a shortcut for now
-    await boundaryWindow.$eval(
-      'section.dialog-detail >> div.rose-dialog-body >> button',
-      (element) => element.click()
+    await customClick(
+      boundaryWindow,
+      'section.dialog-detail >> div.rose-dialog-body >> button'
     );
     // Temporary: persist proxy from target
     const persistedProxy = await boundaryWindow.innerText(
@@ -92,16 +88,16 @@ test.describe('Targets end to end test suite', async () => {
     );
 
     // Click close popup
-    await boundaryWindow.$eval(
-      'section.dialog-detail >> footer >> button',
-      (element) => element.click()
+    await customClick(
+      boundaryWindow,
+      'section.dialog-detail >> footer >> button'
     );
 
     // On left nav menu, click Sessions
     await boundaryWindow.waitForSelector('section.rose-layout-global >> aside');
-    await boundaryWindow.$eval(
-      'section.rose-layout-global >> aside >> nav >> a >> text=Sessions',
-      (element) => element.click()
+    await customClick(
+      boundaryWindow,
+      'section.rose-layout-global >> aside >> nav >> a >> text=Sessions'
     );
 
     // Take screenshot

ui/desktop/tests/end2end/test-helpers.js

@@ -42,3 +42,14 @@ exports.returnExecutablePath = (platform, arch) => {
     console.error(error);
   }
 };
+
+/**
+ *
+ * @param {*} appWindow
+ * @param {*} selector
+ */
+exports.customClick = async (appWindow, selector) => {
+  // Due to an error with await appWindow.click('button[type="submit"]'); we are using a workaround.
+  // More info about it here: https://github.com/microsoft/playwright/issues/1808
+  await appWindow.$eval(selector, (element) => element.click());
+};