TSK-1514: Fixed and reactivated cypress tests for standalone mode

TSK-1514: Fixed and reactivated cypress tests for standalone mode

TSK-1514: Updated the cypress tests to enable local execution

TSK-1514: Updated the ci workflow

TSK-1514: Updated the path to the configuration file

TSK-1514: Added explicit wait states and updated ci workflow

TSK-1514: Reworked the cypress tests for a more stable and compliant build

TSK-1514: Fixed error regarding detached DOM elements

TSK-1514: Second try for fixing error regarding detached DOM elements

TSK-1514: Third try for fixing error regarding detached DOM elements

TSK-1514: Fixing error regarding detached DOM elements with explicit wait

TSK-1514: Added retries for more stable test runs

.github/workflows/continuous-integration.yml

@@ -191,15 +191,21 @@ jobs:
         with:
           name: ${{ env.ARTIFACTS_TASKANA_JARS_NAME }}
           path: ${{ env.ARTIFACTS_TASKANA_JARS_PATH }}
+      - name: Download taskana-web artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: ${{ env.ARTIFACTS_TASKANA_WEB_NAME }}
+          path: ${{ env.ARTIFACTS_TASKANA_WEB_PATH }}
+      - name: Build frontend
+        run: ./mvnw install -pl :taskana-web
       - name: Test
         working-directory: web
         run: npm run test -- --coverageReporters text-summary
-      #      TODO: new frontend breaks our cypress tests.
+      - name: Cypress tests
-      #      - name: Cypress tests
+        working-directory: web
-      #        working-directory: web
+        run: |
-      #        run: |
+          ../mvnw -B spring-boot:run -P history.plugin -f .. -pl :taskana-rest-spring-example-boot &
-      #          ../mvnw -B spring-boot:run -P history.plugin -f .. -pl :taskana-rest-spring-example-boot &
+          npx wait-port -t 30000 localhost:8080 && npm run e2e-standalone
-      #          npx wait-port -t 30000 localhost:8080 && npm run e2e -- --config-file ../ci/cypress.json
       - name: Upload Cypress tests
         if: failure()
         uses: actions/upload-artifact@v2

web/cypress-standalone.json

@@ -0,0 +1,15 @@
+{ 
+  "retries": 2,
+  "env": {
+    "loginUrl": "http://localhost:8080/taskana",
+    "appUrl": "http://localhost:8080/taskana/#/taskana",
+    "adminUrl": "/administration",
+    "dropdownWait": 100,
+    "testValueClassificationSelectionName": "L10303",
+    "testValueClassifications": "CY-TEST-CLASSIFICATIONS",
+    "testValueWorkbasketSelectionName": "basxet0",
+    "testValueWorkbaskets": "CY-TEST-WORKBASKETS",
+    "isLocal": false,
+    "isHistoryEnabled": true
+  }
+}

web/cypress.json

@@ -1,15 +1,14 @@
-{
+{ 
+  "retries": 2,
   "env": {
-    "baseUrl": "http://localhost:8080/taskana",
+    "appUrl": "http://localhost:4200/#/taskana",
-    "monitorUrl": "/monitor",
     "adminUrl": "/administration",
-    "appUrl": "http://localhost:8080/taskana/#/taskana",
+    "dropdownWait": 80,
-    "pageReload": 200,
-    "dropdownWait": 50,
     "testValueClassificationSelectionName": "L10303",
     "testValueClassifications": "CY-TEST-CLASSIFICATIONS",
     "testValueWorkbasketSelectionName": "basxet0",
     "testValueWorkbaskets": "CY-TEST-WORKBASKETS",
-    "isLocal": true
+    "isLocal": true,
+    "isHistoryEnabled": false
   }
 }

web/cypress/cypress/plugins/index.js

@@ -1,17 +0,0 @@
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-};

web/cypress/cypress/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

web/cypress/cypress/support/index.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// 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';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

web/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

web/cypress/integration/classifications/classifications.spec.js

