Add POM Refactor

tests/e2e/artifacts/storage-states/admin.json

@@ -0,0 +1 @@
+{"cookies":[{"name":"wordpress_test_cookie","value":"WP+Cookie+check","domain":"rtmediapro.local","path":"/","expires":-1,"httpOnly":false,"secure":false,"sameSite":"Lax"},{"name":"wordpress_785143b184cbf7f0f58a34577eca6c65","value":"automation%7C1692206281%7CR75VuSPhyAS0SpSBP9bHjOOApzwBlb620W5sxgRZQxX%7Cab826fe25c088c1474e53bfcd05017034f34bcce7536164f19e8abefdf59e3ce","domain":"rtmediapro.local","path":"/wp-content/plugins","expires":-1,"httpOnly":true,"secure":false,"sameSite":"Lax"},{"name":"wordpress_785143b184cbf7f0f58a34577eca6c65","value":"automation%7C1692206281%7CR75VuSPhyAS0SpSBP9bHjOOApzwBlb620W5sxgRZQxX%7Cab826fe25c088c1474e53bfcd05017034f34bcce7536164f19e8abefdf59e3ce","domain":"rtmediapro.local","path":"/wp-admin","expires":-1,"httpOnly":true,"secure":false,"sameSite":"Lax"},{"name":"wordpress_logged_in_785143b184cbf7f0f58a34577eca6c65","value":"automation%7C1692206281%7CR75VuSPhyAS0SpSBP9bHjOOApzwBlb620W5sxgRZQxX%7C9be4b6d17d5c0e3e16131b093e529726fb1cff1d4c9b24564823e1ff4aa097d1","domain":"rtmediapro.local","path":"/","expires":-1,"httpOnly":true,"secure":false,"sameSite":"Lax"},{"name":"wp-settings-time-1","value":"1692033481","domain":"rtmediapro.local","path":"/","expires":1723569481.625,"httpOnly":false,"secure":false,"sameSite":"Lax"}],"nonce":"998e26f68c","rootURL":"http://rtmediapro.local/wp-json/"}

tests/e2e/page/RtSocial.js

