Add POM Refactor

tests/e2e-playwright/page/LoginGoogle.js

@@ -0,0 +1,89 @@
+const { expect } = require("@playwright/test");
+const { selectors } = require('../utils/selectors')
+const {
+    WP_BASE_URL,
+    WP_USERNAME,
+    WP_PASSWORD
+} = require('../e2e-test-utils-playwright/src/config');
+
+exports.LoginGoogle = class LoginGoogle {
+    constructor(page) {
+        this.page = page;  
+    }
+
+// this function is used to navigate to Settings page
+async navigateToSettings(){
+    await this.page.goto("./wp-admin/options-general.php?page=login-with-google", { waitUntil: "load" });
+}
+// this function is used to validate setting's page Heading
+async validateHeading(){
+  await  expect(this.page.locator(selectors.settingsHeader)).toHaveText(selectors.settingsHeading);
+}
+// 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 add proper secret and ID
+async setIdSecret(){
+    await this.page.click(selectors.clientIdInput, { clickCount: 3 })
+    await this.page.keyboard.press('Backspace')
+    await this.page.type(selectors.clientIdInput,selectors.clientIdValue)
+    await this.page.waitForTimeout(1000)
+    await this.page.click(selectors.clientSecretInput, { clickCount: 3 })
+    await this.page.keyboard.press('Backspace')
+    await this.page.type(selectors.clientSecretInput,selectors.clientSecretValue)
+}
+// this function is used to validate Login with google block is present in the editor
+async validateBlock(){
+    await this.page.type(selectors.titleInput,selectors.titleValue);
+    await this.page.click(selectors.addBlockButton);
+    await this.page.type(selectors.searchInput,selectors.searchInputValue);
+    expect(this.page.locator(selectors.validateOption)).not.toBe(null);
+}
+// this function is used to add Login with google block after validate Block
+async addLoginGoogleBlock(){
+    await this.page.click(selectors.validateOption);
+    await this.page.type(selectors.loginGoogleDiv,selectors.searchInputValue);
+}
+// this function is used to validate login with google component on the frontend after adding the google block
+async validateLoginBlockFrontend(){
+    await this.page.click(selectors.logoutCheckbox);
+    await this.page.click(selectors.publishPanel);
+    await this.page.click(selectors.publishButton);
+    await this.page.focus(selectors.viewPostButton);
+    await this.page.locator(selectors.viewPostButton).click();
+    await this.page.waitForTimeout(1000);
+    await expect(this.page.locator(selectors.frontendLoginButton)).toHaveText("Log out");
+}
+// this function is used to validate disable button on the frontend
+async validateDisableButtonFrontend(){
+    await this.page.locator(selectors.logoutCheckbox).uncheck();
+    await this.page.click(selectors.publishPanel);
+    await this.page.click(selectors.publishButton);
+    await this.page.click(selectors.viewPostButton);
+    await this.page.waitForTimeout(1000);
+    await expect(this.page.locator(selectors.frontendLoginButton)).toBeHidden();
+}
+// this function is used for logout
+async logOut(){
+    await this.page.hover(selectors.wpAdminBar); 
+    await this.page.click(selectors.wpLogout);
+}
+// this function is used to validate login with google button after logout 
+async validateButtonAfterLogout(){
+    await this.page.goto('/wp-admin/', { waitUntil: "load" });
+    await this.page.waitForTimeout(1000);
+    expect(this.page.locator(selectors.wpGoogleLogin)).not.toBe(null);
+}
+// this function is used to disable new user registration
+async disableUserReg(){
+    await this.page.locator(selectors.userRegistration).uncheck();
+    expect(await this.page.locator(selectors.userRegistration).isChecked()).toBeFalsy();
+}
+
+
+
+
+
+}

tests/e2e-playwright/specs/01_validate-settings-test.spec.js

@@ -1,19 +1,14 @@
 /**
  * WordPress dependencies
  */
-const { test, expect } = require("@wordpress/e2e-test-utils-playwright");
+const { test } = require('@wordpress/e2e-test-utils-playwright');
+const { LoginGoogle } = require('../page/LoginGoogle.js');
 
 test.describe("Validate the login with google settings", () => {
   test("should be able to validate the settings", async ({ page, admin }) => {
+    const loginGoogleobj = new LoginGoogle(page);
     await admin.visitAdminPage("/");
-
-    await page.hover('role=link[name="Settings"i]');
-
-    await page.click('role=link[name="Login with Google"i]');
-
-    await page.waitForTimeout(1000);
-    expect(page.locator("form[action='options.php'] h2")).toHaveText(
-      "Log in with Google Settings"
-    );
+    await loginGoogleobj.navigateToSettings();
+    await loginGoogleobj.validateHeading();
   });
 });