@@ -1,151 +1,95 @@
 context('TASKANA Classifications', () => {
   beforeEach(() => cy.loginAs('admin'));
 
-  it('should be able to visit Classifications and filter by manual', () => {
+  it('should be possible to edit the service level of a classification', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
-
-    cy.get('#dropdown-classification-filter')
-      .click()
-      .then(() => {
-        cy.contains('MANUAL').click();
-
-        cy.get('tree-node-collection').find('tree-node').should('have.length', 2);
-      });
-  });
-
-  it('should be possible to edit the Name of a classification', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
-    cy.contains(Cypress.env('testValueClassificationSelectionName')).click();
-
-    const editedValue = 'CY-TEST';
-
-    cy.get('#classification-name').clear().type(editedValue);
-
-    cy.get('[title="Save"] > .material-icons').click();
-
-    cy.reload();
-
-    cy.wait(Cypress.env('pageReload'));
-
-    cy.get('#classification-name').should('have.value', editedValue);
-  });
-
-  it('should be possible to edit the Priority of a classification', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
-    cy.contains(Cypress.env('testValueClassificationSelectionName')).click();
-    cy.get('input[name="number"]')
-      .invoke('val')
-      .then((oldPriorityValue) => {
-        oldPriorityValue = parseFloat(oldPriorityValue);
-        cy.get('[title="increase value"] > .material-icons').click();
-        cy.get('[title="Save"] > .material-icons').click();
-        cy.reload();
-        cy.wait(Cypress.env('pageReload'));
-        cy.get('.input-group > .form-control')
-          .invoke('val')
-          .then((newValueOfPriority) => {
-            newValueOfPriority = parseFloat(newValueOfPriority);
-            expect(newValueOfPriority).to.eq(oldPriorityValue + 1);
-          });
-      });
-  });
-
-  it('should be possible to edit the Category of a classification', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
-    cy.contains(Cypress.env('testValueClassificationSelectionName')).click();
-
-    cy.get('.required > .dropdown > .btn').click();
-
-    cy.wait(Cypress.env('dropdownWait'));
-
-    cy.get('.dropdown-menu.show > li').contains('PROCESS').click();
-
-    cy.get('[title="Save"] > .material-icons').click();
-
-    cy.reload();
-
-    cy.wait(Cypress.env('pageReload'));
-
-    // assure that its process now
-
-    cy.get('.required > .dropdown > .btn').contains('PROCESS').should('be.visible');
-
-    // change back to external
-
-    cy.get('.required > .dropdown > .btn').click();
-
-    cy.wait(Cypress.env('dropdownWait'));
-
-    cy.get('.dropdown-menu.show > li').contains('EXTERNAL').should('be.visible').click();
-
-    cy.get('[title="Save"] > .material-icons').click();
-  });
-
-  it('should be possible to edit the Description of a classification', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
-    cy.contains(Cypress.env('testValueClassificationSelectionName')).click();
-
-    const editedValue = 'CY-TEST-DESC';
-
-    cy.get('#classification-description').clear().type(editedValue);
-
-    cy.get('[title="Save"] > .material-icons').click();
-
-    cy.reload();
-
-    cy.wait(Cypress.env('pageReload'));
-
-    cy.get('#classification-description').should('have.value', editedValue);
-  });
-
-  it('should be possible to edit the Service Level of a classification', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
-    cy.contains(Cypress.env('testValueClassificationSelectionName')).click();
-
     const editedValue = 'P99D';
 
+    cy.visitTestClassification();
+
     cy.get('#classification-service-level').clear().type(editedValue);
-
+    cy.get('button').contains('Save').click();
-    cy.get('[title="Save"] > .material-icons').click();
-
-    cy.reload();
-
-    cy.wait(Cypress.env('pageReload'));
 
     cy.get('#classification-service-level').should('have.value', editedValue);
   });
 
