SAAS-152 enabled custom locator plugin, refactored selectors (#736)

* SAAS-152 updated CodeceptJS to 2.6.5v, enabled custom locator plugin, changed selectors to use custom locator and 'locate' * SAAS-152 updated CodeceptJS docker image version to 2.6.3 * SAAS-152 updated locators to not fail with 2.6.1 docker image (testing) * Update pmm-app/tests/pages/adminPage.js Co-authored-by: Alexander Tymchuk <[email protected]> * SAAS-152 review changes Co-authored-by: Alexander Tymchuk <[email protected]>
percona · May 29, 2020 · a1bb0f2 · a1bb0f2
1 parent 1068a2e
commit a1bb0f2
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 39 deletions.
diff --git a/pmm-app/pr.codecept.js b/pmm-app/pr.codecept.js
@@ -43,6 +43,12 @@ exports.config = {
     autoDelay: {
       enabled: true,
     },
+    customLocator: {
+      enabled: true,
+      strategy: 'css',
+      attribute: 'data-qa',
+      showActual: false
+    }
   },
   mocha: {
     reporterOptions: {

diff --git a/pmm-app/tests/databaseChecks_test.js b/pmm-app/tests/databaseChecks_test.js
@@ -1,4 +1,5 @@
 Feature('Database Failed Checks');
+const config = require('../pr.codecept.js').config.helpers.Playwright;
 
 Before( async (I, pmmSettingsPage) => {
     I.Authorize();
@@ -23,7 +24,9 @@ Scenario(
         I.waitForVisible(databaseChecksPage.fields.dbCheckPanelSelector, 30);
         I.waitForVisible(databaseChecksPage.fields.disabledSTTMessageSelector, 30);
         I.see(databaseChecksPage.messages.disabledSTTMessage, databaseChecksPage.fields.disabledSTTMessageSelector);
-        I.seeElement(`${databaseChecksPage.fields.disabledSTTMessageSelector}/a`)
+        I.seeElement(databaseChecksPage.fields.disabledSTTMessageLinkSelector);
+        I.seeAttributesOnElements(databaseChecksPage.fields.disabledSTTMessageLinkSelector,
+        { href: `${config.url}${pmmSettingsPage.url}` });
     }
 );
 

diff --git a/pmm-app/tests/pages/adminPage.js b/pmm-app/tests/pages/adminPage.js
@@ -14,16 +14,12 @@ module.exports = {
     metricTitle: "//div[@class='panel-title']",
     reportTitleWithNA:
       "//span[contains(text(), 'N/A')]//ancestor::div[contains(@class,'panel-container')]//span[contains(@class,'panel-title-text')]",
-    sttDisabledFailedChecksPanelSelector: "//div[@data-qa='db-check-panel-settings-link']",
-    sttFailedChecksPanelSelector:"//div[@data-qa='db-check-panel-has-checks']",
-    checksPanelSelector:"//div[@data-qa='db-check-panel-home']",
-    pmmDropdownMenuSelector: "//a[@data-toggle='dropdown']/span[text()='PMM']",
-
+    pmmDropdownMenuSelector: locate('a[data-toggle="dropdown"] > span').withText('PMM')
   },
 
   // introducing methods
   dropdownMenuItemLocator(title) {
-    return (`//ul/li/a[text()='${title}']`)
+    return locate('ul > li > a').withText(title);
   },
 
   selectItemFromPMMDropdown(title){

diff --git a/pmm-app/tests/pages/databaseChecksPage.js b/pmm-app/tests/pages/databaseChecksPage.js
@@ -1,5 +1,7 @@
 const { I, pmmInventoryPage, pmmSettingsPage } = inject();
 const assert = require('assert');
+// xpath used here because locate('th').withText('') method does not work correctly
+const locateChecksHeader = header => `//th[text()='${header}']`;
 module.exports = {
   // insert your locators and methods here
   // setting locators
@@ -9,36 +11,40 @@ module.exports = {
     disabledSTTMessage: "Security Threat Tool is disabled. You can enable it in",
   },
   fields: {
-    dbCheckPanelSelector: "//div[@data-qa='db-check-panel']",
-    dbCheckPanelEmptySelector:"//div[@data-qa='db-check-panel-table-empty']",
-    sttEnabledDBCheckPanelSelector:"//div[@data-qa='db-check-panel-home']",
-    disabledSTTMessageSelector:"//div[@data-qa='db-check-panel-settings-link']",
-    serviceNameHeaderSelector:"//table[@data-qa='db-check-panel-table']//th[text()='Service name']",
-    detailsHeaderSelector:"//table[@data-qa='db-check-panel-table']//th[text()='Details']",
-    noOfFailedChecksHeaderSelector:"//table[@data-qa='db-check-panel-table']//th[text()='Failed Checks']",
-    serviceNameSelector:"//tbody/tr/td[1]",
-    failedChecksRowSelector:"//tbody/tr",
-    tooltipSelector: "//div[@class='ant-tooltip-inner']/div/div[1]",
-    totalFailedChecksTooltipSelector: "//div[@class='popper']//div[text()='Failed checks: ']",
-    failedChecksTooltipSelector: "//div[@class='popper']/div/div/div"
+    dbCheckPanelSelector: "$db-check-panel",
+    dbCheckPanelEmptySelector: "$db-check-panel-table-empty",
+    sttEnabledDBCheckPanelSelector: "$db-check-panel-home",
+    disabledSTTMessageSelector: "$db-check-panel-settings-link",
+    serviceNameSelector: "tbody > tr > td:first-child",
+    totalFailedChecksTooltipSelector: ".popper > div > div > div:first-of-type",
+    failedChecksTooltipSelector: ".popper > div > div > div",
+    serviceNameHeaderSelector: locateChecksHeader('Service name'),
+    detailsHeaderSelector: locateChecksHeader('Details'),
+    noOfFailedChecksHeaderSelector: locateChecksHeader('Failed Checks'),
+    disabledSTTMessageLinkSelector: locate('a').inside('$db-check-panel-settings-link'),
+    failedChecksRowSelector: "tbody > tr",
+    tooltipSelector: locate('.ant-tooltip-inner > div > div').first()
   },
-
   // introducing methods
 
+  // Info icon locator in Failed Checks column for showing tooltip with additional information
   failedChecksInfoLocator(rowNumber = 1){
       return (`//tbody/tr[${rowNumber}]/td[1]/following-sibling::td/div/span[2]`);
   },
-
+  // Locator for checks results in Failed Checks column
   numberOfFailedChecksLocator(rowNumber = 1){
       return (`//tbody/tr[${rowNumber}]/td[1]/following-sibling::td/div/span[1]`);
   },
-
+  /*
+   Method for verifying elements on a page when STT is enabled and disabled
+   default state is enabled
+   */
   verifyDatabaseChecksPageElements(stt = 'enabled'){
     switch (stt) {
       case 'enabled':
         I.seeElement(this.fields.dbCheckPanelSelector);
         I.dontSeeElement(this.fields.disabledSTTMessageSelector);
-        I.dontSeeElement(`${this.fields.disabledSTTMessageSelector}/a`);
+        I.dontSeeElement(this.fields.disabledSTTMessageLinkSelector);
         I.seeElement(this.fields.serviceNameHeaderSelector);
         I.seeElement(this.fields.noOfFailedChecksHeaderSelector);
         I.seeElement(this.fields.detailsHeaderSelector);
@@ -47,14 +53,18 @@ module.exports = {
         I.waitForVisible(this.fields.disabledSTTMessageSelector, 30);
         I.seeElement(this.fields.dbCheckPanelSelector);
         I.see(this.messages.disabledSTTMessage ,this.fields.disabledSTTMessageSelector);
-        I.seeElement(`${this.fields.disabledSTTMessageSelector}/a`);
+        I.seeElement(this.fields.disabledSTTMessageLinkSelector);
         I.dontSeeElement(this.fields.serviceNameHeaderSelector);
         I.dontSeeElement(this.fields.noOfFailedChecksHeaderSelector);
         I.dontSeeElement(this.fields.detailsHeaderSelector);
         break;
     }
   },
-
+  /*
+   Refreshing page (30 times refresh timeout) until checks appear
+   Alertmanager receives checks results every 30 seconds
+   So 30 tries should be enough to get results
+   */
   async waitForChecksToLoad() {
     let results;
     let disabledSTT;
@@ -77,6 +87,7 @@ module.exports = {
     }
   },
 
+  // Method used to verify elements on a page depending on STT state
   async verifyDatabaseChecksPageOpened(stt = 'enabled'){
     switch (stt) {
       case 'enabled':
@@ -90,6 +101,7 @@ module.exports = {
     }
   },
 
+  // Compares values in tooltip with values in table
   async compareTooltipValues(rowNumber = 1) {
     let tableNumbers = await I.grabTextFrom(this.numberOfFailedChecksLocator(rowNumber));
     let tooltipTotalNumber = await I.grabTextFrom(this.fields.totalFailedChecksTooltipSelector);
@@ -108,6 +120,10 @@ module.exports = {
     I.seeElement(this.fields.totalFailedChecksTooltipSelector);
   },
 
+  /*
+    Method takes service names listed in Database Failed checks
+     and compares names with existing Service Names in PMM Inventory
+   */
   async verifyServiceNamesExistence() {
     let serviceNames = await I.grabTextFrom(this.fields.serviceNameSelector);
     I.amOnPage(pmmInventoryPage.url);

diff --git a/pmm-app/tests/pages/homePage.js b/pmm-app/tests/pages/homePage.js
@@ -14,17 +14,17 @@ module.exports = {
     dashboardHeaderText: 'Percona Monitoring and Management',
     dashboardHeaderLocator: "//div[contains(@class, 'dashboard-header')]",
     checkUpdateButton: "#refresh",
-    triggerUpdate: "//button[@ng-click='update()']",
-    updateProgressModal: "//div[@class='modal-content']",
-    reloadButtonAfterUpgrade: "//button[@ng-click='reloadAfterUpdate()']",
-    pmmUpdateWidget: "//div[@id='pmm-update-widget']",
-    upToDateLocator: "//section[@class='state']/p[text() = 'You are up to date']",
-    availableVersion: "//div[@id='available_version']/div/p",
-    currentVersion: "//p[@id='current_version']/span",
-    lastCheckSelector: "//div[@class='last-check-wrapper']",
-    sttDisabledFailedChecksPanelSelector: "//div[@data-qa='db-check-panel-settings-link']",
-    sttFailedChecksPanelSelector:"//div[@data-qa='db-check-panel-has-checks']",
-    checksPanelSelector:"//div[@data-qa='db-check-panel-home']",
+    lastCheckSelector: ".last-check-wrapper > p",
+    triggerUpdate: "button[ng-click='update()']",
+    updateProgressModal: ".modal-content",
+    reloadButtonAfterUpgrade: "button[ng-click='reloadAfterUpdate()'",
+    pmmUpdateWidget: "#pmm-update-widget",
+    upToDateLocator: locate('p').withText('You are up to date').inside('.state'),
+    availableVersion: "#available_version > div > p",
+    currentVersion: "#current_version > span",
+    sttDisabledFailedChecksPanelSelector: "$db-check-panel-settings-link",
+    sttFailedChecksPanelSelector: "$db-check-panel-has-checks",
+    checksPanelSelector: "$db-check-panel-home",
 
   },
 
@@ -50,7 +50,11 @@ module.exports = {
     );
   },
 
-  // Refreshing page until results appear
+  /*
+   Refreshing page (30 times refresh timeout) until checks appear
+   Alertmanager receives checks results every 30 seconds
+   So 30 tries should be enough to get results
+   */
   async waitForCheckResultsToAppearInPanel() {
     let results;
     let disabledSTT;
@@ -83,19 +87,20 @@ module.exports = {
     I.dontSeeElement(this.fields.upToDateLocator);
     I.seeElement(this.fields.currentVersion);
     I.seeElement(this.fields.checkUpdateButton);
-    I.see('Last check:',`${this.fields.checkUpdateButton}/../preceding-sibling::p`);
+    I.see('Last check:',this.fields.checkUpdateButton);
     assert.notEqual(await I.grabTextFrom(this.fields.availableVersion),
         await I.grabTextFrom(this.fields.currentVersion), 'Available and Current versions match');
   },
 
   verifyPostUpdateWidgetIsPresent() {
     I.waitForVisible(this.fields.pmmUpdateWidget, 30);
+    I.waitForVisible(this.fields.upToDateLocator, 30);
     I.dontSeeElement(this.fields.availableVersion);
     I.dontSeeElement(this.fields.triggerUpdate);
     I.seeElement(this.fields.upToDateLocator);
     I.seeElement(this.fields.currentVersion);
     I.seeElement(this.fields.checkUpdateButton);
-    I.see('Last check:' , `${this.fields.checkUpdateButton}/../preceding-sibling::p`);
+    I.see('Last check:' , this.fields.lastCheckSelector);
   },
 
   async verifyVisibleService(serviceName) {