diff --git a/tests/e2e/pageObjects/help-center-page.ts b/tests/e2e/pageObjects/help-center-page.ts new file mode 100644 index 0000000000..e460498a13 --- /dev/null +++ b/tests/e2e/pageObjects/help-center-page.ts @@ -0,0 +1,28 @@ +import { Selector } from 'testcafe'; + +export class HelpCenterPage { + + //------------------------------------------------------------------------------------------ + //DECLARATION OF TYPES: DOM ELEMENTS and UI COMPONENTS + //*Assign the 'Selector' type to any element/component nested within the constructor. + //------------------------------------------------------------------------------------------ + helpCenterPanel: Selector + helpCenterSubmitBugButton: Selector + helpCenterShortcutButton: Selector + helpCenterReleaseNotesButton: Selector + + constructor() { + //------------------------------------------------------------------------------------------- + //DECLARATION OF SELECTORS + //*Declare all elements/components of the relevant page. + //*Target any element/component via data-id, if possible! + //*The following categories are ordered alphabetically (Alerts, Buttons, Checkboxes, etc.). + //------------------------------------------------------------------------------------------- + // BUTTONS + this.helpCenterSubmitBugButton = Selector('[data-testid=submit-bug-btn]'); + this.helpCenterShortcutButton = Selector('[data-testid=shortcuts-btn]'); + this.helpCenterReleaseNotesButton = Selector('[data-testid=release-notes-btn]'); + // Panel + this.helpCenterPanel = Selector('[data-testid=help-center]') + } +} diff --git a/tests/e2e/pageObjects/index.ts b/tests/e2e/pageObjects/index.ts index b998bad120..e77f470a2a 100644 --- a/tests/e2e/pageObjects/index.ts +++ b/tests/e2e/pageObjects/index.ts @@ -7,6 +7,8 @@ import { SettingsPage } from './settings-page'; import { UserAgreementPage } from './user-agreement-page'; import { WorkbenchPage } from './workbench-page'; import { DatabaseOverviewPage } from './database-overview-page'; +import { HelpCenterPage } from './help-center-page'; +import { ShortcutsPage } from './shortcuts-page'; export { AddRedisDatabasePage, @@ -17,5 +19,7 @@ export { SettingsPage, UserAgreementPage, WorkbenchPage, - DatabaseOverviewPage + DatabaseOverviewPage, + HelpCenterPage, + ShortcutsPage } diff --git a/tests/e2e/pageObjects/my-redis-databases-page.ts b/tests/e2e/pageObjects/my-redis-databases-page.ts index 0f24168be9..1c0b730628 100644 --- a/tests/e2e/pageObjects/my-redis-databases-page.ts +++ b/tests/e2e/pageObjects/my-redis-databases-page.ts @@ -10,6 +10,7 @@ export class MyRedisDatabasePage { dbNameList: Selector settingsButton: Selector workbenchButton: Selector + helpCenterButton: Selector myRedisDBButton: Selector toastCloseButton: Selector deleteDatabaseButton: Selector @@ -32,6 +33,7 @@ export class MyRedisDatabasePage { //BUTTONS this.settingsButton = Selector('[data-testid=settings-page-btn]'); this.workbenchButton = Selector('[data-testid=workbench-page-btn]'); + this.helpCenterButton = Selector('[data-testid=help-menu-button]'); this.browserButton = Selector('[data-testid=browser-page-btn]'); this.myRedisDBButton = Selector('[data-test-subj=home-page-btn]'); this.deleteDatabaseButton = Selector('[data-testid^=delete-instance-]'); @@ -70,7 +72,7 @@ export class MyRedisDatabasePage { await t.click(this.confirmDeleteButton); } if (await this.toastCloseButton.exists) { - await t.click(this.toastCloseButton); + await t.click(this.toastCloseButton); } } diff --git a/tests/e2e/pageObjects/shortcuts-page.ts b/tests/e2e/pageObjects/shortcuts-page.ts new file mode 100644 index 0000000000..cb88cbcc5d --- /dev/null +++ b/tests/e2e/pageObjects/shortcuts-page.ts @@ -0,0 +1,33 @@ +import { Selector } from 'testcafe'; + +export class ShortcutsPage { + + //------------------------------------------------------------------------------------------ + //DECLARATION OF TYPES: DOM ELEMENTS and UI COMPONENTS + //*Assign the 'Selector' type to any element/component nested within the constructor. + //------------------------------------------------------------------------------------------ + + shortcutsPanel: Selector + shortcutsTitle: Selector + shortcutsDesktopApplicationSection: Selector + shortcutsCLISection: Selector + shortcutsWorkbenchSection: Selector + shortcutsCloseButton: Selector + + constructor() { + //------------------------------------------------------------------------------------------- + //DECLARATION OF SELECTORS + //*Declare all elements/components of the relevant page. + //*Target any element/component via data-id, if possible! + //*The following categories are ordered alphabetically (Alerts, Buttons, Checkboxes, etc.). + //------------------------------------------------------------------------------------------- + // BUTTONS + this.shortcutsTitle = Selector('[data-testid=shortcuts-title]'); + this.shortcutsDesktopApplicationSection = Selector('[data-test-subj="shortcuts-section-Desktop application"]'); + this.shortcutsCLISection = Selector('[data-test-subj=shortcuts-section-CLI]'); + this.shortcutsWorkbenchSection = Selector('[data-test-subj=shortcuts-section-Workbench]'); + this.shortcutsCloseButton = Selector('[data-test-subj=euiFlyoutCloseButton]') + // Panel + this.shortcutsPanel = Selector('[data-test-subj=shortcuts-flyout]'); + } +} diff --git a/tests/e2e/tests/regression/shortcuts/shortcuts.e2e.ts b/tests/e2e/tests/regression/shortcuts/shortcuts.e2e.ts new file mode 100644 index 0000000000..fa376f4d9f --- /dev/null +++ b/tests/e2e/tests/regression/shortcuts/shortcuts.e2e.ts @@ -0,0 +1,43 @@ +import { + UserAgreementPage, + MyRedisDatabasePage, + HelpCenterPage, + ShortcutsPage +} from '../../../pageObjects'; +import { + commonUrl +} from '../../../helpers/conf'; + +const userAgreementPage = new UserAgreementPage(); +const myRedisDatabasePage = new MyRedisDatabasePage(); +const helpCenterPage = new HelpCenterPage(); +const shortcutsPage = new ShortcutsPage(); + +fixture `Shortcuts` + .meta({ type: 'regression' }) + .page(commonUrl) + .beforeEach(async t => { + await t.maximizeWindow(); + await userAgreementPage.acceptLicenseTerms(); + }) + +test('Verify that user can see a summary of Shortcuts by clicking "Keyboard Shortcuts" button in Help Center', async t => { + // Click on help center icon + await t.click(myRedisDatabasePage.helpCenterButton); + // Verify that Help Center panel is opened + await t.expect(helpCenterPage.helpCenterPanel.exists).ok('Help Center panel is opened'); + // Click on Shortcuts option + await t.click(helpCenterPage.helpCenterShortcutButton); + // Validate that Shortcuts panel is opened + await t.expect(shortcutsPage.shortcutsPanel.exists).ok('Shortcuts panel is opened'); + // Validate Title and sections of Shortcuts + await t.expect(shortcutsPage.shortcutsPanel.exists).ok('Shortcuts panel is opened'); + await t.expect(shortcutsPage.shortcutsTitle.exists).ok('shortcutsTitle is opened'); + await t.expect(shortcutsPage.shortcutsDesktopApplicationSection.exists).ok('shortcutsDesktopApplicationSection is opened'); + await t.expect(shortcutsPage.shortcutsCLISection.exists).ok('shortcutsCLISection is displayed'); + await t.expect(shortcutsPage.shortcutsWorkbenchSection.exists).ok('shortcutsWorkbenchSection is displayed'); + // Verify that user can close the Shortcuts + await t.click(shortcutsPage.shortcutsCloseButton); + // Verify that Shortcuts panel is not displayed + await t.expect(shortcutsPage.shortcutsPanel.exists).notOk('Shortcuts panel is not displayed'); +})