-  it('should be possible to edit classification custom 1 to 8', () => {
+
+  it('should be able to visit classifications and filter by manual', () => {
     cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
-    cy.contains(Cypress.env('testValueClassificationSelectionName')).click();
+    cy.verifyPageLoad('/classifications');
 
-    cy.wrap([1, 2, 4, 5, 6, 7, 8]).each((index) => {
+    cy.get('button[mattooltip="Filter Category"]').click().then(() => {
-      cy.get('#classification-custom-' + index)
+      cy.get('.mat-menu-content').contains('MANUAL').click()
-        .clear()
+      cy.get('tree-node-collection').find('tree-node').should('have.length', 2);
-        .type(Cypress.env('testValueClassifications'));
-
-      cy.get('[title="Save"] > .material-icons').click();
-
-      cy.reload();
-
-      cy.wait(Cypress.env('pageReload'));
-
-      cy.get('#classification-custom-' + index).should('have.value', Cypress.env('testValueClassifications'));
     });
   });
 
+
+  it('should be possible to edit the name of a classification', () => {
+    const editedValue = 'CY-TEST';
+
+    cy.visitTestClassification();
+
+    cy.get('#classification-name').clear().type(editedValue);
+    cy.get('button').contains('Save').click();
+
+    cy.get('#classification-name').should('have.value', editedValue);
+  });
+
+
+  it('should be possible to edit the category of a classification', () => {
+    cy.visitTestClassification();
+
+    cy.get('ng-form').find('mat-form-field').find('mat-select[role="listbox"]').click();
+    cy.wait(Cypress.env('dropdownWait'));
+    cy.get('mat-option').contains('PROCESS').click();
+    cy.get('button').contains('Save').click();
+
+    // assure that its process now
+    cy.get('ng-form').find('mat-form-field').find('mat-select[role="listbox"]').contains('PROCESS').should('be.visible');
+
+    // change back to external
+    cy.get('ng-form').find('mat-form-field').find('mat-select[role="listbox"]').click();
+    cy.wait(Cypress.env('dropdownWait'));
+    cy.get('mat-option').contains('EXTERNAL').should('be.visible').click();
+
+    cy.get('button').contains('Save').click();
+  });
+
+
+  it('should be possible to edit the description of a classification', () => {
+    const editedValue = 'CY-TEST-DESC';
+
+    cy.visitTestClassification();
+
+    cy.get('#classification-description').clear().type(editedValue);
+    cy.get('button').contains('Save').click();
+
+    cy.get('#classification-description').should('have.value', editedValue);
+  });
+
+
+  it('should be possible to edit the custom classification', () => {
+    cy.visitTestClassification();
+
+    cy.get('#classification-custom-1')
+      .clear()
+      .type(Cypress.env('testValueClassifications'));
+
+    cy.get('button').contains('Save').click();
+
+    cy.get('#classification-custom-1').should('have.value', Cypress.env('testValueClassifications'));
+  });
+
+
   it('should be possible to edit the application entry point', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
+    cy.visitTestClassification();
-    cy.contains(Cypress.env('testValueClassificationSelectionName')).click();
 
     cy.get('#classification-application-entry-point').clear().type(Cypress.env('testValueClassifications'));
-
+    cy.get('button').contains('Save').click();
-    cy.get('[title="Save"] > .material-icons').click();
-
-    cy.reload();
-
-    cy.wait(Cypress.env('pageReload'));
 
     cy.get('#classification-application-entry-point').should('have.value', Cypress.env('testValueClassifications'));
   });
+
 });
+
+

web/cypress/integration/history/history.spec.js

@@ -2,7 +2,15 @@ context('TASKANA History', () => {
   beforeEach(() => cy.loginAs('admin'));
 
   it('should display the history', () => {
-    cy.visit(Cypress.env('appUrl') + '/history');
+    if (Cypress.env('isHistoryEnabled')) {
-    cy.get('.table > form > .table-body > .table-row').should('have.length.greaterThan', 10);
+      cy.visit(Cypress.env('appUrl') + '/history');
+      cy.verifyPageLoad('/history');
+
+      cy.get('table').find('tr').should('have.length.greaterThan', 8);
+    } else {
+      cy.log('History plugin not enabled - No need for testing history functionality');
+    }
+
   });
+
 });

web/cypress/integration/login/login.spec.js

@@ -1,33 +1,7 @@
 context('TASKANA Login', () => {
-  if (Cypress.env('isLocal')) {
+  
-    it('should not be run because its local development', () => {
+    it('should login depending on current configuration', () => {
-      cy.log('Local development - No need for testing login functionality');
+      cy.loginAs('admin');
-      expect(true).to.be.true;
     });
-  } else {
+  
-    it('should redirect to login when not logged in yet', () => {
-      cy.visit(Cypress.env('baseUrl') + '/taskana/workplace');
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq(Cypress.env('baseUrl') + '/login');
-      });
-    });
-
-    it('should login via taskana login page', () => {
-      cy.visit(Cypress.env('baseUrl') + '/login');
-
-      cy.get('#username').type('admin').should('have.value', 'admin');
-
-      cy.get('#password').type('admin').should('have.value', 'admin');
-
-      cy.get('#login-submit').click();
-
-      cy.reload();
-      cy.wait(Cypress.env('pageReload'));
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq(Cypress.env('baseUrl') + '/#/taskana/workplace/tasks');
-      });
-    });
-  }
 });

