Playwright e2e page objects

- Move e2e playwright test to own folder
- Rewrite tests to page objects
- Remove viewer specific param url code from standalone -> move this tests to viewer webtests
- Fix readonly of toolbar (because we now faster activate the toolbar the edit mode is maybe not set to readonly, which cause that edit button are rendered, e.g. if you currently open a process in of an iar project in the Designer)

build/integration/Jenkinsfile

@@ -21,12 +21,12 @@ pipeline {
           docker.build('node-webtest', '-f build/integration/Dockerfile .').inside {
             sh 'yarn update:axonivy:next'
             sh 'yarn install'
-            dir ('integration/standalone/glsp-test-project') {
+            dir ('playwright/glsp-test-project') {
               maven cmd: "-ntp verify -Dengine.page.url=${params.engineSource}"
             }
           }
-          archiveArtifacts artifacts: 'integration/standalone/test-results/**', allowEmptyArchive: true
-          archiveArtifacts artifacts: 'integration/standalone/glsp-test-project/target/**/ivy.log', allowEmptyArchive: true
+          archiveArtifacts artifacts: 'playwright/test-results/**', allowEmptyArchive: true
+          archiveArtifacts artifacts: 'playwright/glsp-test-project/target/**/ivy.log', allowEmptyArchive: true
           withChecks('Integration WebTest') {
             junit testDataPublishers: [[$class: 'StabilityTestDataPublisher']], testResults: 'node_modules/**/report.xml'
           }

integration/standalone/.eslintrc.cjs

@@ -1,7 +1,7 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   extends: ['../../configs/base.eslintrc.json', '../../configs/warnings.eslintrc.json', '../../configs/errors.eslintrc.json'],
-  ignorePatterns: ['**/{css,node_modules,lib}', 'vite.*.js', 'playwright.config.ts'],
+  ignorePatterns: ['**/{css,node_modules,lib}', 'vite.*.js'],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: 'tsconfig.json'

integration/standalone/package.json

@@ -15,7 +15,6 @@
     "@eclipse-glsp/client": "1.1.0-RC10"
   },
   "devDependencies": {
-    "@playwright/test": "1.38.1",
     "@types/uuid": "^9.0.7",
     "@vscode/codicons": "^0.0.25",
     "path-browserify": "^1.0.1",
@@ -28,12 +27,11 @@
   "type": "module",
   "scripts": {
     "clean": "rimraf lib build/* tsconfig.tsbuildinfo",
-    "lint": "eslint --ext .ts,.tsx ./src ./webtests",
+    "lint": "eslint --ext .ts,.tsx ./src",
     "lint:fix": "eslint --fix --ext .ts,.tsx ./src",
     "type": "tsc --noEmit",
     "build": "tsc --build",
     "build:production": "yarn type && vite build",
-    "webtest": "playwright test",
     "start": "vite"
   }
 }

integration/standalone/src/app.ts

@@ -1,36 +1,21 @@
 import {
-  Action,
-  CenterAction,
   configureServerActions,
   EnableToolPaletteAction,
   GLSPActionDispatcher,
   GLSPDiagramServer,
   listen,
+  NavigationTarget,
   RequestModelAction,
   RequestTypeHintsAction,
   SelectAction,
   TYPES
 } from '@eclipse-glsp/client';
-import { ApplicationIdProvider, GLSPClient, NavigationTarget } from '@eclipse-glsp/protocol';
-import {
-  IvyBaseJsonrpcGLSPClient,
-  ivyToolBarModule,
-  IVY_TYPES,
-  overrideIvyViewerOptions,
-  SwitchThemeActionHandler,
-  ToolBar
-} from '@axonivy/process-editor';
+import { ApplicationIdProvider, GLSPClient } from '@eclipse-glsp/protocol';
+import { IvyBaseJsonrpcGLSPClient, SwitchThemeActionHandler } from '@axonivy/process-editor';
 import { MessageConnection } from 'vscode-jsonrpc';
 import createContainer from './di.config';
-import { getParameters, getServerDomain, isInPreviewMode, isInViewerMode, isReadonly, isSecureConnection } from './url-helper';
-import {
-  EnableInscriptionAction,
-  EnableViewportAction,
-  MoveIntoViewportAction,
-  SetViewportZoomAction,
-  SwitchThemeAction,
-  ThemeMode
-} from '@axonivy/process-editor-protocol';
+import { getParameters, getServerDomain, isReadonly, isSecureConnection } from './url-helper';
+import { EnableInscriptionAction, EnableViewportAction, SwitchThemeAction, ThemeMode } from '@axonivy/process-editor-protocol';
 import { MonacoUtil } from '@axonivy/inscription-core';
 import { MonacoEditorUtil } from '@axonivy/inscription-editor';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
@@ -52,9 +37,7 @@ const container = createContainer();
 const pmv = parameters.get('pmv') ?? '';
 const pid = parameters.get('pid') ?? '';
 const givenFile = parameters.get('file') ?? '';
-const highlight = parameters.get('highlight') ?? '';
 const selectElementIds = parameters.get('selectElementIds');
-const zoom = parameters.get('zoom') ?? '';
 const theme = (parameters.get('theme') as ThemeMode) ?? SwitchThemeActionHandler.prefsColorScheme();
 
 const diagramServer = container.get<GLSPDiagramServer>(TYPES.ModelSource);
@@ -76,56 +59,23 @@ async function initialize(connectionProvider: MessageConnection): Promise<void>
   actionDispatcher
     .dispatch(
       RequestModelAction.create({
-        options: { sourceUri: givenFile, app: app, pmv: pmv, pid: pid, highlight: highlight, readonly: isReadonly(), diagramType }
+        options: { sourceUri: givenFile, app: app, pmv: pmv, pid: pid, readonly: isReadonly(), diagramType }
       })
     )
-    .then(() => dispatchAfterModelInitialized(actionDispatcher))
-    .then(() => actionDispatcher.dispatch(RequestTypeHintsAction.create({ requestId: diagramType })))
     .then(() => {
-      if (isInViewerMode() || isInPreviewMode()) {
-        setViewerMode();
-      } else {
-        actionDispatcher.dispatch(EnableToolPaletteAction.create());
+      actionDispatcher.onceModelInitialized().finally(() => {
         MonacoUtil.initStandalone(editorWorker).then(() => MonacoEditorUtil.initMonaco(reactMonaco, theme));
         actionDispatcher.dispatch(EnableInscriptionAction.create({ server: webSocketBase, app, pmv }));
-      }
-      if (!isInPreviewMode()) {
-        actionDispatcher.dispatch(EnableViewportAction.create());
-      }
+        if (selectElementIds) {
+          const elementIds = selectElementIds.split(NavigationTarget.ELEMENT_IDS_SEPARATOR);
+          actionDispatcher.dispatch(SelectAction.create({ selectedElementsIDs: elementIds }));
+        }
+      });
     });
-}
-
-async function dispatchAfterModelInitialized(dispatcher: GLSPActionDispatcher): Promise<void> {
-  const actions: Action[] = [];
-  if (isNumeric(zoom)) {
-    actions.push(SetViewportZoomAction.create({ zoom: +zoom / 100 }));
-    actions.push(...showElement((ids: string[]) => CenterAction.create(ids, { animate: false, retainZoom: true })));
-  } else {
-    actions.push(...showElement((ids: string[]) => MoveIntoViewportAction.create({ elementIds: ids, animate: false, retainZoom: true })));
-  }
-  actions.push(SwitchThemeAction.create({ theme }));
-  return dispatcher.onceModelInitialized().finally(() => dispatcher.dispatchAll(actions));
-}
-
-function showElement(action: (elementIds: string[]) => Action): Action[] {
-  if (highlight) {
-    return [action([highlight])];
-  }
-  if (selectElementIds) {
-    const elementIds = selectElementIds.split(NavigationTarget.ELEMENT_IDS_SEPARATOR);
-    return [SelectAction.create({ selectedElementsIDs: elementIds }), action(elementIds)];
-  }
-  return [];
-}
-
-function isNumeric(num: any): boolean {
-  return !isNaN(parseFloat(num)) && isFinite(num);
-}
-
-function setViewerMode(): void {
-  container.get<ToolBar>(IVY_TYPES.ToolBar).disable();
-  container.unload(ivyToolBarModule);
-  overrideIvyViewerOptions(container, { hideSensitiveInfo: true });
+  actionDispatcher.dispatch(RequestTypeHintsAction.create({ requestId: diagramType }));
+  actionDispatcher.dispatch(EnableToolPaletteAction.create());
+  actionDispatcher.dispatch(EnableViewportAction.create());
+  actionDispatcher.dispatch(SwitchThemeAction.create({ theme }));
 }
 
 websocket.onerror = ev => alert('Connection to server errored. Please make sure that the server is running');

integration/standalone/src/url-helper.ts

@@ -12,15 +12,7 @@ export function isSecureConnection(): boolean {
 }
 
 export function isReadonly(): boolean {
-  return getParameters().get('readonly') === 'true' || isInViewerMode() || isInPreviewMode();
-}
-
-export function isInViewerMode(): boolean {
-  return getParameters().get('mode') === 'viewer';
-}
-
-export function isInPreviewMode(): boolean {
-  return getParameters().get('mode') === 'preview';
+  return getParameters().get('readonly') === 'true';
 }
 
 export function getParameters() {

integration/standalone/tsconfig.json

@@ -2,11 +2,11 @@
   "extends": "../../configs/tsconfig.integration.json",
   "compilerOptions": {
     "rootDir": ".",
-    "rootDirs": ["src", "webtests"],
+    "rootDirs": ["src"],
     "outDir": "lib",
     "noImplicitAny": false
   },
-  "include": ["src", "webtests"],
+  "include": ["src"],
   "references": [
     { "path": "../../packages/inscription/tsconfig.json" },
     { "path": "../../packages/editor/tsconfig.json" }