test: use data-cy for object identification

alias for routes from optimization and remove button that is not useful from test

cypress/e2e/optimization.cy.js

@@ -25,19 +25,18 @@ describe('Optimization component', () => {
       cy.get('.sidebar-content')
 
       // shows routes correctly
-      cy.get('.optimization-routes').should('have.length', 1)
-      cy.get('.optimization-routes').contains('Distance')
-      cy.get('.optimization-routes').contains('Duration')
-      cy.get('.optimization-routes').contains('Service time')
-      cy.get('.optimization-routes').contains('Deliveries')
-      cy.get('.optimization-routes').contains('Pickups')
+      cy.get('[data-cy=optimization-routes]').as('routes')
+      cy.get('@routes').should('have.length', 1)
+      cy.get('@routes').contains('Distance')
+      cy.get('@routes').contains('Duration')
+      cy.get('@routes').contains('Service time')
+      cy.get('@routes').contains('Deliveries')
+      cy.get('@routes').contains('Pickups')
       cy.get('.route-details').should('have.length', 1)
       cy.get('.step').should('have.length', 3)
 
       // shows buttons
-      cy.get('.skill-opt-btn')
-      cy.get('.add-place-btn')
-
+      cy.get('[data-cy="manage-skills"]').should('be.visible')
     })
 
     it('shows job correctly', () => {

src/fragments/forms/map-form/components/optimization/Optimization.vue

@@ -60,7 +60,7 @@
         <v-tooltip bottom style="float: right">
           <template v-slot:activator="{ on }">
             <div class="skill-opt-btn">
-              <v-btn class="skill-opt-btn"
+              <v-btn data-cy="manage-skills" class="skill-opt-btn"
                      outline small fab @click="manageSkills">
                 <v-icon :title="$t('optimization.manage') + $t('optimization.skills')" color="dark" :medium="$lowResolution">edit</v-icon>
               </v-btn>

src/fragments/forms/map-form/components/optimization/components/optimization-details/OptimizationDetails.vue

@@ -10,7 +10,7 @@
       <v-alert :value="true" type="warning" style="color:black">{{$t('optimizationDetails.warningUnassigned')}} {{ unassignedJobsString }}</v-alert>
     </div>
     <v-expansion-panel slot="content" class="no-shadow" v-if="hasRoutes" :value="panelExtended" :expand="true">
-      <v-expansion-panel-content class="optimization-routes" :key="routeIndex" v-for="(route, routeIndex) in parsedRoutes">
+      <v-expansion-panel-content data-cy="optimization-routes" class="optimization-routes" :key="routeIndex" v-for="(route, routeIndex) in parsedRoutes">
         <div slot="header">
           <h4><v-icon :color="vehicleColors(route.vehicle)" style="padding: 0 5px 0 0">{{ getVehicleIconName(route.vehicle) }}</v-icon>{{$t('routeDetails.route')}} {{routeIndex + 1}} (Vehicle {{route.vehicle}})
             <v-btn icon target="_blank" :href="generateRouteURL(routeIndex)" v-if="parsedRoutes.length > 0" :title="$t('optimizationDetails.getInstructions')">