tests/e2e-playwright/specs/02_validate-clientid-secret-test.spec.js

@@ -1,33 +1,16 @@
 /**
  * WordPress dependencies
  */
-const { test, expect } = require('@wordpress/e2e-test-utils-playwright')
+const { test, expect } = require('@wordpress/e2e-test-utils-playwright');
+const { LoginGoogle } = require('../page/LoginGoogle.js');
+const { selectors } = require('../utils/selectors.js');
 
 test.describe('Add Client ID and secrete in settings', () => {
-  test('should be able to add the ID and secrete', async ({ page, admin }) => {
-    await admin.visitAdminPage('/')
-
-    await page.hover('role=link[name="Settings"i]')
-
-    await page.click('role=link[name="Login with Google"i]')
-
-    expect(page.locator("form[action='options.php'] h2")).toHaveText(
-      'Log in with Google Settings'
-    )
-
-    await page.click('#client-id', { clickCount: 3 })
-    await page.keyboard.press('Backspace')
-    await page.type(
-      '#client-id',
-      '278082871881-qp9srgor0iqvl1aq200ctf1sdb49bli1.apps.googleusercontent.com'
-    )
-
-    await page.waitForTimeout(1000)
-
-    await page.click('#client-secret', { clickCount: 3 })
-    await page.keyboard.press('Backspace')
-    await page.type('#client-secret', 'Y3O4gbY4JnateqAj10GxL_6t')
-
-    await page.click('#submit')
+  test('should be able to add the ID and secrete', async ({ page }) => {
+    const loginGoogleobj = new LoginGoogle(page);
+    await loginGoogleobj.navigateToSettings();
+    await loginGoogleobj.validateHeading();
+    await loginGoogleobj.setIdSecret();
+    await loginGoogleobj.saveSetting();
   })
 })

tests/e2e-playwright/specs/03_validate-loginwithgoogle-block.spec.js

@@ -1,20 +1,13 @@
 /**
  * WordPress dependencies
  */
-const { test, expect } = require("@wordpress/e2e-test-utils-playwright");
+const { test } = require("@wordpress/e2e-test-utils-playwright");
+const { LoginGoogle } = require('../page/LoginGoogle.js');
 
 test.describe("Validate the login with google block ", () => {
   test("Login with google block should be present", async ({ page, admin }) => {
+    const loginGoogleobj = new LoginGoogle(page);
     await admin.createNewPost();
-
-    await page.type("h1[aria-label='Add title']", "Test block");
-
-    await page.click('role=button[name="Add block"i]');
-
-    await page.type("#components-search-control-0", "Login with google");
-
-    expect(page.locator("role=option[name=/Log in with Google/i]")).not.toBe(
-      null
-    );
+    await loginGoogleobj.validateBlock();
   });
 });

tests/e2e-playwright/specs/04_Add_loginwithgoogle-block.spec.js

@@ -1,28 +1,15 @@
 /**
  * WordPress dependencies
  */
- const { test, expect } = require("@wordpress/e2e-test-utils-playwright");
+const { test } = require('@wordpress/e2e-test-utils-playwright');
+const { LoginGoogle } = require('../page/LoginGoogle.js');
 
  test.describe("Add login with google block ", () => {
    test("Should be able to add the login with google block", async ({ page, admin }) => {
+     const loginGoogleobj = new LoginGoogle(page);
      await admin.createNewPost();
-
-     await page.type("h1[aria-label='Add title']", "Test block");
-
-     await page.click('role=button[name="Add block"i]');
-
-     await page.type("#components-search-control-0", "Login with google");
-
-     expect(page.locator("role=option[name=/Log in with Google/i]")).not.toBe(
-       null
-     );
-
-    await page.click( "role=option[name=/Log in with Google/i]" );
-
-    await page.type( "div[aria-label='Log in with Google']", "Login with google" );
-
+     await loginGoogleobj.validateBlock();
+     await loginGoogleobj.addLoginGoogleBlock();
    });
-
-
  });
 

tests/e2e-playwright/specs/05_enable-logoutbutton-test.spec.js

@@ -1,44 +1,15 @@
 /**
  * WordPress dependencies
  */
-const { test, expect } = require("@wordpress/e2e-test-utils-playwright");
+const { test } = require('@wordpress/e2e-test-utils-playwright');
+const { LoginGoogle } = require('../page/LoginGoogle.js');
 
 test.describe("Enable the logout button", () => {
-  test("Should be able to view the logout button", async ({ page, admin }) => {
+  test("Should be able to view the logout button on the frontend", async ({ page, admin }) => {
+    const loginGoogleobj = new LoginGoogle(page);
     await admin.createNewPost();
-
-    await page.type("h1[aria-label='Add title']", "Test block");
-
-    await page.click('role=button[name="Add block"i]');
-
-    await page.type("#components-search-control-0", "Login with google");
-
-    expect(page.locator("role=option[name=/Log in with Google/i]")).not.toBe(
-      null
-    );
-
-    await page.click("role=option[name=/Log in with Google/i]");
-
-    await page.type(
-      "div[aria-label='Log in with Google']",
-      "Login with google"
-    );
-
-    await page.click('role=checkbox[name="Display Logout"i]');
-
-    await page.click(
-      ".components-button.block-editor-post-preview__button-toggle.components-dropdown-menu__toggle.is-tertiary"
-    );
-
-    //Click on publish button
-    await page.click(".editor-post-publish-panel__toggle");
-
-    //Double check, click again on publish button
-    await page.click(".editor-post-publish-button");
-
-    await page.click('[aria-label="Editor publish"] >> text=View Post');
-
-    await page.waitForTimeout(1000);
-    expect(page.locator(".wp_google_login__button")).toHaveText("Log out");
+    await loginGoogleobj.validateBlock();
+    await loginGoogleobj.addLoginGoogleBlock();
+    await loginGoogleobj.validateLoginBlockFrontend();
   });
 });

tests/e2e-playwright/specs/06_disable_logoutbutton-test.spec.js

@@ -1,46 +1,16 @@
 /**
  * WordPress dependencies
  */
- const { test, expect } = require("@wordpress/e2e-test-utils-playwright");
+const { test } = require('@wordpress/e2e-test-utils-playwright');
+const { LoginGoogle } = require('../page/LoginGoogle.js');
 
  test.describe("Disable the logout button", () => {
    test("Logout button should not be visible", async ({ page, admin }) => {
+     const loginGoogleobj = new LoginGoogle(page);
      await admin.createNewPost();
-
-     await page.type("h1[aria-label='Add title']", "Test block");
-
-     await page.click('role=button[name="Add block"i]');
-
-     await page.type("#components-search-control-0", "Login with google");
-
-     expect(page.locator("role=option[name=/Log in with Google/i]")).not.toBe(
-       null
-     );
-
-     await page.click("role=option[name=/Log in with Google/i]");
-
-     await page.type(
-       "div[aria-label='Log in with Google']",
-       "Login with google"
-     );
-
-     await page.locator('role=checkbox[name="Display Logout"i]').uncheck();
-
-     await page.click(
-       ".components-button.block-editor-post-preview__button-toggle.components-dropdown-menu__toggle.is-tertiary"
-     );
-
-     //Click on publish button
-     await page.click(".editor-post-publish-panel__toggle");
-
-     //Double check, click again on publish button
-     await page.click(".editor-post-publish-button");
-
-     await page.click('[aria-label="Editor publish"] >> text=View Post');
-
-     await page.waitForTimeout(1000);
-
-     expect(page.locator(".wp_google_login__button")).not.toBeVisible();
+     await loginGoogleobj.validateBlock();
+     await loginGoogleobj.addLoginGoogleBlock();
+     await loginGoogleobj.validateDisableButtonFrontend();
    });
  });
 

tests/e2e-playwright/specs/07_check-login-with-googlebtn-test.spec.js

@@ -1,25 +1,14 @@
 /**
  * WordPress dependencies
  */
- const { test, expect } = require("@wordpress/e2e-test-utils-playwright");
+const { test } = require('@wordpress/e2e-test-utils-playwright');
+const { LoginGoogle } = require('../page/LoginGoogle.js');
 
  test.describe("Check the login with google button", () => {
-
-   test("should be able validate login with google button", async ({ page, admin }) => {
-     await admin.visitAdminPage("/");
-
-       // Hover on profile icon.
-       await page.hover( '#wp-admin-bar-my-account' );
-
-       // Click on logout button. 
-       await page.click( '#wp-admin-bar-logout' );
-
-       await page.waitForTimeout(1000);
-       expect(page.locator( '.message' )).toHaveText( 'You are now logged out.' );
-
-       expect( page.locator( '.wp_google_login' ) ).not.toBe(null);
-
-
+   test("should be able validate login with google button", async ({ page,context }) => {
+     await context.clearCookies();
+     const loginGoogleobj = new LoginGoogle(page);
+     await loginGoogleobj.validateButtonAfterLogout();
    });
  });