Merge pull request #20 from ETS-TAF/develop

Add front end selenium to selenium branch

backend/Dockerfile

@@ -1,10 +1,9 @@
-FROM openjdk:17-jdk as builder
+FROM maven:3.9.5-sapmachine-17 as builder
 
 WORKDIR /code
 COPY . .
 
-RUN chmod +x ./mvnw
-RUN ./mvnw package -D maven.test.skip
+RUN mvn package -D maven.test.skip
 
 FROM openjdk:17-jdk-alpine as runner
 

frontend/src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { ProfileComponent } from './profile/profile.component';
 import { BoardUserComponent } from './board-user/board-user.component';
 import { BoardAdminComponent } from './board-admin/board-admin.component';
 import { TestApiComponent } from './interface-test-api/test-api/test-api.component';
+import { TestSeleniumComponent } from './selenium/test-selenium.component';
 
 const routes: Routes = [
   { path: 'home', component: HomeComponent },
@@ -19,6 +20,7 @@ const routes: Routes = [
   { path: 'user', component: BoardUserComponent },
   { path: 'admin', component: BoardAdminComponent },
   { path: 'test-api', component: TestApiComponent },
+  { path: 'test-selenium', component: TestSeleniumComponent },
   { path: '', redirectTo: 'home', pathMatch: 'full' }
 ];
 

frontend/src/app/app.component.html

@@ -8,6 +8,9 @@
       <li class="nav-item">
         <a href="/test-api" class="nav-link" routerLink="test-api">Test API </a>
       </li>
+      <li class="nav-item">
+        <a href="/test-selenium" class="nav-link" routerLink="test-selenium">Test Selenium </a>
+      </li>
       <li class="nav-item" *ngIf="showAdminBoard">
         <a href="/admin" class="nav-link" routerLink="admin">Admin Board</a>
       </li>

frontend/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { BoardUserComponent } from './board-user/board-user.component';
 import { authInterceptorProviders } from './_helpers/auth.interceptor';
 import { ProjectComponent } from './project/project.component';
 import { TestApiComponent } from './interface-test-api/test-api/test-api.component';
+import { TestSeleniumComponent } from './selenium/test-selenium.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +27,8 @@ import { TestApiComponent } from './interface-test-api/test-api/test-api.compone
     BoardAdminComponent,
     BoardUserComponent,
     ProjectComponent,
-    TestApiComponent
+    TestApiComponent,
+    TestSeleniumComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/selenium/test-selenium.component.html

@@ -0,0 +1,98 @@
+<br><br>
+<div class="modal fade" tabindex="-1" id="addAction" aria-labelledby="Add new Action" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
+    <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content">
+        <div class="modal-header">
+            <h5 class="modal-title">New Action</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <form>
+        <div class="modal-body">
+            <div class="input-group mb-3">
+                <select class="form-select" id="action" (change)="actionChose();" required>
+                    <option value="" selected>Action</option>
+                    <option value="1">GoToUrl</option>
+                    <option value="2">FillField</option>
+                    <option value="3">GetAttribute</option>
+                    <option value="4">GetPageTitle</option>
+                    <option value="5">Clear</option>
+                    <option value="6">Click</option>
+                    <option value="7">IsDisplayed</option>
+                </select>
+                <input type="text" class="form-control" placeholder="Object" id="object" disabled/>
+                <input type="text" class="form-control" placeholder="Input" id="input" disabled/>
+                <input type="text" class="form-control" placeholder="Target" id="target" disabled/>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-secondary" data-bs-dismiss="modal" id="close">Close</button>
+            <input type="submit" class="btn btn-primary" (click)="submitAction()" value="Add Action"/>
+        </div>
+        </form>
+        </div>
+    </div>
+</div>
+<div class="modal fade" tabindex="-1" id="addCase" aria-labelledby="Add new Case" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+        <div class="modal-header">
+            <h5 class="modal-title">New Case</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <form>
+            <div class="modal-body">
+            <input type="text" class="form-control" placeholder="Case Name" id="caseName"/>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-secondary" data-bs-dismiss="modal" id="close2">Close</button>
+            <input type="submit" class="btn btn-primary" (click)="submitCase()" value="Add Case"/>
+        </div>
+        </form>
+        </div>
+    </div>
+</div>
+<div class="container">
+    <div class="btn-group" role="group" aria-label="Basic outlined example">
+        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addCase">
+            Add New Case
+        </button>
+        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAction" id="addActionButton" disabled>
+            Add New Action
+        </button>
+        <button type="button" class="btn btn-success" (click)="runMethod(cases)">Run</button>
+    </div><br><br>
+    <div class="container" *ngFor="let case of cases">
+
+        <h4>Case #{{case.id}} : {{case.caseName}}</h4>
+        <span>
+            <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" (click)="deleteCase(case.id)">
+                Delete
+            </button>
+        </span>
+        <table class="table table-hover">
+            <thead>
+                <tr>
+                    <th scope="col">Action</th>
+                    <th scope="col">Object</th>
+                    <th scope="col">Input</th>
+                    <th scope="col">Target</th>
+                    <th scope="col" style="width: 70px !important;"></th>
+                </tr>
+            </thead>
+            <tbody class="table-group-divider">
+                <tr *ngFor="let action of case.actions">
+                    <td>{{action.action}}</td>
+                    <td>{{action.object}}</td>
+                    <td>{{action.input}}</td>
+                    <td>{{action.target}}</td>
+                    <td>
+                        <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" (click)="deleteAction(case.id,action.id)">
+                        Delete
+                        </button>
+                    </td>
+                </tr>
+
+            </tbody>
+        </table><br><br>
+    </div>
+</div>

frontend/src/app/selenium/test-selenium.component.ts

@@ -0,0 +1,118 @@
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-test-selenium',
+  templateUrl: './test-selenium.component.html',
+  styleUrls: ['./test-selenium.component.css']
+})
+export class TestSeleniumComponent {
+    constructor(private http: HttpClient) { }
+
+    counterAction: number=1;
+    counterCase: number=0;
+    cases : {
+        case_id: number;
+        caseName: string;
+        actions: {
+            action_id: number;
+            action_type_id:number;
+            action_type_name: string;
+            object: string;
+            input: string;
+            target: string;
+        }[] ;
+    }[] = [];
+
+    runMethod(cases: any) {
+        const apiUrl = '/api/testselenium';
+        this.http.get(apiUrl, cases).subscribe(
+        (response) => {
+            console.log('tested successfully:', response);
+
+        },
+        (error) => {
+            console.error('Error test:', error);
+        }
+        );
+    }
+
+    actionChose(): void {
+        const action = (document.getElementById('action') as HTMLSelectElement).innerText;
+        const object = document.getElementById('object') as HTMLInputElement;
+        const input = document.getElementById('input') as HTMLInputElement;
+        const target = document.getElementById('target') as HTMLInputElement;
+
+        object.disabled = true;
+        input.disabled = true;
+        target.disabled = true;
+
+        if (action === "GoToUrl" || action === "FillField") {
+            input.disabled = false;
+        }
+
+        if (action === "GetAttribute" || action === "GetPageTitle") {
+            target.disabled = false;
+        }
+
+        if (action === "Clear" || action === "Click" || action === "IsDisplayed" || action === "FillField") {
+            object.disabled = false;
+        }
+    }
+    submitCase(){
+        this.counterCase++;
+        let caseName = (document.getElementById('caseName') as HTMLSelectElement).value;
+        this.addCase({ case_id: this.counterCase, caseName: caseName, actions: [] });
+        (document.getElementById('caseName') as HTMLInputElement).value = '';
+        (document.getElementById('close2') as HTMLButtonElement).click();
+        this.counterAction=1;
+        const addActionButton = document.getElementById('addActionButton') as HTMLInputElement;
+        addActionButton.disabled = false;
+    }
+
+
+    public getCase(id: number) {
+        return this.cases.find(obj => obj.case_id === id);
+    }
+    deleteCase(id: number) {
+        this.cases = this.cases.filter(item => item.case_id !== id);
+    }
+
+    public addCase(obj: { case_id: number, caseName: string, actions: {action_id: number,action_type_id:number,action_type_name: string, object: string, input: string, target: string }[] }) {
+        this.cases.push(obj);
+    }
+
+    submitAction(){
+        let action_id = parseInt((document.getElementById('action') as HTMLSelectElement).value);
+        let action = (document.getElementById('action') as HTMLSelectElement).innerText;
+        let object = (document.getElementById('object') as HTMLInputElement).value;
+        let input = (document.getElementById('input') as HTMLInputElement).value;
+        let target = (document.getElementById('target') as HTMLInputElement).value;
+        this.addAction({ action_id: this.counterAction,action_type_id: action_id, action_type_name: action, object: object, input: input, target: target, });
+        console.log(this.getAction(this.counterAction));
+        this.counterAction++;
+
+        // Clear the input fields
+        (document.getElementById('object') as HTMLInputElement).value = '';
+        (document.getElementById('input') as HTMLInputElement).value = '';
+        (document.getElementById('target') as HTMLInputElement).value = '';
+        (document.getElementById('close') as HTMLButtonElement).click();
+    }
+    public addAction(obj: { action_id: number,action_type_id:number,action_type_name: string, object: string,input: string,target: string }) {
+        this.getCase(this.counterCase)?.actions.push(obj);
+    }
+
+    public getAction(id: number) {
+        return this.getCase(this.counterCase)?.actions.find(obj => obj.action_id === id);
+    }
+    deleteAction(caseId: number,actionId:number) {
+        const currentCase = this.getCase(caseId);
+
+        if (currentCase && currentCase.actions) {
+            currentCase.actions = currentCase.actions.filter(item => item.action_id !== actionId);
+        }
+    }
+
+
+
+}

frontend/src/index.html

@@ -12,6 +12,8 @@
     integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
     crossorigin="anonymous"
   />
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
 </head>
 <body>
   <app-root></app-root>