@@ -0,0 +1,171 @@
+const { expect } = require("@playwright/test");
+const { selectors } = require('../utils/selectors')
+exports.RtSocial = class RtSocial {
+    constructor(page,context) {
+        this.page = page;
+        this.context= context
+    }
+    // this functions is to navigate to the Mention link Setting page
+    async navigateToSettingPage() {
+        await this.page.goto("./wp-admin/options-general.php?page=rtsocial-options", { waitUntil: "load" });
+    }
+    // this function is used to validate all the visible options in the settings page
+    async validateVisibleOptions(){
+        const placementSettings = this.page.locator(selectors.placementSettingsDiv)
+        expect(placementSettings).not.toBeNull();
+        const buttonStyle = this.page.locator(selectors.buttonStyleDiv)
+        expect(buttonStyle).not.toBeNull();
+        const alignmentSetting = this.page.locator(selectors.leftAlignment);
+        expect(alignmentSetting).not.toBeNull();
+        const activeButtons = this.page.locator(selectors.activeButtonDiv);
+        expect(activeButtons).not.toBeNull();
+        const twitterHandle = this.page.locator(selectors.twitterHandleInput);
+        expect(twitterHandle).not.toBeNull();
+        const facebookToken = this.page.locator(selectors.faceBooktokenInput);
+        expect(facebookToken).not.toBeNull();
+    }
+    // this function is used to test Alignment Settings checkboxes
+    async validateAlignmentCheckbox(){
+        expect(selectors.leftAlignment).not.toBeNull()
+        expect(selectors.rightAlignment).not.toBeNull()
+        expect(selectors.centerAlignment).not.toBeNull()
+        expect(selectors.noneAlignment).not.toBeNull()
+    }
+    // this function is used to Test Button Style checkboxes
+    async validateButtonStyleCheckbox(){
+        expect(selectors.horizontalButtonStyle).not.toBeNull();
+        expect(selectors.iconCountButtonStyle).not.toBeNull();
+        expect(selectors.iconButtonStyle).not.toBeNull();
+        expect(selectors.verticalButtonStyle).not.toBeNull();
+    }
+    // this function is used to Test Placement Checkboxes
+    async validatePlacementCheckbox(){
+        expect(selectors.topPlacement).not.toBeNull();
+        expect(selectors.bottomPlacement).not.toBeNull();
+    }
+
+    // this function is used to set Left aligned in top position with icon style Social Icons
+    async setLeftAlignTopPlaceIcon(){ 
+        await this.page.locator(selectors.topPlacement).check();
+        await this.page.locator(selectors.iconButtonStyle).check()
+        await this.page.locator(selectors.leftAlignment).check();
+    }
+    // this functions is used to save settings
+    async saveSetting(){
+        await this.page.locator(selectors.buttonSaveSetting).click();
+        expect(this.page.locator(selectors.messageSaveSetting)).not.toBeNull();
+    }
+    // this function is used to validate Left aligned in top position with iconCount style Social Icons
+    async validateLeftAlignTopPlaceIcon(){
+        await Promise.all([
+            this.page.click(selectors.adminBar),
+        ]);
+        await expect(this.page.locator(selectors.leftAlignedValidate).first()).toBeVisible();
+    }
+    // this function is used to set Right aligned in top position with iconCount style Social Icons
+    async setRightAlignTopPlaceIcon(){
+        await this.page.locator(selectors.topPlacement).check();
+        await this.page.locator(selectors.iconCountButtonStyle).check()
+        await this.page.locator(selectors.rightAlignment).check();
+    }
+    // this function is used to validate Right aligned in top position with iconCount style Social Icons
+    async validateRightAlignTopPlaceIcon(){
+        await Promise.all([
+            this.page.click(selectors.adminBar),
+        ]);
+        await expect(this.page.locator(selectors.rightAlignedValidate).first()).toBeVisible();
+    }
+    // this function is used to set Center alignement with top placement and horizontal
+    async setCenterAlignTopPlaceHorizontal(){
+        await this.page.locator(selectors.topPlacement).check();
+        await this.page.locator(selectors.centerAlignment).check();
+        await this.page.locator(selectors.horizontalButtonStyle).check()
+    }
+    // this function is used to validate Center alignement with top placement and horizontal
+    async validateCenterAlignTopPlaceHorizontal(){
+        await Promise.all([
+            this.page.click(selectors.adminBar),
+        ]);
+        await expect(this.page.locator(selectors.buttonHorizontalValidate).first()).toBeVisible();
+    }
+     // this function is used to set Center alignement with top placement and icon button style
+    async setCenterAlignTopPlaceIconButtonStyle() {
+        await this.page.locator(selectors.topPlacement).check();
+        await this.page.locator(selectors.centerAlignment).check();
+        await this.page.locator(selectors.iconButtonStyle).check()
+    }
+    // this function is used to validate Center alignement with top placement and icon button style
+    async validateCenterAlignTopPlaceIconButtonStyle(){
+        await Promise.all([
+            this.page.click(selectors.adminBar),
+        ]);
+        await expect(this.page.locator(selectors.iconValidate).first()).toBeVisible();
+    }
+    // this function is used to set Center alignement with botton placement and iconcount button style
+    async setCenterAlignBottomPlaceIconCount(){
+        await this.page.locator(selectors.bottomPlacement).check();
+        await this.page.locator(selectors.centerAlignment).check();
+        await this.page.locator(selectors.iconCountButtonStyle).check()
+    }
+     // this function is used to validate Center alignement with botton placement and iconcount button style
+    async validateCenterAlignBottomPlaceIconCount() {
+        await Promise.all([
+            this.page.click(selectors.adminBar),
+        ]);
+        await expect(this.page.locator(selectors.iconCountValidate).first()).toBeVisible();
+    }
+    // this function is used to set Center alignement with top placement and vertical button style
+    async setCenterAlignTopPlaceVerticalIcon(){
+        await this.page.locator(selectors.topPlacement).check();
+        await this.page.locator(selectors.centerAlignment).check();
+        await this.page.locator(selectors.verticalButtonStyle).check()
+    }
+    // this function is used to Validate Center alignement with top placement and vertical button style
+    async validateCenterAlignTopPlaceVerticalIcon(){
+        await Promise.all([
+            this.page.click(selectors.adminBar),
+        ]);
+        await expect(this.page.locator(selectors.topValidate).first()).toBeVisible();
+    }
+    // this function is used to set Center alignement with bottom placement and vertical button style
+    async setCenterAlignBottomPlaceVerticalIcon(){
+        await this.page.locator(selectors.bottomPlacement).check();
+        await this.page.locator(selectors.centerAlignment).check();
+        await this.page.locator(selectors.verticalButtonStyle).check();
+    }
+     // this function is used to validate Center alignement with bottom placement and vertical button style
+    async valiateCenterAlignBottomPlaceVerticalIcon(){
+        await Promise.all([
+            this.page.click(selectors.adminBar),
+        ]);
+        await expect(this.page.locator(selectors.bottomValidate).first()).toBeVisible();
+    }
+    // this function is used to Check active and inactive drag and drop
+    async setDragDrop(){
+        const src = await this.page.$(selectors.activeButtonDiv)
+        const dst = await this.page.$(selectors.inactiveDestButton);
+        if (src && dst) {
+            const srcBound = await src.boundingBox()
+            const dstBound = await dst.boundingBox()
+            if (srcBound && dstBound) {
+                await this.page.mouse.click(srcBound.x + srcBound.width, srcBound.y + srcBound.height)
+                await this.page.mouse.down()
+                await this.page.mouse.move(srcBound.x + srcBound.width, srcBound.y + srcBound.height)
+                await this.page.mouse.move(dstBound.x + dstBound.width, dstBound.y + dstBound.height)
+                await this.page.mouse.down();
+            } else {
+                throw new Error("No Element")
+            }
+        }
+    }
+    // this function is used to set and validate twitter handle input
+    async setValidateTwitterHandle(){
+        await this.page.locator(selectors.twitterHandle).fill("test");
+        await this.page.locator(selectors.twitterRaltedHandle).fill("test");   
+    }
+    // this function is used to set and validate facebook token input backend
+    async setValidateFacebookHandle(){
+        await this.page.locator(selectors.facebookHandleToken).fill(selectors.facebookTokenValue);
+        await this.page.locator(selectors.facbookHandleCheckbox).nth(3).check();
+    }
+}

