test(playwright): multiple servers

Author: henningn

README.md

@@ -147,6 +147,31 @@ docker compose up
 Browse to the local URL http://localhost:8080/
 The different server can be accessed by increasing the port number by 1.
 
+### Integration tests
+
+Currently, not all integration tests are migrated to Playwright. So there are Jasmine and Playwright tests.
+
+#### Jasmine
+
+```shell
+cd tobago-example/tobago-example-demo
+mvn clean verify -Pdocker -Pintegration-tests
+```
+
+#### Playwright
+
+Start servers as described in [Docker compose](#Docker-compose).
+
+```shell
+cd tobago-example/tobago-example-demo
+npm run test
+```
+
+* test with different browsers `npm run test`
+* test with Firefox`npm run test:firefox`
+* test with Google Chrome `npm run test:chrome`
+* test with different browsers on different servers `npm run test:all-servers`
+
 # Issue Tracking
 
 If you find any issues regarding MyFaces Tobago you can use

tobago-example/tobago-example-demo/package.json

@@ -13,7 +13,7 @@
   },
   "homepage": "https://myfaces.apache.org/tobago/",
   "scripts": {
-    "build": "npm-run-all --parallel ts css fa jasmine test",
+    "build": "npm-run-all --parallel ts css fa jasmine",
     "css": "npm-run-all css-compile css-prefix css-minify",
     "css-lint": "echo 'Not implemented yet!'",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css --load-path=./ src/main/scss/demo.scss:src/main/webapp/css/demo.css",
@@ -33,7 +33,10 @@
     "rollup": "rollup --config",
     "update-check": "npx npm-check-updates",
     "update-execute": "npx npm-check-updates -u",
-    "test": "echo 'Skipping'"
+    "test": "npx playwright test",
+    "test:chrome": "npx playwright test --project='Jetty - Google Chrome'",
+    "test:firefox": "npx playwright test --project='Jetty - Firefox'",
+    "test:all-servers": "npx playwright test --config=playwright.servers.config.ts"
   },
   "dependencies": {
     "font-awesome": "4.7.0",

tobago-example/tobago-example-demo/playwright.config.ts

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import {defineConfig, devices} from "@playwright/test";
+import {devices, PlaywrightTestConfig} from "@playwright/test";
 
-export default defineConfig({
+const defaultConfig: PlaywrightTestConfig = {
   testDir: "./src/test/typescript",
   outputDir: "./target/test-results",
   reporter: [["html", {outputFolder: "./target/playwright-report"}]],
@@ -44,18 +44,8 @@ export default defineConfig({
     {
       name: "Jetty - Safari",
       use: {baseURL: "http://localhost:8080", ...devices["Desktop Safari"]}
-    },
-    {
-      name: "Open Liberty - Chromium",
-      use: {baseURL: "http://localhost:8081", ...devices["Desktop Chrome"]}
-    },
-    {
-      name: "Tomcat - Chromium",
-      use: {baseURL: "http://localhost:8082", ...devices["Desktop Chrome"]}
-    },
-    {
-      name: "TomEE - Chromium",
-      use: {baseURL: "http://localhost:8083", ...devices["Desktop Chrome"]}
     }
   ]
-});
+};
+
+export default defaultConfig;

…mo/src/test/typescript/base/Functions.ts …xample-demo/playwright.servers.config.tstobago-example/tobago-example-demo/src/test/typescript/base/Functions.ts renamed to tobago-example/tobago-example-demo/playwright.servers.config.ts tobago-example/tobago-example-demo/src/test/typescript/base/Functions.ts renamed to tobago-example/tobago-example-demo/playwright.servers.config.ts

@@ -17,19 +17,26 @@
  * under the License.
  */
 
-import {Page, TestInfo, TestType} from "@playwright/test";
+import {devices, PlaywrightTestConfig} from "@playwright/test";
+import defaultConfig from "./playwright.config";
 
-export async function goto(test: TestType<any, any>, page: Page, testInfo: TestInfo, url: string): Promise<void> {
-  const baseURL = testInfo.project.use.baseURL;
-
-  try {
-    const response = await fetch(baseURL);
-    if (response.ok) {
-      await page.goto(url);
-    } else {
-      test.skip(true, baseURL + " not available; " + response.status + " - " + response.statusText);
+const serversConfig: PlaywrightTestConfig = {
+  ...defaultConfig,
+  projects: [
+    ...defaultConfig.projects,
+    {
+      name: "Open Liberty - Chromium",
+      use: {baseURL: "http://localhost:8081", ...devices["Desktop Chrome"]}
+    },
+    {
+      name: "Tomcat - Chromium",
+      use: {baseURL: "http://localhost:8082", ...devices["Desktop Chrome"]}
+    },
+    {
+      name: "TomEE - Chromium",
+      use: {baseURL: "http://localhost:8083", ...devices["Desktop Chrome"]}
     }
-  } catch {
-    test.skip(true, baseURL + " not available");
-  }
-}
+  ]
+};
+
+export default serversConfig;

tobago-example/tobago-example-demo/src/test/typescript/columnSelector.test.ts

@@ -18,12 +18,11 @@
  */
 
 import {expect, test} from "@playwright/test";
-import {goto} from "./base/Functions";
 
 test.describe("sheet/columnSelector/ajax/ajax.xhtml", () => {
 
   test.beforeEach(async ({page}, testInfo) => {
-    await goto(test, page, testInfo, "/content/900-test/sheet/columnSelector/ajax/ajax.xhtml");
+    await page.goto("/content/900-test/sheet/columnSelector/ajax/ajax.xhtml");
   });
 
   test("immediate=true, ajax=enabled", async ({page}) => {

tobago-example/tobago-example-demo/src/test/typescript/selectManyList.test.ts

@@ -18,12 +18,11 @@
  */
 
 import {expect, test} from "@playwright/test";
-import {goto} from "./base/Functions";
 
 test.describe("900-test/2100-selectManyList/deselect/deselect.xhtml", () => {
 
   test.beforeEach(async ({page}, testInfo) => {
-    await goto(test, page, testInfo, "/content/900-test/selectManyList/deselect/deselect.xhtml");
+    await page.goto("/content/900-test/selectManyList/deselect/deselect.xhtml");
   });
 
   test("tc:selectManyList: deselect", async ({page}) => {

tobago-example/tobago-example-demo/src/test/typescript/sheet.test.ts

@@ -19,12 +19,11 @@
 
 import {expect, test} from "@playwright/test";
 import {Table} from "./base/bootstrap-variables";
-import {goto} from "./base/Functions";
 
 test.describe("sheet/columnNode/ColumnNode.xhtml", () => {
 
   test.beforeEach(async ({page}, testInfo) => {
-    await goto(test, page, testInfo, "/content/900-test/sheet/columnNode/ColumnNode.xhtml");
+    await page.goto("/content/900-test/sheet/columnNode/ColumnNode.xhtml");
   });
 
   test("Open the 'World' node to see 'Carib' and 'Africa'", async ({page}) => {
@@ -124,7 +123,7 @@ test.describe("sheet/columnNode/ColumnNode.xhtml", () => {
 test.describe("sheet/columnPanel/ColumnPanel.xhtml", () => {
 
   test.beforeEach(async ({page}, testInfo) => {
-    await goto(test, page, testInfo, "content/900-test/sheet/columnPanel/ColumnPanel.xhtml");
+    await page.goto("content/900-test/sheet/columnPanel/ColumnPanel.xhtml");
   });
 
   test("Markup 'striped'", async ({page}) => {

tobago-example/tobago-example-demo/src/test/typescript/tabGroup.test.ts

@@ -20,12 +20,11 @@
 import {expect, Locator, test} from "@playwright/test";
 import {Color} from "./base/browser-styles";
 import {Card, Nav, Root} from "./base/bootstrap-variables";
-import {goto} from "./base/Functions";
 
 test.describe("tabGroup/style/Style.xhtml", () => {
 
   test.beforeEach(async ({page}, testInfo) => {
-    await goto(test, page, testInfo, "/content/900-test/tabGroup/style/Style.xhtml");
+    await page.goto("/content/900-test/tabGroup/style/Style.xhtml");
   });
 
   test("tc:tabGroup: Tabgroup_Style", async ({page}) => {
@@ -207,7 +206,7 @@ test.describe("tabGroup/style/Style.xhtml", () => {
 test.describe("tabGroup/file_immediate/File_immediate.xhtml", () => {
 
   test.beforeEach(async ({page}, testInfo) => {
-    await goto(test, page, testInfo, "/content/900-test/tabGroup/file_immediate/File_immediate.xhtml");
+    await page.goto("/content/900-test/tabGroup/file_immediate/File_immediate.xhtml");
   });
 
   test("Select tab 'Two', press OK, select tab 'One', press OK", async ({page}) => {