test(KTL-1189); fix: editor screens cropped (no margin in viewport)

tests/basics.e2e.ts

@@ -18,7 +18,7 @@ import {
   runButton,
 } from './utlis/interactions';
 
-import { checkEditorView } from './utlis/expects';
+import { checkEditorView, checkScreenshot } from './utlis/screenshots';
 import { prepareNetwork, printlnCode, RouteFulfill, toPostData } from './utlis';
 import { mockRunRequest, waitRunRequest } from './utlis/mocks/compiler';
 
@@ -44,7 +44,7 @@ test.describe('basics', () => {
     await expect(editor.locator(RUN_SELECTOR)).not.toBeVisible();
 
     // Take screen fullpage, for sure original node should be invisible
-    await checkEditorView(page.locator('body'), 'initial view is correct');
+    await checkScreenshot(page.locator('body'), 'initial view is correct');
   });
 
   test('simple usage', async ({ page }) => {
@@ -76,7 +76,7 @@ test.describe('basics', () => {
     );
 
     // Take screen fullpage, for sure original node should be invisible
-    await checkEditorView(page.locator('body'), 'initial view is correct');
+    await checkScreenshot(page.locator('body'), 'initial view is correct');
 
     // run with default source
     await checkPrintlnCase(page, editor, 'Hello, world!');

tests/utlis/screenshots.ts

@@ -0,0 +1,39 @@
+import { expect, Locator } from '@playwright/test';
+import { WIDGET_WRAPPER_SELECTOR } from './selectors';
+
+export async function hideCursor(node: Locator, callback: () => Promise<void>) {
+  const cursor = node.locator('.CodeMirror-cursors');
+  // Cursor blinks all the time, it's failed test from time to time
+  await cursor.evaluate((element) => (element.style.display = 'none'));
+  await callback();
+  await cursor.evaluate((element) => (element.style.display = null));
+}
+
+export function checkScreenshot(node: Locator, message: string) {
+  return hideCursor(node, () => expect(node, message).toHaveScreenshot());
+}
+
+export function checkEditorView(editor: Locator, message: string) {
+  return hideCursor(editor, async () => {
+    /* Add top/bottom margins for wrapper node */
+    const [boundingBox, margins] = await Promise.all([
+      editor.boundingBox(),
+      editor.locator(`> ${WIDGET_WRAPPER_SELECTOR}`).evaluate((el) => ({
+        top: parseFloat(
+          window.getComputedStyle(el).getPropertyValue('margin-top'),
+        ),
+        bottom: parseFloat(
+          window.getComputedStyle(el).getPropertyValue('margin-bottom'),
+        ),
+      })),
+    ]);
+
+    const clip = {
+      ...boundingBox,
+      y: boundingBox.y - margins.top,
+      height: boundingBox.height + margins.bottom,
+    };
+
+    await expect(editor.page(), message).toHaveScreenshot({ clip });
+  });
+}

tests/utlis/selectors.ts

@@ -1,4 +1,5 @@
-export const WIDGET_SELECTOR = 'div:has(> .executable-fragment-wrapper)';
+export const WIDGET_WRAPPER_SELECTOR = '.executable-fragment-wrapper';
+export const WIDGET_SELECTOR = `div:has(> ${WIDGET_WRAPPER_SELECTOR})`;
 export const RUN_SELECTOR = '.run-button';
 export const CLOSE_SELECTOR = '.console-close';
 export const OUTPUT_SELECTOR = '.output-wrapper';