diff --git a/cypress/e2e/tests/administration/custom-migration-targets/crud.test.ts b/cypress/e2e/tests/administration/custom-migration-targets/crud.test.ts index 1f2cd7b3a..81fa80961 100644 --- a/cypress/e2e/tests/administration/custom-migration-targets/crud.test.ts +++ b/cypress/e2e/tests/administration/custom-migration-targets/crud.test.ts @@ -200,17 +200,14 @@ describe(["@tier1", "@interop"], "Custom Migration Targets CRUD operations", () target1.create(); } closeSuccessAlert(); + cy.wait("@getRule"); const dragButton = cy .contains(CustomMigrationTargetView.card, target.name, { timeout: 12 * SEC }) .find(CustomMigrationTargetView.dragButton); // Moves the custom migration target to the first place - cy.wait("@getRule"); - dragButton.drag(commonView.optionMenu, { - force: true, - waitForAnimations: false, - }); + cy.dragAndDrop(dragButton, cy.get(CustomMigrationTargetView.dragAndDropSection)); Analysis.open(true); const application = new Analysis( diff --git a/cypress/e2e/views/custom-migration-target.view.ts b/cypress/e2e/views/custom-migration-target.view.ts index 6fc5c5744..e91c1f426 100644 --- a/cypress/e2e/views/custom-migration-target.view.ts +++ b/cypress/e2e/views/custom-migration-target.view.ts @@ -24,4 +24,5 @@ export enum CustomMigrationTargetView { card = ".pf-v5-c-card", cardContainer = "div.dnd-grid", languageDropdown = "#action-select-toggle", + dragAndDropSection = ".dnd-grid", } diff --git a/cypress/support/commands.js b/cypress/support/commands.ts similarity index 80% rename from cypress/support/commands.js rename to cypress/support/commands.ts index 92ed3e06d..43122fe4c 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.ts @@ -41,3 +41,14 @@ require("cy-verify-downloads").addCustomCommand(); require("cypress-downloadfile/lib/downloadFileCommand"); + +Cypress.Commands.add( + "dragAndDrop", + (dragElement: Cypress.Chainable, dropElement: Cypress.Chainable) => { + dragElement + .realMouseDown({ button: "left", position: "center" }) + .realMouseMove(0, 10, { position: "center" }) + .wait(200); + dropElement.realMouseMove(0, 0, { position: "topLeft" }).realMouseUp().wait(200); + } +); diff --git a/cypress/support/e2e.js b/cypress/support/e2e.ts similarity index 71% rename from cypress/support/e2e.js rename to cypress/support/e2e.ts index 971424183..e2caf4852 100644 --- a/cypress/support/e2e.js +++ b/cypress/support/e2e.ts @@ -13,20 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** // Import commands.js using ES2015 syntax: import "./commands"; @@ -49,6 +35,11 @@ require("cypress-grep")(); // https://github.com/Brugui7/cypress-log-filter require("cypress-log-filter"); +// Allows to handle special actions like drag-n-drop +// The use of this library is limited to Chromium-based browsers +// https://github.com/dmtrKovalenko/cypress-real-events +import "cypress-real-events"; + /** Hide XHR logs line */ // TODO: Improve by implementing a configuration parameter const app = window.top; @@ -60,3 +51,18 @@ if (app && !app.document.head.querySelector("[data-hide-command-log-request]")) app.document.head.appendChild(style); } + +declare global { + namespace Cypress { + interface Chainable { + /** + * Drags an element to a drop location. + * This custom command works only on Chromium-based browsers + * @example cy.dragAndDrop(cy.get('#source'), cy.get('#target')) + * @param dragElement + * @param dropElement + */ + dragAndDrop(dragElement: Cypress.Chainable, dropElement: Cypress.Chainable): void; + } + } +} diff --git a/package-lock.json b/package-lock.json index 587ef121a..5abe38a65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "cypress-log-filter": "^1.0.4", "cypress-multi-reporters": "^1.5.0", "cypress-react-selector": "^2.3.17", + "cypress-real-events": "^1.13.0", "cypress-xpath": "^1.6.2", "decompress": "^4.2.1", "faker": "^5.5.3", @@ -3993,6 +3994,14 @@ "resq": "1.10.2" } }, + "node_modules/cypress-real-events": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.13.0.tgz", + "integrity": "sha512-LoejtK+dyZ1jaT8wGT5oASTPfsNV8/ClRp99ruN60oPj8cBJYod80iJDyNwfPAu4GCxTXOhhAv9FO65Hpwt6Hg==", + "peerDependencies": { + "cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x" + } + }, "node_modules/cypress-tags": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/cypress-tags/-/cypress-tags-1.1.2.tgz", diff --git a/package.json b/package.json index 056557ff2..42d580fbd 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "cypress-log-filter": "^1.0.4", "cypress-multi-reporters": "^1.5.0", "cypress-react-selector": "^2.3.17", + "cypress-real-events": "^1.13.0", "cypress-xpath": "^1.6.2", "decompress": "^4.2.1", "faker": "^5.5.3", diff --git a/tsconfig.json b/tsconfig.json index 99ac5f34e..86e59d1bf 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,6 +7,7 @@ "cypress-xpath", "@testing-library/cypress", "cypress-react-selector", + "cypress-real-events", "node" ], "skipLibCheck": true,