test: update visual tests to use fixed browser window height

packages/app-layout/test/visual/lumo/app-layout.test.js

@@ -1,11 +1,17 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/lumo/vaadin-app-layout.js';
 import '../../../theme/lumo/vaadin-drawer-toggle.js';
 
 describe('app-layout', () => {
   let div, element;
 
+  before(async () => {
+    // Use value bigger than 600 which is a threshold for the "overlay" mode
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/app-layout/test/visual/material/app-layout.test.js

@@ -1,11 +1,17 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/material/vaadin-app-layout.js';
 import '../../../theme/material/vaadin-drawer-toggle.js';
 
 describe('app-layout', () => {
   let div, element;
 
+  before(async () => {
+    // Use value bigger than 600 which is a threshold for the "overlay" mode
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/confirm-dialog/test/visual/lumo/confirm-dialog.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync, oneEvent } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/vaadin-lumo-styles/test/autoload.js';
 import '../../../theme/lumo/vaadin-confirm-dialog.js';
@@ -7,6 +8,10 @@ import '../../not-animated-styles.js';
 describe('confirm-dialog', () => {
   let div, element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(async () => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/confirm-dialog/test/visual/material/confirm-dialog.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync, oneEvent } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/vaadin-material-styles/test/autoload.js';
 import '../../../theme/material/vaadin-confirm-dialog.js';
@@ -7,6 +8,10 @@ import '../../not-animated-styles.js';
 describe('confirm-dialog', () => {
   let div, element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(async () => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/context-menu/test/visual/lumo/context-menu.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/item/theme/lumo/vaadin-item.js';
 import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
@@ -9,6 +10,10 @@ import { openSubMenus } from '../../helpers.js';
 describe('context-menu', () => {
   let element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   ['ltr', 'rtl'].forEach((dir) => {
     const contextmenu = (target) => {
       const domRect = target.getBoundingClientRect();

packages/context-menu/test/visual/material/context-menu.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/item/theme/material/vaadin-item.js';
 import '@vaadin/list-box/theme/material/vaadin-list-box.js';
@@ -9,6 +10,10 @@ import { openSubMenus } from '../../helpers.js';
 describe('context-menu', () => {
   let element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   ['ltr', 'rtl'].forEach((dir) => {
     const contextmenu = (target) => {
       const domRect = target.getBoundingClientRect();

packages/cookie-consent/test/visual/lumo/cookie-consent.test.js

@@ -1,10 +1,15 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/lumo/vaadin-cookie-consent.js';
 
 describe('cookie-consent', () => {
   let element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     element = fixtureSync('<vaadin-cookie-consent></vaadin-cookie-consent>');
   });

packages/cookie-consent/test/visual/material/cookie-consent.test.js

@@ -1,10 +1,15 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/material/vaadin-cookie-consent.js';
 
 describe('cookie-consent', () => {
   let element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     element = fixtureSync('<vaadin-cookie-consent></vaadin-cookie-consent>');
   });

packages/crud/test/visual/lumo/crud.test.js

@@ -1,11 +1,17 @@
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../not-animated-styles.js';
 import '../../../theme/lumo/vaadin-crud.js';
 
 describe('crud', () => {
   let div, element;
 
+  before(async () => {
+    // Use value bigger than 600 which is a threshold for the "fullscreen" mode
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(async () => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/crud/test/visual/material/crud.test.js

@@ -1,11 +1,17 @@
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../not-animated-styles.js';
 import '../../../theme/material/vaadin-crud.js';
 
 describe('crud', () => {
   let div, element;
 
+  before(async () => {
+    // Use value bigger than 600 which is a threshold for the "fullscreen" mode
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(async () => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/dialog/test/visual/lumo/dialog.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../not-animated-styles.js';
 import '../../../theme/lumo/vaadin-dialog.js';
@@ -7,6 +8,10 @@ import { createRenderer } from '../../helpers.js';
 describe('dialog', () => {
   let div, element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(async () => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/dialog/test/visual/material/dialog.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../not-animated-styles.js';
 import '../../../theme/material/vaadin-dialog.js';
@@ -7,6 +8,10 @@ import { createRenderer } from '../../helpers.js';
 describe('dialog', () => {
   let div, element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(async () => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/login/test/visual/lumo/login-overlay.test.js

@@ -1,11 +1,16 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../common.js';
 import '../../../theme/lumo/vaadin-login-overlay.js';
 
 describe('login-overlay', () => {
   let div, element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/login/test/visual/material/login-overlay.test.js

@@ -1,11 +1,16 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../common.js';
 import '../../../theme/material/vaadin-login-overlay.js';
 
 describe('login-overlay', () => {
   let div, element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/menu-bar/test/visual/material/menu-bar.test.js

@@ -1,4 +1,5 @@
 import { arrowDown, fixtureSync, nextRender, oneEvent } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/icon/theme/material/vaadin-icon.js';
 import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
@@ -8,6 +9,10 @@ import '../../not-animated-styles.js';
 describe('menu-bar', () => {
   let div, element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   // FIXME: overflow doesn't work correctly in RTL in older Chrome version
   // See comments under https://github.com/vaadin/web-components/pull/7347
   ['ltr' /* , 'rtl' */].forEach((dir) => {

packages/notification/test/visual/lumo/notification.test.js

@@ -1,5 +1,5 @@
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
-import { sendKeys } from '@web/test-runner-commands';
+import { executeServerCommand, sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/button/theme/lumo/vaadin-button.js';
 import '../../not-animated-styles.js';
@@ -8,6 +8,10 @@ import '../../../theme/lumo/vaadin-notification.js';
 describe('notification', () => {
   let element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     element = fixtureSync('<vaadin-notification duration="0"></vaadin-notification>');
     element.renderer = (root) => {

packages/notification/test/visual/material/notification.test.js

@@ -1,11 +1,16 @@
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../not-animated-styles.js';
 import '../../../theme/material/vaadin-notification.js';
 
 describe('notification', () => {
   let element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     element = fixtureSync('<vaadin-notification duration="0"></vaadin-notification>');
     element.renderer = (root) => {

packages/overlay/test/visual/lumo/overlay.test.js

@@ -1,10 +1,15 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/lumo/vaadin-overlay.js';
 
 describe('overlay', () => {
   let div, element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     div = document.createElement('div');
     div.style.height = '100%';

packages/overlay/test/visual/material/overlay.test.js

@@ -1,10 +1,15 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { executeServerCommand } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/material/vaadin-overlay.js';
 
 describe('overlay', () => {
   let div, element;
 
+  before(async () => {
+    await executeServerCommand('set-window-height', { height: 610 });
+  });
+
   beforeEach(() => {
     div = document.createElement('div');
     div.style.height = '100%';

wtr-utils.js

@@ -257,6 +257,42 @@ const createUnitTestsConfig = (config) => {
   };
 };
 
+/**
+ * To set viewport size properly we need to execute the process multiple times.
+ */
+async function setViewportSize(driver, height, retry = 0) {
+  // Get the browser size (width / height)
+  const size = await driver.getWindowSize();
+  // Get the actual viewport inner height
+  const innerHeight = await driver.execute(() => window.innerHeight);
+
+  const heightDiff = size.height - innerHeight;
+  await driver.setWindowSize(size.width, height + heightDiff);
+
+  const updatedHeight = await driver.execute(() => window.innerHeight);
+
+  // If viewport size not equals desired size, execute process again
+  if (updatedHeight !== height && retry < 3) {
+    await setViewportSize(driver, height, retry + 1);
+  }
+}
+
+function setWindowHeightPlugin() {
+  return {
+    name: 'set-window-height-command',
+
+    async executeCommand({ command, payload, session }) {
+      if (command === 'set-window-height') {
+        if (session.browser.type === 'webdriver') {
+          await setViewportSize(session.browser.driver, payload.height);
+          return true;
+        }
+      }
+      return undefined;
+    },
+  };
+}
+
 const createVisualTestsConfig = (theme, browserVersion) => {
   const visualPackages = getAllVisualPackages();
   const packages = getTestPackages(visualPackages);
@@ -291,6 +327,7 @@ const createVisualTestsConfig = (theme, browserVersion) => {
       }),
     ],
     plugins: [
+      setWindowHeightPlugin(),
       visualRegressionPlugin({
         baseDir: 'packages',
         getBaselineName: getBaselineScreenshotName,