web/cypress/integration/monitor/monitor.spec.js

@@ -2,62 +2,41 @@ context('TASKANA Monitor', () => {
   beforeEach(() => cy.loginAs('admin'));
 
   it('should visit taskana tasks monitor page', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('monitorUrl'));
+    cy.visit(Cypress.env('appUrl') + '/monitor');
-    cy.location().should((location) => {
+    cy.verifyPageLoad('/monitor');
-      expect(location.href).to.eq(Cypress.env('appUrl') + Cypress.env('monitorUrl'));
-    });
 
-    cy.get('li.active').find('> a').should('have.text', 'Tasks');
+    cy.get('nav').find('.mat-tab-label-active').should('contain', 'Tasks');
-
+    cy.get('canvas.chartjs-render-monitor').should('be.visible');
-    cy.get('.col-xs-12 > .chartjs-render-monitor').should('be.visible');
   });
 
+
   it('should visit taskana workbaskets monitor page', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('monitorUrl'));
+    cy.visit(Cypress.env('appUrl') + '/monitor');
-    cy.location().should((location) => {
+    cy.verifyPageLoad('/monitor');
-      expect(location.href).to.eq(Cypress.env('appUrl') + Cypress.env('monitorUrl'));
-    });
 
-    cy.get('.nav a').contains('Workbaskets').click();
+    cy.get('nav').find('a').contains('Workbaskets').click();
-
+    cy.get('nav').find('.mat-tab-label-active').should('contain', 'Workbaskets');
-    cy.get('li.active').find('> a').should('have.text', 'Workbaskets');
+    cy.get('canvas.chartjs-render-monitor').should('be.visible');
-
-    cy.get('.panel > .panel-body').should('be.visible');
-
-    cy.get('.row > .col-xs-12 > > .chartjs-render-monitor').should('be.visible');
   });
 
+
   it('should visit taskana classifications monitor page', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('monitorUrl'));
+    cy.visit(Cypress.env('appUrl') + '/monitor');
-    cy.location().should((location) => {
+    cy.verifyPageLoad('/monitor');
-      expect(location.href).to.eq(Cypress.env('appUrl') + Cypress.env('monitorUrl'));
-    });
 
-    cy.get('.nav a').contains('Classifications').click();
+    cy.get('nav').find('a').contains('Classifications').click();
-
+    cy.get('nav').find('.mat-tab-label-active').should('contain', 'Classifications');
-    cy.get('li.active').find('> a').should('have.text', 'Classifications');
+    cy.get('canvas.chartjs-render-monitor').should('be.visible');
-
-    cy.get('.panel > .panel-body').should('be.visible');
-
-    cy.get('.panel-body > .row > .col-xs-12 > [style="display: block;"] > .chartjs-render-monitor').should(
-      'be.visible'
-    );
   });
 
+
   it('should visit taskana timestamp monitor page', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('monitorUrl'));
+    cy.visit(Cypress.env('appUrl') + '/monitor');
-    cy.location().should((location) => {
+    cy.verifyPageLoad('/monitor');
-      expect(location.href).to.eq(Cypress.env('appUrl') + Cypress.env('monitorUrl'));
-    });
 
