Reduce flakiness

examples/workflow-test/playwright.config.ts

@@ -34,7 +34,7 @@ const config: PlaywrightTestConfig<GLSPPlaywrightOptions> = {
     },
     fullyParallel: true,
     forbidOnly: !!process.env.CI,
-    retries: process.env.CI ? 2 : 1,
+    retries: process.env.CI ? 2 : 0,
     reporter: process.env.CI ? [['html', { open: 'never' }], ['@estruyf/github-actions-reporter']] : [['html', { open: 'never' }]],
     use: {
         actionTimeout: 0,

examples/workflow-test/src/app/workflow-app.ts

@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { GLSPSemanticApp } from '@eclipse-glsp/glsp-playwright';
+import { expect } from '@eclipse-glsp/glsp-playwright/lib/test';
 import { WorkflowToolPalette } from '../features/tool-palette/workflow-tool-palette';
 import { WorkflowGraph } from '../graph/workflow.graph';
 
@@ -28,4 +29,12 @@ export class WorkflowApp extends GLSPSemanticApp {
     protected override createToolPalette(): WorkflowToolPalette {
         return new WorkflowToolPalette({ locator: WorkflowToolPalette.locate(this) });
     }
+
+    /**
+     * Wait for the application to be ready.
+     * The server can take some time to send the data.
+     */
+    async waitForReady(): Promise<void> {
+        await expect(this.locate().getByText('Push')).toBeVisible();
+    }
 }

examples/workflow-test/tests/core/connectable-element.spec.ts

@@ -30,6 +30,7 @@ test.describe('The edge accessor of a connectable element', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 

examples/workflow-test/tests/core/debug.standalone.spec.ts

@@ -46,7 +46,7 @@ const expectedElementMetadata = {
 const expectedGLSPLocatorData = [
     {
         locator:
-            "locator('body').locator('div.sprotty:not(.sprotty-hidden)').locator('[data-svg-metadata-type=\"graph\"]').locator('[id$=\"task_Push\"]').and(locator('body').locator('div.sprotty:not(.sprotty-hidden)').locator('[data-svg-metadata-type=\"graph\"]').locator('[data-svg-metadata-type=\"task:manual\"]'))",
+            "locator('body').locator('div.sprotty:not(.sprotty-hidden)').locator('[data-svg-metadata-type=\"graph\"]').locator('[id$=\"task_Push\"]').and(locator('body').locator('[data-svg-metadata-type=\"task:manual\"]'))",
         children: [
             '<g id="sprotty_task_Push" transform="translate(70, 100)" data-svg-metadata-type="task:manual" data-svg-metadata-parent-id="sprotty_sprotty" class="node task manual">...</g>'
         ]
@@ -67,6 +67,7 @@ test.describe('The debug functions', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 

examples/workflow-test/tests/core/edge.spec.ts

@@ -30,6 +30,7 @@ test.describe('Edges', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 

examples/workflow-test/tests/core/features/context-menu.spec.ts

@@ -25,6 +25,7 @@ test.describe('The context menu', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         contextMenu = app.contextMenu;
     });
 

examples/workflow-test/tests/core/graph.spec.ts

@@ -29,6 +29,7 @@ test.describe('The graph', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 

examples/workflow-test/tests/core/parent.spec.ts

@@ -29,6 +29,7 @@ test.describe('The children accessor of a parent element', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 

examples/workflow-test/tests/core/shortcuts.spec.ts

@@ -28,6 +28,7 @@ test.describe('Shortcuts', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 

examples/workflow-test/tests/features/change-bounds/resize-handle.spec.ts

@@ -28,6 +28,7 @@ test.describe('The resizing handle', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 

examples/workflow-test/tests/features/command-palette/command-palette.spec.ts

@@ -33,6 +33,7 @@ test.describe('The command palette', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
         globalCommandPalette = app.globalCommandPalette;
         server = glspServer;

examples/workflow-test/tests/features/hover/popup.spec.ts

@@ -78,6 +78,7 @@ test.describe('The popup', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
         expectedManualPopupText.setServer(glspServer);
         expectedAutomatedPopupText.setServer(glspServer);

examples/workflow-test/tests/features/label-edit/label-edit-tool.spec.ts

@@ -28,6 +28,7 @@ test.describe('The label edit tool', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 
@@ -45,6 +46,7 @@ test.describe('The label edit tool', () => {
         await node.page.keyboard.press('F2');
         await node.page.keyboard.type('New Label');
         await node.page.keyboard.press('Enter');
+        await app.labelEditor.waitForHidden();
 
         expect(await node.label).toBe('New Label');
     });
@@ -58,7 +60,7 @@ test.describe('The label edit tool', () => {
         await node.page.keyboard.press('Backspace');
         await node.page.keyboard.press('Enter');
 
-        await expect(await app.labelEditor.getWarning()).toBe('Name must not be empty');
+        expect(await app.labelEditor.getWarning()).toBe('Name must not be empty');
     });
 
     test.afterEach(async ({ integration }) => {

examples/workflow-test/tests/features/routing/routing-point.spec.ts

@@ -28,6 +28,7 @@ test.describe('The routing points of an edge', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 

examples/workflow-test/tests/features/select/select.spec.ts

@@ -28,6 +28,7 @@ test.describe('The select feature', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 
@@ -77,7 +78,7 @@ test.describe('The select feature', () => {
         await app.page.keyboard.press('Control+A');
         await expect(graph).toHaveSelected({
             type: PModelElement,
-            elements: await graph.getAllModelElements()
+            elements: () => graph.getAllModelElements()
         });
     });
 

examples/workflow-test/tests/features/tool-palette/tool-palette.spec.ts

@@ -28,6 +28,7 @@ test.describe('The tool palette', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
         toolPalette = app.toolPalette;
     });

examples/workflow-test/tests/features/tools/deletion/deletion-tool.spec.ts

@@ -30,6 +30,7 @@ test.describe('The deletion tool', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
         toolPalette = app.toolPalette;
     });

examples/workflow-test/tests/features/tools/edge-creation/edge-creation-tool.spec.ts

@@ -35,6 +35,7 @@ test.describe('The edge creation tool', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
         toolPalette = app.toolPalette;
     });

examples/workflow-test/tests/features/tools/edge-edit/edge-edit-tool.spec.ts

@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { expect, test } from '@eclipse-glsp/glsp-playwright';
+import { PMetadata, VolatileRoutingPoint } from '@eclipse-glsp/glsp-playwright/src/glsp';
 import { WorkflowApp } from '../../../../src/app/workflow-app';
 import { Edge } from '../../../../src/graph/elements/edge.po';
 import { TaskAutomated } from '../../../../src/graph/elements/task-automated.po';
@@ -30,6 +31,7 @@ test.describe('The edge edit tool', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 
@@ -59,7 +61,9 @@ test.describe('The edge edit tool', () => {
         expect(volatilePoints).toHaveLength(1);
 
         const volatilePoint = volatilePoints[0];
-        await volatilePoint.dragToRelativePosition({ x: 50, y: 50 });
+        await app.graph.waitForReplacement(PMetadata.getType(VolatileRoutingPoint), async () => {
+            await volatilePoint.dragToRelativePosition({ x: 50, y: 50 });
+        });
 
         points = await routingPoints.points();
         expect(points).toHaveLength(currentPointsLength + 1);
@@ -81,7 +85,9 @@ test.describe('The edge edit tool', () => {
         expect(volatilePoints).toHaveLength(1);
 
         // Middle one
-        await volatilePoints[0].dragToRelativePosition({ x: 0, y: 50 });
+        await app.graph.waitForReplacement(PMetadata.getType(VolatileRoutingPoint), async () => {
+            await volatilePoints[0].dragToRelativePosition({ x: 0, y: 50 });
+        });
 
         points = await routingPoints.points();
         expect(points).toHaveLength(currentPointsLength + 1);
@@ -91,8 +97,9 @@ test.describe('The edge edit tool', () => {
 
         // Junction
         const junction = points.find(p => p.lastSnapshot?.kind === 'junction')!;
-        await junction.dragToRelativePosition({ x: 20, y: -40 });
-        await junction.waitForHidden();
+        await app.graph.waitForHide(junction.locator, async () => {
+            await junction.dragToRelativePosition({ x: 20, y: -40 });
+        });
 
         points = await routingPoints.points();
         expect(points).toHaveLength(currentPointsLength);

examples/workflow-test/tests/features/tools/node-creation/node-creation-tool.spec.ts

@@ -36,6 +36,7 @@ test.describe('The node creation tool', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
         toolPalette = app.toolPalette;
         taskManualCreatedLabel = TaskManualNodes.createdLabel(glspServer);
@@ -69,6 +70,7 @@ test.describe('The node creation tool', () => {
             await paletteItem.click();
 
             await expect(graph).toContainClass(CursorCSS.NODE_CREATION);
+
             const node = await graph.getNodeByLabel(TaskManualNodes.pushLabel, TaskManual);
             const bounds = await node.bounds();
             await bounds.position('bottom_left').moveRelative(0, 60).click();

examples/workflow-test/tests/features/undo-redo/undo-redo.spec.ts

@@ -31,6 +31,7 @@ test.describe('The undo redo trigger', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
         trigger = provideUndoRedoTriggerVariable(integration, app).get();
     });

examples/workflow-test/tests/features/validation/marker-navigator.spec.ts

@@ -40,6 +40,7 @@ test.describe('The marker navigator', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
         navigator = provideMarkerNavigatorVariable(integration, app).get();
         await navigator.trigger();

examples/workflow-test/tests/features/validation/marker.spec.ts

@@ -30,6 +30,7 @@ test.describe('The marker', () => {
             type: 'integration',
             integration
         });
+        await app.waitForReady();
         graph = app.graph;
     });
 

packages/glsp-playwright/src/debug/utils.ts

@@ -22,6 +22,7 @@ export interface DebugNode {
     type: string | null;
     parent: string | null;
     html: string | null;
+    class: string | null;
     children: DebugNode[];
 }
 
@@ -57,7 +58,8 @@ export async function extractElement(locator: Locator): Promise<DebugNode> {
         type: await locator.getAttribute(SVGMetadata.type),
         parent: await locator.getAttribute(SVGMetadata.parentId),
         children: [],
-        html: await (await locator.allTextContents()).join(',')
+        html: (await locator.allTextContents()).join(','),
+        class: await locator.getAttribute('class')
     };
 }
 

packages/glsp-playwright/src/glsp/app/app.po.ts

@@ -127,6 +127,10 @@ export class GLSPApp {
         this.locator = this.rootLocator.child(this.sprottySelector);
     }
 
+    locate(): Locator {
+        return this.locator.locate();
+    }
+
     protected createGraph(_options: GLSPAppOptions): GLSPGraph {
         return new GLSPSemanticGraph({ locator: GLSPGraph.locate(this) });
     }

packages/glsp-playwright/src/glsp/features/routing/routing-point.po.ts

@@ -17,7 +17,6 @@ import type { Locator } from '@playwright/test';
 import type { AutoPrepareOptions, AutoWaitOptions } from '~/extension';
 import { Clickable, Mix, useDraggableFlow } from '~/extension';
 import { ModelElementMetadata, PEdge, PMetadata, PModelElement, PModelElementData, PModelElementSnapshot, SVGMetadata } from '~/glsp/graph';
-import type { GLSPLocator } from '~/remote';
 import type { Position } from '~/types';
 import { definedAttr, definedGLSPAttr } from '~/utils/ts.utils';
 
@@ -55,9 +54,9 @@ export class RoutingPoints {
         for await (const childLocator of await this.pointsLocator.all()) {
             const id = await definedAttr(childLocator, 'id');
 
-            const routingPoint = new RoutingPoint(this.element.locator.child(`id=${id}`), this);
-            await routingPoint.snapshot();
-            elements.push(routingPoint);
+            const point = new RoutingPoint({ locator: this.element.locator.child(`id=${id}`), routingPoints: this });
+            await point.snapshot();
+            elements.push(point);
         }
 
         return elements;
@@ -66,14 +65,17 @@ export class RoutingPoints {
     async volatilePoints(options?: AutoWaitOptions): Promise<VolatileRoutingPoint[]> {
         await this.autoWait(options);
 
-        const elements: RoutingPoint[] = [];
+        const elements: VolatileRoutingPoint[] = [];
 
         for await (const childLocator of await this.volatilePointsLocator.all()) {
             const id = await definedAttr(childLocator, 'id');
 
-            const routingPoint = new RoutingPoint(this.element.locator.child(`id=${id}`), this);
-            await routingPoint.snapshot();
-            elements.push(routingPoint);
+            const point = new VolatileRoutingPoint({
+                locator: this.element.locator.child(`id=${id}`),
+                routingPoints: this
+            });
+            await point.snapshot();
+            elements.push(point);
         }
 
         return elements;
@@ -84,12 +86,16 @@ export interface RoutingPointSnapshot extends PModelElementSnapshot {
     kind: RoutingPointKind;
 }
 
+export interface BaseRoutingPointData extends PModelElementData {
+    routingPoints: RoutingPoints;
+}
+
 const BaseRoutingPointMixin = Mix(PModelElement).flow(useDraggableFlow).build();
 export abstract class BaseRoutingPoint extends BaseRoutingPointMixin {
     readonly routingPoints;
     override lastSnapshot?: RoutingPointSnapshot | undefined;
 
-    constructor(data: PModelElementData & { routingPoints: RoutingPoints }) {
+    constructor(data: BaseRoutingPointData) {
         super(data);
 
         this.routingPoints = data.routingPoints;
@@ -155,22 +161,16 @@ export abstract class BaseRoutingPoint extends BaseRoutingPointMixin {
     type: 'routing-point'
 })
 export class RoutingPoint extends BaseRoutingPoint {
-    constructor(locator: GLSPLocator, routingPoints: RoutingPoints) {
-        super({
-            routingPoints,
-            locator
-        });
+    constructor(data: BaseRoutingPointData) {
+        super(data);
     }
 }
 
 @ModelElementMetadata({
     type: 'volatile-routing-point'
 })
 export class VolatileRoutingPoint extends BaseRoutingPoint {
-    constructor(locator: GLSPLocator, routingPoints: RoutingPoints) {
-        super({
-            routingPoints,
-            locator
-        });
+    constructor(data: BaseRoutingPointData) {
+        super(data);
     }
 }