Update Cypress for V4 compatibility

cypress/e2e/Display/displaygroups.cy.js

@@ -268,8 +268,7 @@ describe('Display Groups', function() {
   it('selects multiple display groups and delete them', function() {
     // Create a new displaygroup and then search for it and delete it
     cy.createDisplaygroup('Cypress Test Displaygroup ' + testRun).then((res) => {
-      cy.server();
-      cy.route('/displaygroup?draw=2&*').as('displaygroupGridLoad');
+      cy.intercept('GET', '/displaygroup?draw=2&*').as('displaygroupGridLoad');
 
       // Delete all test displaygroups
       cy.visit('/displaygroup/view');

cypress/e2e/Layout/Editor/layout_editor_background.cy.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 Xibo Signage Ltd
+ * Copyright (C) 2025 Xibo Signage Ltd
  *
  * Xibo - Digital Signage - https://xibosignage.com
  *
@@ -19,44 +19,57 @@
  * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-describe('Layout Editor', function() {
-    beforeEach(function() {
-      cy.login();
-      cy.visit('/layout/view');
-      cy.get('button.layout-add-button').click();
-      cy.get('#layout-viewer').should('be.visible');  // Assert that the URL has changed to the layout editor
-    });
-
-    it('should update the background according to the colour set via colour picker', function() {  
-        cy.get('#properties-panel').should('be.visible'); //Verify properties panel is present
-        cy.get('.input-group-prepend').click(); //Open colour picker
-        cy.get('.colorpicker-saturation').click(68, 28);  //Select on a specific saturation
-        cy.get('#properties-panel').click(30, 60); //Click outside color picker to close
-        //Verify the selected color is applied to the background
-        cy.get('#layout-viewer').should('have.css', 'background-color', 'rgb(243, 248, 255)');
-    });
-
-    it('should update the background according to the colour set via hex input', function() {  
-        cy.get('#properties-panel').should('be.visible');
-        cy.get('#input_backgroundColor').clear().type('#b53939{enter}'); 
-        //Verify the selected color is applied to the background
-        cy.get('#layout-viewer').should('have.css', 'background-color', 'rgb(243, 248, 255)');
-    });
-
-    it('should update the layout resolution', function() {  
-        cy.get('#properties-panel').should('be.visible'); //Verify properties panel is present
-        const resName='cinema';
-        cy.get('#input_resolutionId')
-            .parent()
-            .find('.select2-selection')
-            .click();
-        cy.get('.select2-container--open input[type="search"]')
-            .type(resName);
-        cy.selectOption(resName);
-        cy.get(".layout-info-dimensions span")
-          .should("be.visible")
-          .and("contain", "4096x2304"); 
-
-    });
-
-});
+/* eslint-disable max-len */
+describe('Layout Editor Background', function() {
+  const SELECTORS = {
+    layoutAddButton: 'button.layout-add-button',
+    layoutViewer: '#layout-viewer',
+    propertiesPanel: '#properties-panel',
+    colorPickerTrigger: '.input-group-prepend',
+    colorPickerSaturation: '.colorpicker-saturation',
+    backgroundColorInput: '#input_backgroundColor',
+    resolutionDropdown: '#input_resolutionId',
+    select2Selection: '.select2-selection',
+    select2SearchInput: '.select2-container--open input[type="search"]',
+    layoutInfoDimensions: '.layout-info-dimensions span'
+  };
+
+  beforeEach(function() {
+    cy.login();
+    cy.visit('/layout/view');
+    cy.get(SELECTORS.layoutAddButton).click();
+    cy.get(SELECTORS.layoutViewer).should('be.visible'); // Assert that the URL has changed to the layout editor
+  });
+
+  it('should update the background according to the colour set via colour picker', function() {
+    cy.get(SELECTORS.propertiesPanel).should('be.visible'); // Verify properties panel is present
+    cy.get(SELECTORS.colorPickerTrigger).click(); // Open colour picker
+    cy.get(SELECTORS.colorPickerSaturation).click(68, 28); // Select on a specific saturation
+    cy.get(SELECTORS.propertiesPanel).click(30, 60); // Click outside color picker to close
+
+    // Verify the selected color is applied to the background
+    cy.get(SELECTORS.layoutViewer).should('have.css', 'background-color', 'rgb(243, 248, 255)');
+  });
+
+  it('should update the background according to the colour set via hex input', function() {
+    cy.get(SELECTORS.propertiesPanel).should('be.visible');
+    cy.get(SELECTORS.backgroundColorInput).clear().type('#b53939{enter}');
+
+    // Verify the selected color is applied to the background
+    cy.get(SELECTORS.layoutViewer).should('have.css', 'background-color', 'rgb(243, 248, 255)');
+  });
+
+  it('should update the layout resolution', function() {
+    cy.get(SELECTORS.propertiesPanel).should('be.visible');
+    const resName = 'cinema';
+
+    cy.get(SELECTORS.resolutionDropdown).parent().find(SELECTORS.select2Selection).click();
+    cy.get(SELECTORS.select2SearchInput).type(resName);
+    cy.selectOption(resName);
+
+    cy.get(SELECTORS.layoutInfoDimensions)
+      .should('be.visible')
+      .and('contain', '4096x2304');
+  });
+});
+

cypress/e2e/Layout/Editor/layout_editor_dataset.cy.js

@@ -25,91 +25,67 @@ describe('Layout Designer', function() {
     cy.login();
   });
 
-  it('should create a new layout and be redirected to the layout designer, add/delete dataset widget', function() {
-    // Create and alias for load dataset
+  it('should create a new layout, add/delete dataset widget', function() {
     cy.intercept('/dataset?start=*').as('loadDatasets');
-
-    cy.intercept({
-      method: 'DELETE',
-      url: '/region/*',
-    }).as('deleteWidget');
+    cy.intercept('DELETE', '/region/*').as('deleteWidget');
 
     cy.visit('/layout/view');
-
     cy.get('button[href="/layout"]').click();
 
-    // Open widget menu
+    // Open widget menu and add dataset widget
     cy.openToolbarMenu(0);
-
     cy.get('[data-sub-type="dataset"]').click();
     cy.get('[data-template-id="dataset_table_1"]').click();
     cy.get('.viewer-object.layout.ui-droppable-active').click();
 
-    // // Check if the widget is in the viewer
+    // Verify widget exists in the layout viewer
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').should('exist');
 
-    // Select the dataset
-    cy.get('#configureTab > .dropdown-input-group > .select2 > .selection > .select2-selection').click();
-
-    // Wait for datasets to load
+    // Select and configure the dataset
+    cy.get('#configureTab .select2-selection').click();
     cy.wait('@loadDatasets');
-
-    // Type the dataset name
     cy.get('.select2-container--open input[type="search"]').type('8 items');
-
-    // Wait for datasets to load
-    cy.wait('@loadDatasets');
-    cy.get('.select2-container--open').contains('8 items');
-    cy.get('.select2-container--open .select2-results > ul > li:first').contains('8 items').click();
+    cy.get('.select2-container--open').contains('8 items').click();
 
     cy.get('[name="lowerLimit"]').clear().type('1');
     cy.get('[name="upperLimit"]').clear().type('10');
     cy.get('.order-clause-row > :nth-child(2) > .form-control').select('Col1', {force: true});
     cy.get('.order-clause-row > .btn').click();
     cy.get(':nth-child(2) > :nth-child(2) > .form-control').select('Col2', {force: true});
 
-    // -------------
-    // -------------Appearance Tab
+    // Open Appearance Tab
     cy.get('.nav-link[href="#appearanceTab"]').click();
 
-    // Check if dataset exists exactly two columns
-    cy.get('#columnsOut')
-        .find('li')
-        .should('have.length', 2)
+    // Ensure dataset has exactly two columns
+    cy.get('#columnsOut li').should('have.length', 2);
 
-    // Select columns available/ move them to columns selected
-    cy.get('#columnsOut>li:first')
-      .trigger('mousedown', {
-        which: 1,
-      })
-      .trigger('mousemove', {
-        which: 1,
-        pageX: 583,
-        pageY: 440,
-      });
+    // Move columns to "Columns Selected"
+    cy.get('#columnsOut li:first').trigger('mousedown', {which: 1}).trigger('mousemove', {which: 1, pageX: 583, pageY: 440});
     cy.get('#columnsIn').click();
-
-    cy.get('#columnsOut>li:first')
-      .trigger('mousedown', {
-        which: 1,
-      })
-      .trigger('mousemove', {
-        which: 1,
-        pageX: 583,
-        pageY: 440,
-      });
+    cy.get('#columnsOut li:first').trigger('mousedown', {which: 1}).trigger('mousemove', {which: 1, pageX: 583, pageY: 440});
     cy.get('#columnsIn').click();
 
+    // Customize appearance settings
     cy.get('[name="showHeadings"]').check();
     cy.get('[name="rowsPerPage"]').clear().type('5');
     cy.get('[name="fontSize"]').clear().type('48');
     cy.get('[name="backgroundColor"]').clear().type('#333333');
 
-    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').parents('.designer-region').rightclick();
+    // Delete dataset widget
+    // The .moveable-control-box overlay obstructing the right-click interaction on the designer region, causing the test to fail.
+    // By invoking .hide(), we remove the overlay temporarily to allow uninterrupted interaction with the underlying elements.
+    cy.get('.moveable-control-box').invoke('hide');
+
+    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]')
+      .parents('.designer-region')
+      .scrollIntoView()
+      .should('be.visible')
+      .rightclick();
+
     cy.get('[data-title="Delete"]').click();
     cy.contains('Yes').click();
 
-    // Wait until the widget has been deleted
+    // Verify deletion
     cy.wait('@deleteWidget');
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').should('not.exist');
   });

cypress/e2e/Layout/Editor/layout_editor_empty.cy.js

@@ -88,8 +88,7 @@ describe('Layout Designer (Empty)', function() {
     });
 
     it.skip('should delete a region using the toolbar bin', () => {
-      cy.server();
-      cy.route('/layout?layoutId=*').as('reloadLayout');
+      cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
 
       // Open navigator edit
       cy.get('.editor-bottom-bar #navigator-edit-btn').click();
@@ -119,9 +118,8 @@ describe('Layout Designer (Empty)', function() {
       cy.populateLibraryWithMedia();
 
       // Create and alias for reload Layout
-      cy.server();
-      cy.route('/layout?layoutId=*').as('reloadLayout');
-      cy.route('/library/search?*').as('mediaLoad');
+      cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
+      cy.intercept('GET', '/library/search?*').as('mediaLoad');
 
       // Open library search tab
       cy.get('.editor-main-toolbar #btn-menu-0').should('be.visible').click({force: true});

cypress/e2e/Layout/Editor/layout_editor_options.cy.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 Xibo Signage Ltd
+ * Copyright (C) 2025 Xibo Signage Ltd
  *
  * Xibo - Digital Signage - https://xibosignage.com
  *
@@ -20,7 +20,7 @@
  */
 
 /* eslint-disable max-len */
-describe('Layout Editor', function() {
+describe('Layout Editor Options', function() {
   beforeEach(function() {
     cy.login();
     cy.visit('/layout/view');
@@ -35,7 +35,7 @@ describe('Layout Editor', function() {
     cy.intercept('PUT', '/layout/discard/*').as('discardLayout');
 
     // Publish layout
-    cy.wait(1000);
+    // cy.wait(1000);
     cy.openOptionsMenu();
     cy.get('#publishLayout').click();
     cy.get('button.btn-bb-Publish').click();
@@ -48,7 +48,7 @@ describe('Layout Editor', function() {
     });
 
     // Checkout published layout
-    cy.wait(1000);
+    // cy.wait(1000);
     cy.openOptionsMenu();
     cy.get('#checkoutLayout').click();