-    cy.get('.nav a').contains('Timestamp').click();
+    cy.get('nav').find('a').contains('Timestamp').click();
-
+    cy.get('nav').find('.mat-tab-label-active').should('contain', 'Timestamp');
-    cy.get('li.active').find('> a').should('have.text', 'Timestamp');
+    cy.contains('TimestampReport').should('be.visible');
-
-    cy.get('.panel > .panel-body').should('be.visible');
-
-    cy.get(
-      '.panel > .panel-body > taskana-monitor-report-table > .report > .table-header > .table-row > .table-cell--justify'
-    ).should('be.visible');
   });
+
 });

web/cypress/integration/workbaskets/workbaskets.spec.js

@@ -1,134 +1,119 @@
 context('TASKANA Workbaskets', () => {
   beforeEach(() => cy.loginAs('admin'));
 
-  it('should be able to see all Workbaskets', () => {
+  it('should be able to see all workbaskets', () => {
     cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/workbaskets');
-    cy.location().should((location) => {
+    cy.verifyPageLoad('/workbaskets');
-      expect(location.href).to.eq(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/workbaskets');
-    });
-    // should contain #wb-list-container
   });
 
-  it.skip('should be able to filter workbaskets via owner', () => {
-    cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/workbaskets').then(() =>
-      cy.get('#collapsedMenufilterWb').click()
-    );
 
-    cy.get('[placeholder="Filter owner"]')
+  it('should be able to filter workbaskets by name', () => {
-      .type('user-1-2')
+    cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/workbaskets');
+    cy.verifyPageLoad('/workbaskets');
+
+    cy.get('input[mattooltip="Type to filter by name"]')
+      .type(Cypress.env('testValueWorkbasketSelectionName'))
       .type('{enter}')
       .then(() => {
-        // Length equal to 2 because the empty starting element of the list, only one ListEntry with values added
+        cy.get('mat-selection-list[role="listbox"]').should('have.length', 1);
-        cy.get('#wb-list-container').find('.list-group-item').should('have.length', 2);
       });
   });
 
-  it('should be possible to edit workbasket information custom 1 to 4', () => {
+
+  it('should be possible to edit workbasket custom information', () => {
     cy.visitTestWorkbasket();
 
-    cy.wrap([1, 2, 4]).each((index) => {
+    cy.get('#wb-custom-1')
-      cy.get('#wb-custom-' + index)
+      .clear()
-        .clear()
+      .type(Cypress.env('testValueWorkbaskets'));
-        .type(Cypress.env('testValueWorkbaskets'));
 
-      cy.saveWorkbaskets();
+    cy.saveWorkbaskets();
-      cy.reloadPageWithWait();
+    cy.get('#wb-custom-1').should('have.value', Cypress.env('testValueWorkbaskets'));
-
-      cy.get('#wb-custom-' + index).should('have.value', Cypress.env('testValueWorkbaskets'));
-    });
   });
 
-  it('should be possible to edit workbasket information OrgLevel 1 to 4', () => {
+
+  it('should be possible to edit workbasket information orgLevel', () => {
     cy.visitTestWorkbasket();
 
-    cy.wrap([1, 2, 3, 4]).each((index) => {
+    cy.get('input[name="workbasket.orgLevel1"]')
-      cy.get('#wb-org-level-' + index)
+      .clear()
-        .clear()
+      .type(Cypress.env('testValueWorkbaskets'));
-        .type(Cypress.env('testValueWorkbaskets'));
 
-      cy.saveWorkbaskets();
+    cy.saveWorkbaskets();
-      cy.reloadPageWithWait();
+    cy.get('input[name="workbasket.orgLevel1"]').should('have.value', Cypress.env('testValueWorkbaskets'));
-
-      cy.get('#wb-org-level-' + index).should('have.value', Cypress.env('testValueWorkbaskets'));
-    });
   });
 
+
   it('should be possible to edit workbasket description', () => {
     cy.visitTestWorkbasket();
 
-    cy.get('#wb-description')
+    cy.get('#workbasket-description')
       .clear()
       .type(Cypress.env('testValueWorkbaskets'))
       .then(() => {
         cy.saveWorkbaskets();
-        cy.reloadPageWithWait();
+        cy.get('#workbasket-description').should('have.value', Cypress.env('testValueWorkbaskets'));
-        cy.get('#wb-description').should('have.value', Cypress.env('testValueWorkbaskets'));
       });
   });
 
-  it('should be possible to edit the Type of a workbasket', () => {
+
+  it('should be possible to edit the type of a workbasket', () => {
     cy.visitTestWorkbasket();
 
-    cy.get('#dropdownMenu24').click();
+    cy.get('mat-form-field').contains('mat-form-field', 'Type').find('mat-select').click();
-
     cy.wait(Cypress.env('dropdownWait'));
-
+    cy.get('mat-option').contains('Clearance').click();
-    cy.get('.col-xs-4 > .dropdown > .dropdown-menu > li > ').contains('Clearance').click();
-
     cy.saveWorkbaskets();
 
-    cy.reloadPageWithWait();
+    // assure that its Clearance now
-
+    cy.get('mat-form-field').contains('mat-form-field', 'Type').contains('Clearance').should('be.visible');
-    // assure that its process now
-
-    cy.get('#dropdownMenu24').contains('Clearance').should('be.visible');
-
-    // change back to external
-
-    cy.get('#dropdownMenu24').click();
 
+    // change back to Group
+    cy.get('mat-form-field').contains('mat-form-field', 'Type').find('mat-select').click();
     cy.wait(Cypress.env('dropdownWait'));
-
+    cy.get('mat-option').contains('Group').should('be.visible').click();
-    cy.get('.col-xs-4 > .dropdown > .dropdown-menu > li > ').contains('Group').should('be.visible').click();
 
     cy.saveWorkbaskets();
   });
 
+
   it('should be possible to add new access', () => {
     cy.visitTestWorkbasket();
     cy.visitWorkbasketsAccessPage();
 
-    cy.get('[title="Add new access"]')
+    cy.get('button[mattooltip="Add new access"')
       .click()
       .then(() => {
-        cy.get('[data-cy=typeahead_input].ng-pristine.ng-invalid')
+        cy.get('mat-form-field').contains('mat-form-field', "Access id").find('input')
-          // .contains("Access id is required")
           .type('teamlead-2');
-        cy.get('.input-group > .dropdown > .dropdown-menu >').click();
+        cy.get('input[aria-label="checkAll"]:first').click();
         cy.saveWorkbaskets();
       });
-    cy.reloadPageWithWait();
+
     cy.visitWorkbasketsAccessPage();
     cy.get('table#table-access-items > tbody > tr').should('have.length', 2);
   });
 
-  it.skip('should be possible to add a distribution target', () => {
-    cy.server();
-    cy.route(
-      'http://localhost:8080/taskana/api/v1/workbaskets/WBI:000000000000000000000000000000000900/distribution-targets'
-    ).as('workbasketsDistributionTargets');
 
+  it('should be possible to add a distribution target', () => {
     cy.visitTestWorkbasket();
     cy.visitWorkbasketsDistributionTargetsPage();
-    cy.get('#dual-list-Left > .dual-list.list-left > .infinite-scroll > .list-group > :nth-child(1)').click();
+
-    cy.get('.list-arrows > .move-right').contains('chevron_right').click();
+    cy.get('taskana-administration-workbasket-distribution-targets-list[header="Available distribution targets"]').find('mat-list-option:first')
+      .find('mat-pseudo-checkbox').click()
+    cy.get('button').contains('Add selected distribution targets').click()
+
     cy.saveWorkbaskets();
-    cy.reloadPageWithWait();
+
     cy.visitWorkbasketsDistributionTargetsPage();
-    cy.wait('@workbasketsDistributionTargets');
+    cy.get('taskana-administration-workbasket-distribution-targets-list[header="Selected distribution targets"]').find('mat-selection-list').should('not.be.empty');
-    cy.get('#dual-list-right > .dual-list.list-left > .infinite-scroll > .list-group').should('have.length', 1);
+
-    cy.get('#dual-list-right > .dual-list.list-left > .infinite-scroll > .list-group')
+    // undo changes
-      .contains('user-1-3')
+    cy.get('taskana-administration-workbasket-distribution-targets-list[header="Selected distribution targets"]').find('mat-list-option:first')
-      .should('exist');
+      .find('mat-pseudo-checkbox').click()
+    cy.get('button').contains('Remove selected distribution target').click()
+
+    cy.saveWorkbaskets();
   });
+
 });

web/cypress/support/commands.js

@@ -1,59 +1,55 @@
-// ***********************************************
+Cypress.Commands.add('visitWorkbasketsInformationPage', () => {
-// This example commands.js shows you how to
+  cy.get('mat-tab-header').contains('Information').click();
-// create various custom commands and overwrite
+});
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
 Cypress.Commands.add('visitWorkbasketsAccessPage', () => {
-  cy.get('.nav a').contains('Access').click();
+  cy.get('mat-tab-header').contains('Access').click();
 });
 
 Cypress.Commands.add('visitWorkbasketsDistributionTargetsPage', () => {
-  cy.get('.nav a').contains('Distribution targets').click();
+  cy.get('mat-tab-header').contains('Distribution Targets').click();
 });
 
 Cypress.Commands.add('saveWorkbaskets', () => {
-  cy.get('.tab-pane.active > > .panel>.panel-heading>.pull-right > .btn-primary').click();
+  cy.get('button').contains('Save').click();
+});
+
+Cypress.Commands.add('verifyPageLoad', (path) => {
+  cy.location('hash', {timeout: 10000}).should('include', path);
 });
 
 Cypress.Commands.add('visitTestWorkbasket', () => {
   cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/workbaskets');
-  cy.contains(Cypress.env('testValueWorkbasketSelectionName')).click();
+  cy.verifyPageLoad('/workbaskets');
+
+  // since the list is loaded dynamically, we need to explicitly wait 400ms for the results
+  // in order to avoid errors regarding detached DOM elements although it is a bad practice
+  cy.wait(400);
+  cy.get('mat-selection-list').contains(Cypress.env('testValueWorkbasketSelectionName'))
+    .should('exist').click();
+  cy.visitWorkbasketsInformationPage();
 });
 
-Cypress.Commands.add('reloadPageWithWait', () => {
+Cypress.Commands.add('visitTestClassification', () => {
-  cy.reload();
+  cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/classifications');
-  cy.wait(Cypress.env('pageReload'));
+  cy.verifyPageLoad('/classifications');
+
+  cy.get('taskana-administration-tree').contains(Cypress.env('testValueClassificationSelectionName'))
+    .should('exist').click();
 });
 
 Cypress.Commands.add('loginAs', (username) => {
-  return cy.request({
+  if (Cypress.env('isLocal')) {
-    method: 'POST',
+      cy.log('Local development - No need for testing login functionality');
-    url: Cypress.env('baseUrl') + '/login',
+  } else {
-    form: true,
+      cy.visit(Cypress.env('loginUrl') + '/login');
-    body: {
+      // not calling verifyPageLoad as we cannot verify via hash in this case
-      username,
+      cy.location('pathname', {timeout: 10000}).should('include', '/login');
-      password: username
+
+      cy.get('#username').type('admin').should('have.value', 'admin');
+      cy.get('#password').type('admin').should('have.value', 'admin');
+      cy.get('#login-submit').click();
+
+      cy.verifyPageLoad('/workplace/tasks');
     }
-  });
 });

web/package.json

@@ -14,8 +14,9 @@
     "lint:fix": "eslint --ext .ts src --fix",
     "format": "prettier --write \"**/*.{js,ts,css,scss,md,json,yml}\"",
     "format:html": "prettier --write \"**/*.{html,}\"",
-    "e2e": "cypress install && cypress run",
+    "e2e-dev": "cypress install && cypress run",
-    "e2e:open": "cypress install && cypress open"
+    "e2e-dev:open": "cypress install && cypress open",
+    "e2e-standalone": "cypress install && cypress run --config-file cypress-standalone.json"
   },
   "private": true,
   "dependencies": {