✨ e2e: playwright frontend (#5717)

odeimaiz · web-flow · commit 1388d44b04c7 · 2024-05-06T15:25:21.000Z
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -42,7 +42,7 @@
         },
         "ObjectPattern": {
           "multiline": true,
-          "minProperties": 1
+          "minProperties": 3
         }
       }
     ],
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -38,6 +38,7 @@ Makefile                                  @pcrespov @sanderegg
 /services/static-webserver/client/        @jsaq007 @odeimaiz @ignapas
 /services/storage/                        @sanderegg
 /services/web/server/                     @pcrespov @sanderegg @GitHK @matusdrobuliak66
+/tests/e2e-frontend/                      @odeimaiz
 /tests/e2e-playwright/                    @matusdrobuliak66
 /tests/environment-setup/                 @pcrespov
 /tests/performance/                       @pcrespov @sanderegg
diff --git a/services/static-webserver/client/source/class/osparc/data/model/Workbench.js b/services/static-webserver/client/source/class/osparc/data/model/Workbench.js
@@ -286,9 +286,9 @@ qx.Class.define("osparc.data.model.Workbench", {
         }
       };
       await osparc.data.Resources.fetch("studies", "addNode", params).catch(err => {
-        let errorMsg = this.tr("Error creating ") + key + ":" + version;
+        let errorMsg = qx.locale.Manager.tr("Error creating ") + key + ":" + version;
         if ("status" in err && err.status === 406) {
-          errorMsg = key + ":" + version + this.tr(" is retired");
+          errorMsg = key + ":" + version + qx.locale.Manager.tr(" is retired");
         }
         const errorMsgData = {
           msg: errorMsg,
diff --git a/services/static-webserver/client/source/class/osparc/store/Support.js b/services/static-webserver/client/source/class/osparc/store/Support.js
@@ -163,6 +163,7 @@ qx.Class.define("osparc.store.Support", {
       const createAccountWindow = new osparc.ui.window.Dialog("Create Account").set({
         maxWidth: 380
       });
+      osparc.utils.Utils.setIdToWidget(createAccountWindow, "createAccountWindow");
       const vendor = osparc.store.VendorInfo.getInstance().getVendor();
       if ("invitation_url" in vendor) {
         const displayName = osparc.store.StaticInfo.getInstance().getDisplayName();
diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/PoweredByOsparc.js b/services/static-webserver/client/source/class/osparc/ui/basic/PoweredByOsparc.js
@@ -24,6 +24,8 @@ qx.Class.define("osparc.ui.basic.PoweredByOsparc", {
   construct: function() {
     this.base(arguments);
 
+    osparc.utils.Utils.setIdToWidget(this, "poweredByOsparc");
+
     this._setLayout(new qx.ui.layout.VBox(2));
 
     this.set({
diff --git a/tests/e2e-frontend/.gitignore b/tests/e2e-frontend/.gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/playwright-report/
+/test-results/
+users.json
diff --git a/tests/e2e-frontend/Makefile b/tests/e2e-frontend/Makefile
@@ -0,0 +1,14 @@
+install-dev:
+	npm install
+
+.PHONY: run-tests
+run-tests: install-dev ## run tests headless
+	npx playwright test
+
+.PHONY: run-tests-headed
+run-tests-headed: install-dev ## run tests headed (you can see what's going on)
+	npx playwright test --headed
+
+.PHONY: run-tests-ui
+run-tests-ui: install-dev ## run tests headed with an assistance GUI
+	npx playwright test --ui
diff --git a/tests/e2e-frontend/README.md b/tests/e2e-frontend/README.md
@@ -0,0 +1,17 @@
+# e2e tests using [playwright](https://playwright.dev/) for testing mainly the frontend against the master deployment
+
+## Install dependencies
+npm install
+
+## Run tests
+npm run tests
+
+## Run one test
+npx playwright test tests/init/statics.spec.js
+
+
+## Products
+Tets will run against the urls (products) defined in the products.json file
+
+## Users
+In order to provide a list of users, required for some tests, copy users.template.json to users.json and fill up the details
diff --git a/tests/e2e-frontend/package-lock.json b/tests/e2e-frontend/package-lock.json
diff --git a/tests/e2e-frontend/package.json b/tests/e2e-frontend/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "e2e-frontend",
+  "version": "1.0.0",
+  "description": "Run test locally with headed mode",
+  "main": "index.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "tests": "npx playwright test",
+    "tests-headed": "npx playwright test --headed",
+    "tests-ui": "npx playwright test --ui"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.43.1",
+    "@types/node": "^20.12.7"
+  }
+}
diff --git a/tests/e2e-frontend/playwright.config.js b/tests/e2e-frontend/playwright.config.js
@@ -0,0 +1,67 @@
+/* eslint-disable no-undef */
+
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './tests',
+  /* Do not run tests in files in parallel */
+  fullyParallel: false,
+  /* And make sure they run one after the other */
+  workers: 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Basic Options */
+    // Base URL to use in actions like `await page.goto('/')`
+    // baseURL: 'http://127.0.0.1:9081',
+
+    /* Emulation Options */
+    // oSPARC min: HD 1280x720
+    viewport: {
+      width: 1280,
+      height: 720
+    },
+
+    /* Recording Options */
+    screenshot: 'only-on-failure',
+    // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
+    trace: 'retain-on-failure',
+    video: 'off',
+
+    /* Other Options */
+    // Name of the browser that runs tests. For example `chromium`, `firefox`, `webkit`.
+    // browserName: 'chromium',
+    // Run browser in headless mode.
+    // headless: false,
+    // Change the default data-testid attribute.
+    testIdAttribute: 'osparc-test-id',
+
+    /* More browser and context options */
+    launchOptions: {
+      slowMo: 50,
+    },
+  },
+
+  /* Configure projects for major browsers */
+  projects: [{
+    name: 'chromium',
+    use: {
+      ...devices['Desktop Chrome']
+    },
+  }, {
+    name: 'firefox',
+    use: {
+      ...devices['Desktop Firefox']
+    },
+  }],
+});
diff --git a/tests/e2e-frontend/tests/fixtures/loginPage.js b/tests/e2e-frontend/tests/fixtures/loginPage.js
@@ -0,0 +1,36 @@
+export class LoginPage {
+  /**
+   * @param {import('@playwright/test').Page} page
+   * @param {string} productUrl
+   */
+  constructor(page, productUrl) {
+    this.page = page;
+    this.productUrl = productUrl;
+  }
+
+  async goto() {
+    await this.page.goto(this.productUrl);
+  }
+
+  /**
+   * @param {string} email
+   * @param {string} password
+   */
+  async login(email, password) {
+    const usernameField = this.page.getByTestId("loginUserEmailFld");
+    const passwordField = this.page.getByTestId("loginPasswordFld");
+    const submitButton = this.page.getByTestId("loginSubmitBtn");
+
+    await usernameField.fill(email);
+    await passwordField.fill(password);
+    await submitButton.click();
+  }
+
+  async logout() {
+    const navUserMenuButton = this.page.getByTestId("userMenuBtn");
+    await navUserMenuButton.click();
+
+    const navLogoutButton = this.page.getByTestId("userMenuLogoutBtn");
+    await navLogoutButton.click();
+  }
+}
diff --git a/tests/e2e-frontend/tests/init/openGraph.spec.js b/tests/e2e-frontend/tests/init/openGraph.spec.js
@@ -0,0 +1,28 @@
+/* eslint-disable no-undef */
+
+const { test, expect } = require('@playwright/test');
+
+import products from '../products.json';
+import appsMetadata from '../../../../services/static-webserver/client/scripts/apps_metadata.json';
+
+for (const product in products) {
+  test(`Open Graph attributes ${product}`, async ({ page }) => {
+    const app = appsMetadata.applications.find(app => app.application === product);
+    expect(app).toBeDefined();
+
+    const title = app.replacements.replace_me_og_title;
+    const description = app.replacements.replace_me_og_description;
+    const image = app.replacements.replace_me_og_image;
+
+    await page.goto(products[product]);
+
+    const ogTitle = page.locator('meta[property="og:title"]');
+    await expect(ogTitle).toHaveAttribute('content', title);
+
+    const ogDescription = page.locator('meta[property="og:description"]');
+    await expect(ogDescription).toHaveAttribute('content', description);
+
+    const ogImage = page.locator('meta[property="og:image"]');
+    await expect(ogImage).toHaveAttribute('content', image);
+  });
+}
diff --git a/tests/e2e-frontend/tests/init/statics.spec.js b/tests/e2e-frontend/tests/init/statics.spec.js
@@ -0,0 +1,44 @@
+/* eslint-disable no-undef */
+
+const { test, expect } = require('@playwright/test');
+
+import products from '../products.json';
+
+const expectedStatics = {
+  "osparc": {
+    "displayName": "o²S²PARC",
+    "isPaymentEnabled": false
+  },
+  "s4l": {
+    "displayName": "Sim4Life",
+    "isPaymentEnabled": true
+  },
+  "s4lacad": {
+    "displayName": "Sim4Life Science",
+    "isPaymentEnabled": true
+  },
+  "s4llite": {
+    "displayName": "<i>S4L<sup>lite</sup></i>",
+    "isPaymentEnabled": false
+  },
+  "tis": {
+    "displayName": "TI Planning Tool",
+    "isPaymentEnabled": true
+  },
+};
+
+for (const product in products) {
+  test(`statics response in ${product}`, async ({ page }) => {
+    expect(expectedStatics[product]).toBeDefined();
+
+    const responsePromise = page.waitForResponse('**/static-frontend-data.json');
+    await page.goto(products[product]);
+
+    const response = await responsePromise;
+    const statics = await response.json();
+
+    for (const staticKey in expectedStatics[product]) {
+      expect(statics[staticKey]).toBe(expectedStatics[product][staticKey]);
+    }
+  });
+}
diff --git a/tests/e2e-frontend/tests/login/invitationRequired.spec.js b/tests/e2e-frontend/tests/login/invitationRequired.spec.js
diff --git a/tests/e2e-frontend/tests/navigationBar/navigationBar.spec.js b/tests/e2e-frontend/tests/navigationBar/navigationBar.spec.js
diff --git a/tests/e2e-frontend/tests/products.json b/tests/e2e-frontend/tests/products.json
diff --git a/tests/e2e-frontend/tests/users.template.json b/tests/e2e-frontend/tests/users.template.json

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@`
`42`	`42`	`},`
`43`	`43`	`"ObjectPattern": {`
`44`	`44`	`"multiline": true,`
`45`		`- "minProperties": 1`
	`45`	`+ "minProperties": 3`
`46`	`46`	`}`
`47`	`47`	`}`
`48`	`48`	`],`
Original file line number	Diff line number	Diff line change
`@@ -286,9 +286,9 @@ qx.Class.define("osparc.data.model.Workbench", {`
`286`	`286`	`}`
`287`	`287`	`};`
`288`	`288`	`await osparc.data.Resources.fetch("studies", "addNode", params).catch(err => {`
`289`		`- let errorMsg = this.tr("Error creating ") + key + ":" + version;`
	`289`	`+ let errorMsg = qx.locale.Manager.tr("Error creating ") + key + ":" + version;`
`290`	`290`	`if ("status" in err && err.status === 406) {`
`291`		`- errorMsg = key + ":" + version + this.tr(" is retired");`
	`291`	`+ errorMsg = key + ":" + version + qx.locale.Manager.tr(" is retired");`
`292`	`292`	`}`
`293`	`293`	`const errorMsgData = {`
`294`	`294`	`msg: errorMsg,`