From 957548b33b290d00663861fd998af9a0a0dec280 Mon Sep 17 00:00:00 2001 From: alvitazwar <55917380+alvitazwar@users.noreply.github.com> Date: Fri, 11 Aug 2023 00:18:27 +0600 Subject: [PATCH] Add POM and Update Tests Name --- .github/workflows/e2e.yml | 4 +- .gitignore | 1 + tests/e2e-playwright/page/MentionLinks.js | 88 +++++++++++++++++++ .../specs/01_enable-settings-test.spec.js | 55 +++--------- .../specs/02_page-username-test.spec.js | 60 ++++--------- .../specs/03_page-displayname-test.spec.js | 62 +++---------- .../specs/04_post-username-test.spec.js | 62 +++---------- .../specs/05_post-displayname-test.spec.js | 63 +++---------- tests/e2e-playwright/utils/selectors.js | 17 ++++ 9 files changed, 178 insertions(+), 234 deletions(-) create mode 100644 tests/e2e-playwright/page/MentionLinks.js create mode 100644 tests/e2e-playwright/utils/selectors.js diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index f11d15c..a5d20bd 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -1,6 +1,6 @@ # e2e test for mention-links -name: CI for mention-links +name: End-to-End Tests # Controls when the workflow will run on: @@ -16,7 +16,7 @@ on: jobs: Run-wpe2e-TestCase: # The type of runner that the job will run on - name: Run Mention links + name: Playwright Tests runs-on: ubuntu-latest env: SHA: ${{ github.event.pull_request.head.sha }} diff --git a/.gitignore b/.gitignore index 4190e73..b71d5ce 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,4 @@ Thumbs.db # Other .cache .env +artifacts diff --git a/tests/e2e-playwright/page/MentionLinks.js b/tests/e2e-playwright/page/MentionLinks.js new file mode 100644 index 0000000..ec2af1a --- /dev/null +++ b/tests/e2e-playwright/page/MentionLinks.js @@ -0,0 +1,88 @@ +const { expect } = require("@playwright/test"); +const { selectors } = require('../utils/selectors') +exports.MentionLinks = class MentionLinks { + constructor(page) { + this.page = page + } + // this functions is to navigate to the Mention link Setting page + async navigateToSettingPage(){ + await this.page.goto("./wp-admin/options-general.php?page=wp-mention-links",{waitUntil:"load"}); + } + + // this function is used to validate all the setting is presnet on the page. + async validateElements(){ + // Focus and validate all the settings is present or not. + await this.page.focus(selectors.userField); + await this.page.focus(selectors.postCheckbox); + await this.page.focus(selectors.pageCheckbox); + } + // this function is used to select Username + async selectUsername(){ + await this.page.focus(selectors.userField); + await this.page.locator(selectors.userField).selectOption('username'); + } + // this function is used to select Displayname + async selectDisplayname(){ + await this.page.focus(selectors.userField); + await this.page.locator(selectors.userField).selectOption('displayname'); + } +// this function is used to check both page and post Checkbox +async checkBothPagePostCheckbox(){ + await this.page.locator(selectors.postCheckbox).check(); + await this.page.locator(selectors.pageCheckbox).check(); +} +// this functions is used to validate both post and page checkbox are checked +async validateBothPostPageChecked(){ + // Check for the final time the elements are saved after save button + expect(await this.page.locator(selectors.postCheckbox).isChecked()).toBeTruthy(); + expect(await this.page.locator(selectors.pageCheckbox).isChecked()).toBeTruthy(); +} +// this function is used to Save settings and verify +async saveSettings(){ + await this.page.locator(selectors.submitButton).click(); + await this.page.focus(selectors.saveMessage); +} +// this function is used to check only page and uncheck post +async checkOnlyPageCheckbox(){ + await this.page.locator(selectors.pageCheckbox).check(); + await this.page.locator(selectors.postCheckbox).uncheck(); +} +// this function is used to check only post and uncheck page +async checkOnlyPostCheckbox(){ + await this.page.locator(selectors.postCheckbox).check(); + await this.page.locator(selectors.pageCheckbox).uncheck(); +} +// this function is used to validate checked page and unchecked post +async validateOnlyPageChecked(){ + expect(await this.page.locator(selectors.pageCheckbox).isChecked()).toBeTruthy(); + expect(await this.page.locator(selectors.postCheckbox).isChecked()).toBeFalsy(); +} +// this function is used to validate checked page and unchecked post +async validateOnlyPostChecked(){ + expect(await this.page.locator(selectors.postCheckbox).isChecked()).toBeTruthy(); + expect(await this.page.locator(selectors.pageCheckbox).isChecked()).toBeFalsy(); +} +// this function is used to validate Mention Element is present on the Backend +async validateBackend(){ + await this.page.keyboard.type(selectors.userName); + await this.page.focus(selectors.backendPopover); + await expect(this.page.locator(selectors.backendPopover)).toBeVisible(); + await this.page.locator(selectors.backendPopover).click(); +} +// this fucntion is used to Publish and verify page/post +async publishPagePost(){ + await this.page.click(selectors.publishToggle); + await this.page.click(selectors.publishButton); + await this.page.locator(selectors.successClass); +} +// this function is used to validate Mention Element is present on the Frontend +async validateFrontend(){ + await this.page.locator(selectors.viewButton).click(); + await expect(this.page.locator(selectors.userLink).first()).not.toBeNull(); + const locator = this.page.locator(selectors.userLink).first(); + await expect(locator).toBeEnabled(); +} + + + +} \ No newline at end of file diff --git a/tests/e2e-playwright/specs/01_enable-settings-test.spec.js b/tests/e2e-playwright/specs/01_enable-settings-test.spec.js index 9267e7c..74d2820 100644 --- a/tests/e2e-playwright/specs/01_enable-settings-test.spec.js +++ b/tests/e2e-playwright/specs/01_enable-settings-test.spec.js @@ -1,48 +1,21 @@ /** * WordPress dependencies */ -const { test, expect } = require('@wordpress/e2e-test-utils-playwright'); - +const { test } = require('@wordpress/e2e-test-utils-playwright'); +const { MentionLinks } = require('../page/MentionLinks.js'); test.describe('Check settings page', () => { - test.beforeEach(async ({ admin }) => { - await admin.visitAdminPage('options-general.php?page=wp-mention-links'); + test('Perform Checking All the contents of the page is present', async ({ admin, page }) => { + await admin.visitAdminPage('/'); + const mentionLinkobj = new MentionLinks(page); + await mentionLinkobj.navigateToSettingPage(); + await mentionLinkobj.validateElements(); }); - test('Perform Checking All the contents of the page is present', async ({ admin, page, editor }) => { - - // Focus and validate all the settings is present or not. - await page.focus('#wpml_user_field_to_use'); - await page.focus("label[for='posts_checkbox']"); - await page.focus("label[for='pages_checkbox']") - + test('Perform Click option and save settings', async ({ page }) => { + const mentionLinkobj = new MentionLinks(page); + await mentionLinkobj.navigateToSettingPage(); + await mentionLinkobj.selectUsername(); + await mentionLinkobj.checkBothPagePostCheckbox(); + await mentionLinkobj.saveSettings(); + await mentionLinkobj.validateBothPostPageChecked(); }); - test('Perform Click option and save settings', async ({ admin, page, editor }) => { - // Focus - await page.focus('#wpml_user_field_to_use'); - // Select username - await page.locator('#wpml_user_field_to_use').selectOption('username'); - - // Check post and pages are properly checked or not - const post_check= await page.locator("label[for='posts_checkbox']").isChecked(); - const page_check = await page.locator("label[for='pages_checkbox']").isChecked(); - //console.log(post_check, page_check); - // ensure both element are checked - if ( post_check == false){ - await page.locator("label[for='posts_checkbox']").check(); - } - - - if (page_check == false) { - await page.locator("label[for='pages_checkbox']").check(); - } - - // save and verify - await page.locator("input[id='submit']").click(); - await page.focus("div[id='setting-error-settings_updated']"); - - // Check for the final time the elements are saved after save button - expect(await page.locator("label[for='posts_checkbox']").isChecked()).toBeTruthy(); - expect(await page.locator("label[for='pages_checkbox']").isChecked()).toBeTruthy(); - - }); - }); \ No newline at end of file diff --git a/tests/e2e-playwright/specs/02_page-username-test.spec.js b/tests/e2e-playwright/specs/02_page-username-test.spec.js index 844dba8..81fd6a1 100644 --- a/tests/e2e-playwright/specs/02_page-username-test.spec.js +++ b/tests/e2e-playwright/specs/02_page-username-test.spec.js @@ -1,58 +1,28 @@ /** * WordPress dependencies */ -const { test, expect } = require('@wordpress/e2e-test-utils-playwright'); -test.describe('Check page Create setting', () => { - test.beforeEach(async ({ admin }) => { - await admin.visitAdminPage('options-general.php?page=wp-mention-links'); - }); - test('Set page only setting and validate mention in both end', async ({ admin, page, editor }) => { - - // Focus and check element is present on the page. - await page.focus('#wpml_user_field_to_use'); - // Select Displayname to validate - await page.locator('#wpml_user_field_to_use').selectOption('username'); - - // Check create new page - const post_check = await page.locator("label[for='posts_checkbox']").isChecked(); - const page_check = await page.locator("label[for='pages_checkbox']").isChecked(); - //console.log(post_check, page_check); - // ensure both element are checked - if (page_check == false) { - await page.locator("label[for='pages_checkbox']").check(); - } +const { test } = require('@wordpress/e2e-test-utils-playwright'); +const { MentionLinks } = require('../page/MentionLinks.js'); - if (post_check == true) { - await page.locator("label[for='posts_checkbox']").uncheck(); - } - // save and verify - await page.locator("input[id='submit']").click(); - await page.focus("div[id='setting-error-settings_updated']"); - - // Check for the final time the elements are saved after save button - expect(await page.locator("label[for='pages_checkbox']").isChecked()).toBeTruthy(); - expect(await page.locator("label[for='posts_checkbox']").isChecked()).toBeFalsy(); +test.describe('Check page Create setting', () => { + test('Set page only setting and validate mention in both end', async ({ page }) => { + const mentionLinkobj = new MentionLinks(page); + await mentionLinkobj.navigateToSettingPage(); + await mentionLinkobj.selectUsername(); + await mentionLinkobj.checkOnlyPageCheckbox(); + await mentionLinkobj.saveSettings(); + await mentionLinkobj.validateOnlyPageChecked(); }); test('Create a new page and check UserName', async ({ admin, page, editor }) => { - // Create new post page + const mentionLinkobj = new MentionLinks(page); + // Create new page await admin.createNewPost({ postType: 'page', title: 'Dummy page' }) // Click on paragraph block await editor.insertBlock({ name: "core/paragraph", }); - // Validate backend - await page.keyboard.type("@automation"); - await page.focus('div.popover-slot > div'); - await page.locator('div.popover-slot > div').click(); - //Validate frontend - // pusblish - await page.click(".editor-post-publish-panel__toggle"); - // Double check, click again on publish button - await page.click(".editor-post-publish-button"); - // A success notice should show up - page.locator(".components-snackbar"); - - await page.locator("a[class='components-button is-primary']").click(); - await expect(page.locator("role=link[name='automation']").first()).not.toBeNull(); + await mentionLinkobj.validateBackend(); + await mentionLinkobj.publishPagePost(); + await mentionLinkobj.validateFrontend(); }); }); \ No newline at end of file diff --git a/tests/e2e-playwright/specs/03_page-displayname-test.spec.js b/tests/e2e-playwright/specs/03_page-displayname-test.spec.js index c96bf71..3109939 100644 --- a/tests/e2e-playwright/specs/03_page-displayname-test.spec.js +++ b/tests/e2e-playwright/specs/03_page-displayname-test.spec.js @@ -1,61 +1,27 @@ /** * WordPress dependencies */ -const { test, expect } = require('@wordpress/e2e-test-utils-playwright'); +const { test } = require('@wordpress/e2e-test-utils-playwright'); +const { MentionLinks } = require('../page/MentionLinks.js'); test.describe('Check page Create setting', () => { - test.beforeEach(async ({ admin }) => { - await admin.visitAdminPage('options-general.php?page=wp-mention-links'); - }); - test('Set page only setting and validate mention in both end', async ({ admin, page, editor }) => { - - // Focus and check element is present on the page. - await page.focus('#wpml_user_field_to_use'); - // Select Displayname to validate - await page.locator('#wpml_user_field_to_use').selectOption('displayname'); - - // Check create new page - const post_check = await page.locator("label[for='posts_checkbox']").isChecked(); - const page_check = await page.locator("label[for='pages_checkbox']").isChecked(); - //console.log(post_check, page_check); - // ensure both element are checked - if (page_check == false) { - await page.locator("label[for='pages_checkbox']").check(); - } - - if (post_check == true) { - await page.locator("label[for='posts_checkbox']").uncheck(); - } - - // save and verify - await page.locator("input[id='submit']").click(); - await page.focus("div[id='setting-error-settings_updated']"); - - // Check for the final time the elements are saved after save button - expect(await page.locator("label[for='pages_checkbox']").isChecked()).toBeTruthy(); - expect(await page.locator("label[for='posts_checkbox']").isChecked()).toBeFalsy(); + test('Set page only setting and validate mention in both end', async ({ page }) => { + const mentionLinkobj = new MentionLinks(page); + await mentionLinkobj.navigateToSettingPage(); + await mentionLinkobj.selectDisplayname(); + await mentionLinkobj.checkOnlyPageCheckbox(); + await mentionLinkobj.saveSettings(); + await mentionLinkobj.validateOnlyPageChecked(); }); test('Create a new page and check DisplayName', async ({ admin, page, editor }) => { - // Create new post page + const mentionLinkobj = new MentionLinks(page); + // Create new page await admin.createNewPost({ postType: 'page', title: 'Dummy page' }) // Click on paragraph block await editor.insertBlock({ name: "core/paragraph", }); - // Validate backend - await page.keyboard.type("@automation"); - await page.focus('div.popover-slot > div'); - await page.locator('div.popover-slot > div').click(); - //Validate frontend - // pusblish - await page.click(".editor-post-publish-panel__toggle"); - // Double check, click again on publish button - await page.click(".editor-post-publish-button"); - // A success notice should show up - page.locator(".components-snackbar"); - - await page.locator("a[class='components-button is-primary']").click(); - await expect(page.locator("role=link[name='automation']").first()).not.toBeNull(); - const locator = page.locator("role=link[name='automation']").first() - await expect(locator).toBeEnabled(); + await mentionLinkobj.validateBackend(); + await mentionLinkobj.publishPagePost(); + await mentionLinkobj.validateFrontend(); }); }); \ No newline at end of file diff --git a/tests/e2e-playwright/specs/04_post-username-test.spec.js b/tests/e2e-playwright/specs/04_post-username-test.spec.js index d88cf1d..28532e1 100644 --- a/tests/e2e-playwright/specs/04_post-username-test.spec.js +++ b/tests/e2e-playwright/specs/04_post-username-test.spec.js @@ -1,63 +1,27 @@ /** * WordPress dependencies */ -const { test, expect } = require('@wordpress/e2e-test-utils-playwright'); - +const { test } = require('@wordpress/e2e-test-utils-playwright'); +const { MentionLinks } = require('../page/MentionLinks.js'); test.describe('Check post Create setting', () => { - test.beforeEach(async ({ admin }) => { - await admin.visitAdminPage('options-general.php?page=wp-mention-links'); - }); - test('Set post only setting and validate username', async ({ admin, page, editor }) => { - // Focus - await page.focus('#wpml_user_field_to_use'); - // Select username - await page.locator('#wpml_user_field_to_use').selectOption('username'); // displayname - - // Check post page - const post_check = await page.locator("label[for='posts_checkbox']").isChecked(); - const page_check = await page.locator("label[for='pages_checkbox']").isChecked(); - //console.log(post_check, page_check); - // ensure both element are checked - if (post_check == false) { - await page.locator("label[for='posts_checkbox']").check(); - } - - if (page_check == true) { - await page.locator("label[for='pages_checkbox']").uncheck(); - } - - // save and verify - await page.locator("input[id='submit']").click(); - await page.focus("div[id='setting-error-settings_updated']"); - - // Check for the final time the elements are saved after save button - expect(await page.locator("label[for='posts_checkbox']").isChecked()).toBeTruthy(); - expect(await page.locator("label[for='pages_checkbox']").isChecked()).toBeFalsy(); + test('Set post only setting and validate username', async ({ page }) => { + const mentionLinkobj = new MentionLinks(page); + await mentionLinkobj.navigateToSettingPage(); + await mentionLinkobj.selectUsername(); + await mentionLinkobj.checkOnlyPostCheckbox(); + await mentionLinkobj.saveSettings(); + await mentionLinkobj.validateOnlyPostChecked(); }); test('Create a new post and check mention in both end', async ({ admin, page, editor }) => { + const mentionLinkobj = new MentionLinks(page); // Create new post page await admin.createNewPost({title: 'Dummy Post' }); // Click on paragraph block await editor.insertBlock({ name: "core/paragraph", }); - // Validate backend - await page.keyboard.type("@automation"); - await page.focus('div.popover-slot > div'); - await page.locator('div.popover-slot > div').click(); - //Validate frontend - // pusblish - await page.click(".editor-post-publish-panel__toggle"); - // Double check, click again on publish button - await page.click(".editor-post-publish-button"); - // A success notice should show up - page.locator(".components-snackbar"); - - await page.locator("a[class='components-button is-primary']").click(); - await expect(page.locator("role=link[name='automation']").first()).not.toBeNull(); - const locator = page.locator("role=link[name='automation']").first() - await expect(locator).toBeEnabled(); + await mentionLinkobj.validateBackend(); + await mentionLinkobj.publishPagePost(); + await mentionLinkobj.validateFrontend(); }); - - }); \ No newline at end of file diff --git a/tests/e2e-playwright/specs/05_post-displayname-test.spec.js b/tests/e2e-playwright/specs/05_post-displayname-test.spec.js index 459db61..3fc6893 100644 --- a/tests/e2e-playwright/specs/05_post-displayname-test.spec.js +++ b/tests/e2e-playwright/specs/05_post-displayname-test.spec.js @@ -1,62 +1,27 @@ /** * WordPress dependencies */ -const { test, expect } = require('@wordpress/e2e-test-utils-playwright'); - +const { test } = require('@wordpress/e2e-test-utils-playwright'); +const { MentionLinks } = require('../page/MentionLinks.js'); test.describe('Check post Create setting', () => { - test.beforeEach(async ({ admin }) => { - await admin.visitAdminPage('options-general.php?page=wp-mention-links'); - }); - test('Set post only setting and validate displayname', async ({ admin, page, editor }) => { - // Focus - await page.focus('#wpml_user_field_to_use'); - // Select displayname - await page.locator('#wpml_user_field_to_use').selectOption('displayname'); // displayname - - // Check post page - const post_check = await page.locator("label[for='posts_checkbox']").isChecked(); - const page_check = await page.locator("label[for='pages_checkbox']").isChecked(); - //console.log(post_check, page_check); - // ensure both element are checked - if (post_check == false) { - await page.locator("label[for='posts_checkbox']").check(); - } - - if (page_check == true) { - await page.locator("label[for='pages_checkbox']").uncheck(); - } - // save and verify - await page.locator("input[id='submit']").click(); - await page.focus("div[id='setting-error-settings_updated']"); - - // Check for the final time the elements are saved after save button - expect(await page.locator("label[for='posts_checkbox']").isChecked()).toBeTruthy(); - expect(await page.locator("label[for='pages_checkbox']").isChecked()).toBeFalsy(); + test('Set post only setting and validate displayname', async ({ page }) => { + const mentionLinkobj = new MentionLinks(page); + await mentionLinkobj.navigateToSettingPage(); + await mentionLinkobj.selectDisplayname(); + await mentionLinkobj.checkOnlyPostCheckbox(); + await mentionLinkobj.saveSettings(); + await mentionLinkobj.validateOnlyPostChecked(); }); test('Create a new post and check mention in both end', async ({ admin, page, editor }) => { - // Create new post page + const mentionLinkobj = new MentionLinks(page); + // Create new post await admin.createNewPost({ title: 'Dummy Post' }); // Click on paragraph block await editor.insertBlock({ name: "core/paragraph", }); - // Validate backend - await page.keyboard.type("@automation"); - await page.focus('div.popover-slot > div'); - await page.locator('div.popover-slot > div').click(); - //Validate frontend - // pusblish - await page.click(".editor-post-publish-panel__toggle"); - // Double check, click again on publish button - await page.click(".editor-post-publish-button"); - // A success notice should show up - page.locator(".components-snackbar"); - - await page.locator("a[class='components-button is-primary']").click(); - await expect(page.locator("role=link[name='automation']").first()).not.toBeNull(); - const locator = page.locator("role=link[name='automation']").first() - await expect(locator).toBeEnabled(); + await mentionLinkobj.validateBackend(); + await mentionLinkobj.publishPagePost(); + await mentionLinkobj.validateFrontend(); }); - - }); \ No newline at end of file diff --git a/tests/e2e-playwright/utils/selectors.js b/tests/e2e-playwright/utils/selectors.js new file mode 100644 index 0000000..282a9f8 --- /dev/null +++ b/tests/e2e-playwright/utils/selectors.js @@ -0,0 +1,17 @@ +const selectors = { + userField: '#wpml_user_field_to_use', + postCheckbox: "label[for='posts_checkbox']", + pageCheckbox: "label[for='pages_checkbox']", + submitButton: "input[id='submit']", + saveMessage: "div[id='setting-error-settings_updated']", + userName: "@automation", + backendPopover: 'div.popover-slot > div', + publishToggle: ".editor-post-publish-panel__toggle", + publishButton: ".editor-post-publish-button", + successClass: ".components-snackbar", + viewButton: "a[class='components-button is-primary']", + userLink: "role=link[name='automation']", + +} + +module.exports = { selectors } \ No newline at end of file