From 6e0cd968c2264872e11b5c52a7b559a277f31a50 Mon Sep 17 00:00:00 2001 From: Sanket Pathak Date: Mon, 28 Apr 2025 15:01:51 +0530 Subject: [PATCH] Automation of pipeline overview page --- .gitignore | 1 + .../pipelines/pipeline-overview.feature | 37 ++++ .../installOperatorOnClusterUsingCLI.ts | 2 + .../support/pages/pipelines/task-page.ts | 7 +- .../pipelines/pipeline-overview.ts | 160 ++++++++++++++++++ package.json | 2 +- 6 files changed, 206 insertions(+), 3 deletions(-) create mode 100644 integration-tests/cypress/features/pipelines/pipeline-overview.feature create mode 100644 integration-tests/cypress/support/step-definitions/pipelines/pipeline-overview.ts diff --git a/.gitignore b/.gitignore index b4aad3e4..cf7b793b 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ node_modules/ dist/ /coverage .devcontainer/dev.env +integration-tests/gui_test_screenshots integration-tests/videos integration-tests/screenshots yarn-error.log diff --git a/integration-tests/cypress/features/pipelines/pipeline-overview.feature b/integration-tests/cypress/features/pipelines/pipeline-overview.feature new file mode 100644 index 00000000..66453bbf --- /dev/null +++ b/integration-tests/cypress/features/pipelines/pipeline-overview.feature @@ -0,0 +1,37 @@ +@pipelines +Feature: Pipelines overview page + As a developer, I would like to view pipeline overview page in Administrator view + + + Background: + Given user is at Administrator perspective + And user clicks on Pipelines Tab + And user has created or selected namespace "aut-pipelines-overview" + And user is at pipelines overview page + + @pre-condition + Scenario: Background Steps + And user clicks on Pipelines Tab + And pipeline named "pipe-one" is available with pipeline run + + + @smoke + Scenario: Pipeline Overview page: P-13-TC01 + When user selects "aut-pipelines-overview" in Project dropdown + And user selects "Last weeks" in Time Range + And user selects "5 minute" in Refresh Interval + Then user can see PipelineRun status, Duration, Total runs, Number of PipelineRuns charts + + + @regression + Scenario: Pipeline details page from overview page task runs: P-13-TC02 + When user selects "aut-pipelines-overview" in Project dropdown + When user clicks on Pipeline "pipe-one" in pipeline overview table + Then user will be redirected to Pipeline Details page with header name "pipe-one" + + + @regression + Scenario: Pipeline run details page from overview page task runs: P-13-TC02 + When user selects "aut-pipelines-overview" in Project dropdown + When user clicks on Total Pipelineruns number of "pipe-one" in pipeline overview table + Then user will be redirected to Pipeline Details page with pipeline run tab diff --git a/integration-tests/cypress/support/pages/functions/installOperatorOnClusterUsingCLI.ts b/integration-tests/cypress/support/pages/functions/installOperatorOnClusterUsingCLI.ts index 32a6dea0..ac1d7c58 100644 --- a/integration-tests/cypress/support/pages/functions/installOperatorOnClusterUsingCLI.ts +++ b/integration-tests/cypress/support/pages/functions/installOperatorOnClusterUsingCLI.ts @@ -10,6 +10,7 @@ import { checkKnativeOperatorStatus, checkPipelineOperatorStatus, } from './checkOperatorStatus'; +import { waitForDynamicPlugin } from './installOperatorOnCluster'; import { createKnativeEventingUsingCLI, createKnativeKafkaUsingCLI, @@ -34,6 +35,7 @@ export const performPostInstallationSteps = (operator: operators): void => { switch (operator) { case operators.PipelinesOperator: checkPipelineOperatorStatus(); + waitForDynamicPlugin(); break; case operators.ServerlessOperator: cy.wait(40000); diff --git a/integration-tests/cypress/support/pages/pipelines/task-page.ts b/integration-tests/cypress/support/pages/pipelines/task-page.ts index 853e36f2..66f099de 100644 --- a/integration-tests/cypress/support/pages/pipelines/task-page.ts +++ b/integration-tests/cypress/support/pages/pipelines/task-page.ts @@ -36,9 +36,12 @@ export const tasksPage = { .click({ force: true }); }, clickOnCreatePipeline: () => { - cy.get('[data-test-id="dropdown-button"]') + cy.get('[data-test="item-create"]') .contains('Create') .click({ force: true }); - cy.byTestDropDownMenu('pipeline').click(); + // cy.byTestDropDownMenu('pipeline').click(); + cy.get( + '[data-test="list-page-create-dropdown-item-pipeline"] button', + ).click(); }, }; diff --git a/integration-tests/cypress/support/step-definitions/pipelines/pipeline-overview.ts b/integration-tests/cypress/support/step-definitions/pipelines/pipeline-overview.ts new file mode 100644 index 00000000..d5260c82 --- /dev/null +++ b/integration-tests/cypress/support/step-definitions/pipelines/pipeline-overview.ts @@ -0,0 +1,160 @@ +/* eslint-disable cypress/no-unnecessary-waiting */ +import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; +import { switchPerspective } from '../../constants/global'; +import { + pipelineBuilderPO, + pipelineDetailsPO, +} from '../../page-objects/pipelines-po'; +import { pipelineDetailsPage, pipelineRunDetailsPage } from '../../pages'; +import { perspective } from '../../pages/app'; +import { actionsDropdownMenu } from '../../pages/functions/common'; +import { tasksPage } from '../../pages/pipelines/task-page'; + +Given('user is at Administrator perspective', () => { + perspective.switchTo(switchPerspective.Administrator); +}); + +Given('user selects {string} in Project dropdown', (projectName: string) => { + cy.get('[class="project-dropdown-label"]') + .parent() + .within(($el) => { + cy.get('[class$="menu-toggle"]').click(); + cy.get('[class*="pipeline-overview__variable-dropdown"]').should( + 'be.visible', + ); + cy.get('[role="menuitem"]').contains(projectName).click(); + cy.get('[class$="menu-toggle"]').should('contain.text', projectName); + }); +}); + +When('user selects {string} in Time Range', (range: string) => { + cy.get('[class="form-group"]') + .contains('Time Range') + .parent() + .within(($el) => { + cy.get('[class$="menu-toggle"]').click(); + cy.get('[class*="pipeline-overview__variable-dropdown"]').should( + 'be.visible', + ); + cy.get('[role="menuitem"]').contains(range).click(); + cy.get('[class$="menu-toggle"]').should('contain.text', range); + }); +}); + +When('user selects {string} in Refresh Interval', (interval: string) => { + cy.get('[class="form-group"]') + .contains('Refresh Interval') + .parent() + .within(($el) => { + cy.get('[class*="pipeline-overview__dropdown-button"]').click(); + cy.get('[class*="pipeline-overview__variable-dropdown"]').should( + 'be.visible', + ); + cy.get('[role="menuitem"]').contains(interval).click(); + cy.get('[class*="pipeline-overview__dropdown-button"]').should( + 'contain.text', + interval, + ); + }); +}); + +When( + 'user can see PipelineRun status, Duration, Total runs, Number of PipelineRuns charts', + () => { + // eslint-disable-next-line cypress/unsafe-to-chain-command + cy.get('[class*="pipeline-overview__pipelinerun-status-card__title"]') + .contains('PipelineRun status') + .scrollIntoView() + .should('be.visible'); + cy.get('[class*="pipelines-overview__cards"]') + .contains('Duration') + .should('be.visible'); + cy.get('[class*="pipelines-overview__cards"]') + .contains('Total runs') + .should('be.visible'); + cy.get('[class*="pipelines-overview__cards"]') + .contains('Number of PipelineRuns') + .should('be.visible'); + }, +); + +When( + 'user clicks on Pipeline {string} in pipeline overview table', + (name: string) => { + // eslint-disable-next-line cypress/unsafe-to-chain-command + cy.get('input[aria-label="Search input"]').focus().clear().type(name); + cy.wait(5000); + cy.get(`[data-test="${name}"]`).click(); + }, +); + +When( + 'user clicks on Total Pipelineruns number of {string} in pipeline overview table', + (value: string) => { + // eslint-disable-next-line cypress/unsafe-to-chain-command + cy.get('input[aria-label="Search input"]').focus().clear().type(value); + cy.wait(5000); + // pipelinesPage.search(value); + cy.get('tr[data-test-rows="resource-row"] td>a').click({ force: true }); + }, +); + +Then( + 'user will be redirected to Pipeline Details page with header name {string}', + (pipelineName: string) => { + pipelineDetailsPage.verifyTitle(pipelineName); + }, +); + +Then('page will be redirected to pipeline Run details page', () => { + pipelineRunDetailsPage.verifyTitle(); +}); + +Then( + 'user will be redirected to Pipeline Details page with pipeline run tab', + () => { + cy.get(pipelineDetailsPO.pipelineRunsTab).should('be.visible'); + cy.url().should('include', 'Runs'); + }, +); + +When( + 'pipeline named {string} is available with pipeline run', + (pipelineName: string) => { + tasksPage.togglePipelineSidebar(); + tasksPage.openPipelinePage(); + tasksPage.togglePipelineSidebar(); + tasksPage.clickOnCreatePipeline(); + cy.get(pipelineBuilderPO.formView.switchToFormView).click(); + /* eslint-disable-next-line cypress/unsafe-to-chain-command */ + cy.get(pipelineBuilderPO.formView.name).clear().type(pipelineName); + cy.byTestID('task-list').click(); + cy.get(pipelineBuilderPO.formView.quickSearch).type('kn'); + cy.byTestID('task-cta').click(); + cy.get(pipelineBuilderPO.create).click(); + actionsDropdownMenu.selectAction('Start'); + cy.get('[data-test="breadcrumb-link"]').click(); + }, +); + +When('user clicks on Pipelines Tab', () => { + cy.get('[data-test="nav-pipelines"]').then(($el) => { + if ($el.attr('aria-expanded') === 'false') { + cy.wrap($el).click(); + } + }); + cy.get('[data-test="nav"][data-quickstart-id="qs-nav-pipelines"]') + .contains('Pipelines') + .click(); +}); + +Given('user is at pipelines overview page', () => { + cy.get('[data-test="nav-pipelines"]').then(($el) => { + if ($el.attr('aria-expanded') === 'false') { + cy.wrap($el).click(); + } + }); + cy.get('[data-test="nav"][href*="pipelines-overview"]') + .contains('Overview') + .click({ force: true }); +}); diff --git a/package.json b/package.json index 9be85265..4eccb236 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "lint": "eslint ./src ./integration-tests --fix && stylelint \"src/**/*.css\" --allow-empty-input --fix", "gherkin-lint": "./node_modules/.bin/gherkin-lint -c ./integration-tests/.gherkin-lintrc ./integration-tests/features", "test-cypress": "cd integration-tests && cypress open --env openshift=true", - "test-cypress-headless": "cd integration-tests && node --max-old-space-size=4096 ../node_modules/.bin/cypress run --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=electron} --headless cypress:cli,cypress:server:specs --spec \"cypress/features/pipelines/create-from-add-options.feature\"", + "test-cypress-headless": "cd integration-tests && node --max-old-space-size=4096 ../node_modules/.bin/cypress run --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=electron} --headless cypress:cli,cypress:server:specs --spec \"cypress/features/pipelines/create-from-add-options.feature\" \"cypress/features/pipelines/pipeline-overview.feature\"", "cypress-merge": "mochawesome-merge ./integration-tests/screenshots/cypress_report*.json > ./integration-tests/screenshots/cypress.json", "cypress-generate": "marge -o ./integration-tests/screenshots/ -f cypress-report -t 'OpenShift Console Plugin Template Cypress Test Results' -p 'OpenShift Cypress Plugin Template Test Results' --showPassed false --assetsDir ./integration-tests/screenshots/cypress/assets ./integration-tests/screenshots/cypress.json", "cypress-postreport": "yarn cypress-merge && yarn cypress-generate",