Now... the App runs smoothly and fulfill every functionalities, thing is when I try to run the QATest, everyone pass through, except one:
Error: clickable element "ADD" was not found by text|CSS|xpath
This error its driving me nuts, as ADD button runs OK on the remaining test. Here is my Index.php:
<?php include("db.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST ASSESMENT</title>
<!--- Bootstrap CSS --->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="header"style="margin-top:50px;">
<form action="delete_product.php" method="post">
<div class="alignButton" style="display:flex; justify-content:space-between">
<a style="margin-left:30px;text-decoration:none;color:black;font-size:30px;" href="index.php">Product List</a>
<div class="alignButtons" style="display:flex; justify-content:flex-end">
<button style="margin-right:50px;" id="add" type="button" class="btn btn-primary" name="add" onclick="window.location.href='product_add.php'">ADD</button>
<button style="margin-right:50px;" id="delete-product-btn" type="submit" name="mass_delete" class="btn btn-danger">MASS DELETE</button>
</div>
</div>
<hr/>
</div>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<!--Get all products from DB-->
<?php
$query = "SELECT * FROM products";
$result_products = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result_products)) { ?>
<!-- <?php
if(isset($_SESSION['status'])){
echo "<h4>".$_SESSION['status']."</h4>";
unset($_SESSION['status']);
}
?> -->
<div class="col-sm-4">
<div class="card" style="margin:10px;padding:10px;width:250px;">
<input class="delete-checkbox" type="checkbox" name="check_list[]" value="<?php echo $row['id']; ?>">
<label><?php echo $row['sku']; ?> : <?php echo $row['prod_type']; ?></label>
<h5><?php echo $row['name']; ?></h5>
<p>$<?php echo $row['price']; ?></p>
<!--Conditional rendering depending on product type-->
<?php if ($row['prod_type'] == 'DVD'): ?>
<p>Size: <?php echo $row['dvd']; ?>MB</p>
<?php elseif ($row['prod_type'] == 'BOOK'): ?>
<p>Weight: <?php echo $row['book']; ?> Kgs.</p>
<?php elseif ($row['prod_type'] == 'FUR'): ?>
<p> H:<?php echo $row['fur_h']; ?>x W:<?php echo $row['fur_h']; ?>x L:<?php echo $row['fur_l']; ?></p>
<?php endif ?>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</form>
</div>
<!--- Bootstrap JS --->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
And here is the QATester issue:
Check homepage basic requirements
951ms
Error: Clickable element "ADD" was not found by text|CSS|XPath
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I }) => {
I.amOnPage('/');
I.click('MASS DELETE');
I.click('ADD');
The 11th following test passes OK. Even the button MASS DELETE on the same test.I have tried to Switch button order ( Mass Delete & Add), declare them with class/id; Rename button to add, Add, ADD; moved the button outside container div... Can't figure out what's the problem or what I have missing. I would really appreciate any help/clue/tip about it.
Answer: Just add the text ADD in the add button. it will pass. If you have multiple navigation for different page. type the exact 'ADD' text inside the button tag.
This is my navigation and it worked: it is in react, but similar with the html
<header>
<nav className="nav px-3 m-auto d-flex justify-content-between align-items-center border-bottom">
<h3 className="nav-title">
<Link to="/">Product {isProductListPage ? "List" : "Add"}</Link>
</h3>
<div className="nav-list d-flex align-items-center">
<Link to="/add-product">
<button className="nav-list-add btn me-3">
ADD
</button>
</Link>
<button id="delete-product-btn" onClick={handleDelete} className="btn btn-danger">MASS DELETE</button>
</div>
</nav>
</header>
I had the same problem. Just put bigger margin between buttons :)
I have a json file which i will be fetching using $http service.
The sample json is added.
I am saving the json to angularjs scope variable.
How to display the dat in html.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>English Premier League</title>
</head>
<body ng-controller="mainController">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Premier League</a>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/soccer-bg.jpg')">
</header>
<div ng-repeat="blog in array">
<ul class "nav nav-pills">
<li><a href ng-click ="tab"={{$index+1}}>{{blog.matches}}</a></li>
</ul>
</div>
</body>
</html>
JSON file->
{"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]}
IN the output whole array is displaying.Below is the app.js file
app.js
var myApp = angular.module('blogApp', []);
myApp.controller('mainController',['$http','$scope',function($http,$scope) {
$http.get('https://xxxxx.json').success(function(data){
$scope.array=data;
console.log(data);
console.log($scope.array);
});
}]);
This is how you need to be displaying in html page.
Instead of getting the json over http request i have hardcoded the value and made the following example.
Hope it helps
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("blogApp", []).controller('mainController', ['$http', '$scope', function($http, $scope) {
$scope.array = {"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]};
}]);
}());
</script>
<style></style>
</head>
<body ng-app="blogApp">
<div ng-controller="mainController">
<div>
<h1>Test: {{array.name}}</h1>
<div ng-repeat="round in array.rounds">
<h3>Round: {{round.name}}</h3>
<table class="table">
<tr>
<th>Date</th>
<th>Team 1</th>
<th>Team 2</th>
<th>Score 1</th>
<th>Score 2</th>
</tr>
<tr ng-repeat="match in round.matches">
<td>{{ match.date | date}}</td>
<td>{{ match.team1.name }}</td>
<td>{{ match.team2.name }}</td>
<td>{{ match.score1 }}</td>
<td>{{ match.score2 }}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
I have included necessary files required for Footable sorting , but columns dont have an option to sort the column values , any help would be of great help .
Code :
<!DOCTYPE html>
<html>
<head>
<title> Sorting Html Table Using FooTable </title>
<link rel="stylesheet" href="css/footable.core.css">
<link rel="stylesheet" href="css/footable.metro.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/footable.js"></script>
<script src="js/footable.sort.js"></script>
</head>
<body>
<table class="footable" >
<thead >
<!-- data-type = data type in the column -->
<!-- data-sort-ignore = disable sorting for the column -->
<!-- data-sort-initial = sort the column when the FooTable is initialized -->
<tr>
<th >Name</th>
<th ">Mark1</th>
<th ">Mark2</th>
<th " >Total</th>
</tr>
</thead >
<tbody >
<!-- populate table from mysql database -->
<?php while($row1 = mysqli_fetch_array($result)):;?>
<tr>
<td><?php echo $row1[0];?></td>
<td><?php echo $row1[1];?></td>
<td><?php echo $row1[2];?></td>
<td><?php echo $row1[3];?></td>
</tr>
<?php endwhile;?>
</tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.footable').footable();
});
</script>
</html>
Added the following bootstrap and jquery links to html file which solved my issue on sorting , now i can sort them :
<link data-require="bootstrap-css#3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="footable.core.css" />
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
I have set up a search bar on my php page but the results are all displayed in one long in the table. How would I make it display search one of the results on a separate line, or maybe 2 on a line? Here is the code for the page.
<?php
$names = array();
if(isset($_POST['searchterm'])) {
mysql_connect("localhost", "root", "Oliver");
mysql_select_db("videos");
$search = mysql_real_escape_string(trim($_POST['searchterm']));
$find_videos = mysql_query("SELECT * FROM `videos` WHERE `keywords` LIKE'%$search%'");
while ($row = mysql_fetch_assoc($find_videos)) {
$names[] = $row['name'];
}
}
include('session.php');
?>
<!DOCTYPE html>
<html>
<head>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<link rel="icon" type="image/ico" href="images/favicon.ico">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<style type="text/css">
.vjs-default-skin .vjs-control-bar { font-size: 125% }
</style>
<meta charset="utf-8">
<title>Network TV | search</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css" />
<link href="css/font-awesome.css" rel="stylesheet" />
<link href="css/3.1.1/animate.css" rel="stylesheet" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body style="overflow-x: hidden">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Network TV</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="">Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<section style="padding-top:100px; width:100%"class="container-fluid" id="section2">
<h1 class="text-center" style="color:white">Network TV</h1>
<h3 class="text-center" style="color:white"><u>Search results</u></h3>
<table class="table" style="color: white">
<thead>
<tr>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php foreach($names as $name) { ?>
<td><?php echo $name; ?> <strong><h7><u>Watch!</u></h7></strong></td>
<?php } ?></td>
</tr>
</tbody>
</table>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</html>
Update
Added updated picture
Instead of putting every result into the same <tr> and <td>, place them into multiple of them.
Looking at your HTML setup, I get the feeling you didn't quite grasp how the <tr> and <td> tags function. Remember that a <tr> (table row) adds a new row to the table, and inside that row you can place a <td> (table division), which functions as a column inside that row.
If that didn't explain it for you, perhaps one of these two resources will help you further: [1] [2].
Inside your HTML, replace the <tr> block with the following:
<?php
foreach($names as $name) {
echo '<tr>
<td>' . $name . '</td>
<td><strong><h7><u>Watch!</u></h7 </strong></td>
</tr>';
}
?>
you have extra <td> tag here
<td><?php foreach($names as $name) { ?>
<td><?php echo $name; ?> <strong><h7><u>Watch!</u></h7></strong></td>
<?php } ?></td>
Try follwing and see if it aligns the result
<?php foreach($names as $name) { ?>
<td><?php echo $name; ?></td>
<td><strong><h7><u>Watch!</u></h7></strong></td>
<?php } ?>
I want to improve the look and feel of my tables and jQuery datatables looks great for doing that but I can not work out why it is not rendering on my table. I have registered the plugin correctly on my bundle config. Followed the tutorial and ensured everything was in correct place, but no effect.
Here is my generated code from browser.
I have put an alert in the JavaScript which calls dataTable(), this is being called.
the head and body of document are in a different file _layout.cshtml to my index page which is where my table is. Not that this should effect anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p>
<a class="site-title" href="/">
<img src="../../Content/Images/TrakMan_white240.png" ,alt="sort", style="border-style:none"/></a>
</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/SGAccount/Manage" title="Manage">simon</a>!
<form action="/SGAccount/LogOff" id="logoutForm" method="post">
<input name="__RequestVerificationToken" type="hidden" value="qouuJJI98XkICybk1UEozbZayptmhHh1zgsHQfTcu9kz6PJrZ_TObkO8Yhkkqv06jtklWRKOSAhUs3w1Bqm58Y-cy7Q8I5dl_loxDuU6AqReCRtWRHg7p4ipeTVKzNzGG50b7D-x3562Hj2q2In_m-LctFmsLIQ1qpM_iYv0MSQ1" />
Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<br />
<br />
<br />
<li>Change Password</li>
<li>Servers</li>
<li>Security Guard</li>
<li>Connections</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script src="/Scripts/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var el = doucument.getElementByName("customerIndex")
el.dataTable({ "sScrolly": "200px", "bPaginate": false });
});
</script>
<h2>Customers</h2>
<p>
<a class="createButton" href="/Customer/Create">Create New</a>
</p>
<table id="customerIndex" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</section>
</div>
</body>
</html>
There are a few problems:
Your code says "var el = doucument..." but that should be "document".
Also you are using "getElementByName" when your table doesn't have the name attribute set, just the ID set.
But why not use the built in jQuery function to select by ID:
$('#customerIndex').dataTable({ "sScrolly": "200px", "bPaginate": false });
you load two different jquery version:
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script> // in the header
<script src="/Scripts/jquery-2.0.2.js"></script> // in the body
another small correction:
<script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>
// should be
<link href="/Content/DataTables-1.9.4/media/css/demo_table.css" rel="stylesheet" />
maybe this will correct your error
Edit:
change
$(document).ready(function () {
var el = doucument.getElementByName("customerIndex")
el.dataTable({ "sScrolly": "200px", "bPaginate": false });
});
to
$(document).ready(function () {
$("#customerIndex").dataTable({ "sScrolly": "200px", "bPaginate": false });
});
had an extra script src="/Scripts/jquery-2.0.2.js"
at bottom of page.....