[Canvas] Add simple visual test for fullscreen (#51234)

* Add simple visual test for fullscreen workpads in Canvas

* Adding canvas to the config

* Adding sample data visual tests

* Refactor to use new helper method

* Reverting sample data visual test for now

* Forgot to add the awaits

x-pack/test/functional/page_objects/canvas_page.ts

@@ -11,8 +11,22 @@ import { FtrProviderContext } from '../ftr_provider_context';
 export function CanvasPageProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const find = getService('find');
+  const browser = getService('browser');
 
   return {
+    async enterFullscreen() {
+      const elem = await find.byCssSelector('[aria-label="View fullscreen"]', 20000);
+      await elem.click();
+    },
+
+    async exitFullscreen() {
+      await browser.pressKeys(browser.keys.ESCAPE);
+    },
+
+    async waitForWorkpadElements() {
+      await testSubjects.findAll('canvasWorkpadPage > canvasWorkpadPageElementContent');
+    },
+
     async expectCreateWorkpadButtonEnabled() {
       const button = await testSubjects.find('create-workpad-button', 20000);
       const disabledAttr = await button.getAttribute('disabled');

x-pack/test/visual_regression/config.js

@@ -13,6 +13,7 @@ export default async function ({ readConfigFile }) {
     ...functionalConfig.getAll(),
 
     testFiles: [
+      require.resolve('./tests/canvas'),
       require.resolve('./tests/login_page'),
       require.resolve('./tests/maps'),
       require.resolve('./tests/infra'),

x-pack/test/visual_regression/tests/canvas/fullscreen.js

@@ -0,0 +1,24 @@
+/*
+* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+* or more contributor license agreements. Licensed under the Elastic License;
+* you may not use this file except in compliance with the Elastic License.
+*/
+
+export default function ({ getPageObjects, getService }) {
+  const PageObjects = getPageObjects(['common', 'canvas']);
+  const visualTesting = getService('visualTesting');
+
+  describe('fullscreen', () => {
+    it('workpad should display properly in fullscreen mode', async () => {
+      await PageObjects.common.navigateToApp('canvas', {
+        hash: '/workpad/workpad-1705f884-6224-47de-ba49-ca224fe6ec31/page/1'
+      });
+
+      await PageObjects.canvas.enterFullscreen();
+
+      await PageObjects.canvas.waitForWorkpadElements();
+
+      await visualTesting.snapshot();
+    });
+  });
+}

x-pack/test/visual_regression/tests/canvas/index.js

@@ -0,0 +1,29 @@
+/*
+* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+* or more contributor license agreements. Licensed under the Elastic License;
+* you may not use this file except in compliance with the Elastic License.
+*/
+import { DEFAULT_OPTIONS } from '../../../../../test/visual_regression/services/visual_testing/visual_testing';
+
+const [SCREEN_WIDTH] = DEFAULT_OPTIONS.widths || [];
+
+export default function ({ loadTestFile, getService }) {
+  const esArchiver = getService('esArchiver');
+  const browser = getService('browser');
+
+  describe('canvas app visual regression', function () {
+    before(async () => {
+      await esArchiver.loadIfNeeded('logstash_functional');
+      await esArchiver.load('canvas/default');
+
+      await browser.setWindowSize(SCREEN_WIDTH, 1000);
+    });
+
+    after(async () => {
+      await esArchiver.unload('canvas/default');
+    });
+
+    this.tags('ciGroup10');
+    loadTestFile(require.resolve('./fullscreen'));
+  });
+}