LPD-33712 Playwright test

modules/test/playwright/tests/frontend-editor-ckeditor-sample-web/stylesCombo.spec.ts

@@ -0,0 +1,87 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import {expect, mergeTests} from '@playwright/test';
+
+import {isolatedLayoutTest} from "../../fixtures/isolatedLayoutTest";
+import {loginTest} from '../../fixtures/loginTest';
+import {waitForSuccessAlert} from "../../utils/waitForSuccessAlert";
+
+export const test = mergeTests(
+    isolatedLayoutTest(),
+    loginTest()
+);
+
+test('@LPD-33712 stylesCombo dropdown visible with maximized', async ({
+                                                             layout,
+                                                             page,
+                                                         }) => {
+    await test.step('Go to page and edit page', async () => {
+        await page.goto(layout.friendlyURL);
+
+        const editButton = page.getByRole('link', {name: 'Edit'});
+
+        await editButton.waitFor({state: 'visible'});
+        await editButton.click();
+    });
+
+    await test.step('Add sample ckeditor portlet on page ', async () => {
+        const searchFragment = page.getByLabel('Search Fragments and Widgets');
+
+        await searchFragment.waitFor({state: 'visible'});
+        await searchFragment.click();
+        await searchFragment.fill('ckeditor');
+
+        const ckeditorSampleItem = page.getByRole('menuitem', { name: 'CKEditor Sample Add CKEditor' });
+
+        await ckeditorSampleItem.waitFor({state: 'visible'});
+
+        await ckeditorSampleItem.click();
+
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Enter');
+        await page.keyboard.press('Enter');
+
+        const ckeditorSampleWidget = page.locator('header').filter({ hasText: 'CKEditor Sample' });
+
+        await ckeditorSampleWidget.waitFor({state: 'visible'});
+
+        const publishButton = page.getByLabel('Publish');
+
+        await publishButton.isVisible();
+        await publishButton.click();
+
+        await waitForSuccessAlert(page, `Success:The page was published successfully.`);
+    });
+
+    await test.step('Select Maximized button and check stylesCombo dropdown', async () => {
+        const ckeditorSampleWidgetClassicTab = page.getByRole('tab', { name: 'Classic' });
+
+        await ckeditorSampleWidgetClassicTab.waitFor({state: 'visible'});
+        await ckeditorSampleWidgetClassicTab.click();
+
+        const maximizedButton = page.getByLabel('Maximize');
+
+        await maximizedButton.waitFor({state: 'visible'});
+        await maximizedButton.click();
+
+        const stylesComboButton = page.getByLabel('Classic', { exact: true }).getByLabel('Styles');
+
+        await stylesComboButton.click();
+
+        const stylesComboZIndex = await page.evaluate(() => {
+            const stylesComboElement = document.querySelector(
+                '.cke_combopanel.lfr_maximized');
+
+            const stylesComboElementStyles = window.getComputedStyle(
+                stylesComboElement);
+
+            return stylesComboElementStyles.getPropertyValue('z-index');
+        });
+
+        expect(stylesComboZIndex).toEqual("10000");
+    });
+});
+