diff --git a/codeceptjs-e2e/tests/QAN/common_test.js b/codeceptjs-e2e/tests/QAN/common_test.js index 7584b8802..c4f219225 100644 --- a/codeceptjs-e2e/tests/QAN/common_test.js +++ b/codeceptjs-e2e/tests/QAN/common_test.js @@ -28,7 +28,10 @@ Scenario('PMM-T269 - Verify QAN UI Elements are displayed @qan', async ({ I, que await queryAnalyticsPage.filters.selectFilterInGroupAtPosition(filter, randomFilterValue); I.assertTrue((await queryAnalyticsPage.data.getRowCount()) > 0, `No values for filter: "${filter}" were displayed`); - await queryAnalyticsPage.filters.selectFilterInGroupAtPosition(filter, randomFilterValue); + // Selecting re-sorts the group, so clicking the same position again would + // toggle a different value and leave this group's filter applied. + queryAnalyticsPage.filters.resetAllFilters(); + queryAnalyticsPage.waitForLoaded(); } const serverNodeName = homePage.pmmServerName; @@ -49,6 +52,9 @@ Scenario('PMM-T269 - Verify QAN UI Elements are displayed @qan', async ({ I, que queryAnalyticsPage.filters.selectContainFilterInGroup(serviceFilter, 'Service Name'); I.wait(3); + // The filter groups are virtualised, so a selected value that sits below the + // group's viewport is not rendered at all -- "Show selected" brings it back. + queryAnalyticsPage.filters.showSelectedFilters(); const displayedServiceName = await I.grabTextFrom(queryAnalyticsPage.filters.fields.checkedFilters()); I.assertContain( diff --git a/codeceptjs-e2e/tests/pages/components/queryAnalytics/queryAnalyticsFilters.js b/codeceptjs-e2e/tests/pages/components/queryAnalytics/queryAnalyticsFilters.js index e956dc218..06db53aa3 100644 --- a/codeceptjs-e2e/tests/pages/components/queryAnalytics/queryAnalyticsFilters.js +++ b/codeceptjs-e2e/tests/pages/components/queryAnalytics/queryAnalyticsFilters.js @@ -17,7 +17,9 @@ class QueryAnalyticsFilters { filterLinkByNameAndGroup: (filterName, groupName) => this.fields.filterByNameAndGroup(filterName, groupName).find('a'), filterPercentageByNameAndGroup: (filterName, groupName) => this.fields.filterByNameAndGroup(filterName, groupName).find('//span').at(3), filterName: locate('//span[@class="checkbox-container__label-text"]'), - checkedFilters: () => this.fields.filterCheckboxes.find('//input[@type="checkbox" and @checked]//following-sibling::span[@class="checkbox-container__label-text"]'), + // ':checked' reads the live property; the 'checked' attribute React + // writes only reflects the state the input was mounted with. + checkedFilters: () => locate('div[data-testid*="filter-checkbox"] input[type="checkbox"]:checked ~ span.checkbox-container__label-text'), groupElementsCount: (groupName) => `//span[contains(text(), '${groupName}')]/following-sibling::span[contains(text(), 'Show all')]`, }; this.buttons = {