tests/e2e/specs/01_validate-settings-options.spec.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+const { test } = require('@wordpress/e2e-test-utils-playwright');
+const { RtSocial } = require('../page/RtSocial.js');
+test.describe('Validate Rtsocial Settings', () => {
+    test('Check rtSocial Options', async ({ admin, page }) => {
+        await admin.visitAdminPage("/");
+        const rtSocialobj = new RtSocial(page);
+       await rtSocialobj.navigateToSettingPage();
+       await rtSocialobj.validateVisibleOptions();
+    });
+});

tests/e2e/specs/02_validate-alignment.spec.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require('@wordpress/e2e-test-utils-playwright');
+const { RtSocial } = require('../page/RtSocial.js');
+const { selectors } = require('../utils/selectors.js');
+test.describe('Validate Alignement with button functionality', () => {
+    test('Check rtSocial button Alignment in the backend', async ({  page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.validateAlignmentCheckbox(); 
+    });
+    test('Validate rtSocial Left alignment with fixed position and button style with button functionality', async ({ context, page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setLeftAlignTopPlaceIcon();
+        await rtSocialobj.saveSetting();
+        await rtSocialobj.validateLeftAlignTopPlaceIcon();
+        // Validate twitter
+        const [newPage] = await Promise.all([
+            context.waitForEvent('page'),
+            page.locator(selectors.frontEndTwitterIcon).first().click() // Opens a new tab
+        ])
+        await newPage.waitForLoadState();
+        await expect(newPage).toHaveURL(/twitter/);
+    });
+    test('Validate rtSocial Right alignment with fixed position and button style', async ({ context, page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setRightAlignTopPlaceIcon();
+        await rtSocialobj.saveSetting();
+        await rtSocialobj.validateRightAlignTopPlaceIcon();
+        // Validate Facebook
+        const [newpage] = await Promise.all([
+            context.waitForEvent('page'),
+            page.locator(selectors.frontEndFacebookIcon).first().click() // Opens a new tab // Opens a new tab
+        ])
+        await newpage.waitForLoadState();
+        await expect(newpage).toHaveURL(/facebook/);
+        // login and share
+        await newpage.locator(selectors.facebookInput).fill(selectors.userGmail);
+        await newpage.locator(selectors.facebookPassword).fill(selectors.userPassword);
+        await newpage.locator(selectors.facbookSubmit).click();
+        await expect(newpage).toHaveURL(/facebook/);
+        // validate & Share
+        await expect(newpage.locator(selectors.facebookShareButton)).toBeVisible();
+        await newpage.locator(selectors.facebookShareButton).click();
+    });
+});

tests/e2e/specs/03_validate-button.spec.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+const { RtSocial } = require('../page/RtSocial.js');
+const { selectors } = require('../utils/selectors.js');
+test.describe('Validate button, alginment in the front end. ', () => {
+    test('Check rtSocial button checkbox in the backend', async ({ page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.validateButtonStyleCheckbox();
+    });
+    test(' Validate rtSocial Horizontal Buttons and with placement and Alignment', async ({ context, page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setCenterAlignTopPlaceHorizontal();
+        await rtSocialobj.saveSetting();
+        await rtSocialobj.validateCenterAlignTopPlaceHorizontal();
+        // Validate pinterest
+        const [newPage] = await Promise.all([
+            context.waitForEvent('page'),
+            page.locator(selectors.pinterestIcon).click()
+        ])
+        await newPage.waitForLoadState();
+        await expect(newPage).toHaveURL(/pinterest/);
+    });
+
+    test(' Validate rtSocial Icon Buttons and with placement and Alignment', async ({ context, page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setCenterAlignTopPlaceIconButtonStyle();
+        await rtSocialobj.saveSetting();
+        await rtSocialobj.validateCenterAlignTopPlaceIconButtonStyle();
+        // Validate linkedin 
+        const [newPage] = await Promise.all([
+            context.waitForEvent('page'),
+            page.locator(selectors.linkedinIcon).click()
+        ])
+        await newPage.waitForLoadState();
+        await expect(newPage).toHaveURL(/link/);
+
+    });
+    test(' Validate rtSocial IconCount Buttons and with placement and Alignment.', async ({ page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setCenterAlignBottomPlaceIconCount();
+        await rtSocialobj.saveSetting();
+        await rtSocialobj.validateCenterAlignBottomPlaceIconCount();
+    });
+});

tests/e2e/specs/04_validate-placement.spec.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+const { test } = require('@wordpress/e2e-test-utils-playwright');
+const { RtSocial } = require('../page/RtSocial.js');
+test.describe('Validate Placement and buttons functionality in the front end. ', () => {
+    test('Check rtSocial placement checkbox in the backend', async ({ admin, page, editor }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.validatePlacementCheckbox();
+    });
+    test(' Validate rtSocial Top placement settings with Vertical button style.', async ({ admin, page, editor }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setCenterAlignTopPlaceVerticalIcon();
+        await rtSocialobj.saveSetting();
+        await rtSocialobj.validateCenterAlignTopPlaceVerticalIcon();
+    });
+    test(' Validate rtSocial Bottom placement settings with Vertical button style.', async ({ admin, page, editor }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setCenterAlignBottomPlaceVerticalIcon();
+        await rtSocialobj.saveSetting();
+        await rtSocialobj.valiateCenterAlignBottomPlaceVerticalIcon();
+    });
+
+});

tests/e2e/specs/05_validate-share-button-list.spec.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require('@wordpress/e2e-test-utils-playwright');
+const { RtSocial } = require('../page/RtSocial.js');
+const { selectors } = require('../utils/selectors.js');
+test.describe('Validate Social Sharing Handle Inputs', () => {
+    test(' Validate rtSocial Handle and sharing buttons', async ({  page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setDragDrop();
+        await rtSocialobj.saveSetting();
+        // Validate Drag and drop after performing action
+        await expect(page.locator(selectors.activeButtonDiv)).toBeVisible();
+    });
+    test(' Validate rtSocial Twitter Handles input', async ({ page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setValidateTwitterHandle();
+        await rtSocialobj.saveSetting();
+        await expect(page.locator(selectors.twitterHandle)).toHaveValue("test");
+    });
+
+    test(' Validate rtSocial Facebook Handles input', async ({  page }) => {
+        const rtSocialobj = new RtSocial(page);
+        await rtSocialobj.navigateToSettingPage();
+        await rtSocialobj.setValidateFacebookHandle();
+        await rtSocialobj.saveSetting();
+        await expect(page.locator(selectors.facebookHandleToken)).toBeVisible();
+    });
+
+});