frontend : add selenium page

ETS-TAF · Oct 22, 2023 · ebd4854 · ebd4854
1 parent e342089
commit ebd4854
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 1 deletion.
diff --git a/frontend/src/app/app-routing.module.ts b/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' }
 ];
 

diff --git a/frontend/src/app/app.component.html b/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>

diff --git a/frontend/src/app/app.module.ts b/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,

diff --git a/frontend/src/app/selenium/test-selenium.component.css b/frontend/src/app/selenium/test-selenium.component.css
diff --git a/frontend/src/app/selenium/test-selenium.component.html b/frontend/src/app/selenium/test-selenium.component.html
@@ -0,0 +1,77 @@
+<br><br>
+<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 modal-xl">
+        <div class="modal-content">
+        <div class="modal-header">
+            <h5 class="modal-title">Add Test Action</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <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="GoToUrl">GoToUrl</option>
+                    <option value="FillField">FillField</option>
+                    <option value="GetAttribute">GetAttribute</option>
+                    <option value="GetPageTitle">GetPageTitle</option>
+                    <option value="Clear">Clear</option>
+                    <option value="Click">Click</option>
+                    <option value="IsDisplayed">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 type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary">Add Action</button>
+        </div>
+        </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 Action
+        </button>
+        <button type="button" class="btn btn-outline-primary">Add New Case</button>
+        <button type="button" class="btn btn-success">Run</button>
+    </div><br><br>
+    <h4>Case #1</h4>
+    <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>
+                <td>Mark</td>
+                <td>Otto</td>
+                <td>@mdo</td>
+                <td>@mdo</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;">
+                    Delete
+                    </button>
+                </td>
+            </tr>
+            <tr>
+                <td>Jacob</td>
+                <td>Thornton</td>
+                <td>@fat</td>
+                <td>@fat</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;">
+                    Delete
+                    </button>
+                </td>
+            </tr>
+        </tbody>
+    </table><br><br>
+</div>
diff --git a/frontend/src/app/selenium/test-selenium.component.ts b/frontend/src/app/selenium/test-selenium.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test-selenium',
+  templateUrl: './test-selenium.component.html',
+  styleUrls: ['./test-selenium.component.css']
+})
+export class TestSeleniumComponent {
+    actionChose(): void {
+        const action = (document.getElementById('action') as HTMLSelectElement).value;
+        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;
+        }
+    }
+
+}