Error: Clickable element "Save" was not found by text|CSS|XPath

Viewed 37

I've been doing a test assignment on a product add/delete website, and the automated QA test is reporting the following errors... It seems to be working fine when I test it, so I don't know what's the issue... Cannot post images yet, so here's the link...

https://postimg.cc/HrksVztz

Here is the product-add.php

    <script>
  document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM ready!");
  });

</script>

  <script>

    $(document).ready(function() {
      $("#product_form").validate({

        rules: {
          sku: 'required',
          name: 'required',
          price: 'required',
          productType: 'required',
          size: 'required',
          weight: 'required',
          height: 'required',
          length: 'required',
          width: 'required', 
          agree: 'required'
        },

        messages: {
          sku: {
            required: "Please, enter valid SKU"
          },
          name: {
            required: "Please, enter product name"
          },
          price: {
            required: "Please, enter price"
          },
          productType: {
            required: "Please select one of the options"
          },
          size: {
            required: "Please, provide the size of the DVD"
          },
          weight: {
            required: "Please, provide the weight"
          },
          height: {
            required: "Please, provide the required dimension"
          },
          length: {
            required: "Please, provide the required dimension"
          },
          width: {
            required: "Please, provide the required dimension"
          }
        },

        submitHandler: function (form) {
                form.save();
            }
      });
    });

    </script>
</head>

<body>
  <header>
    <h2>Product List</h2>
    
      <button class="save-btn" type="submit" name="save" value='save' form="product_form" id="save">SAVE</button>
      <button id="cancelBtn" action="action" type="button" value="Cancel" onclick="location.href='index.php'"> CANCEL</button>
    
  </header>

  <section class="product-form">
    
 
    <form action='validation.php' method="POST" id="product_form" name="product_form">
      <div class="input-data">
        <label id="sku-label" for="sku">SKU</label>
        <input type="text" name="sku" id="sku" class="form-control" placeholder="#sku"  />
      </div>
      <div class="input-data">
        <label id="name-label" for="name">Name </label>
        <input type="text" name="name" id="name" class="form-control" placeholder="#name"  />
      </div>
      <div class="input-data">
        <label id="price-label" for="price">Price ($)</label>
        <input type="number" name="price" id="price" class="form-control" placeholder="#price"  />
      </div>

      
      <div class="input-switcher">
        <label for="productType">Type Switcher</label>
        <select id="productType" name="productType" onchange="selectChanged()" >
          <option value="" style="visibility: hidden;">Please select</option>
          <option value="dvd">DVD</option>
          <option value="book">Book</option>
          <option value="furniture">Furniture</option>
        </select>
      </div>
      <div id="dvd">
        <div class="data-input product">
          <label for="size">Size (MB):</label>
          <input type="number" id="size" name="size" class="form-control " >
          <p class="describe">Please provide size in (MB)</p>
        </div>
      </div>

      <div id="book">
        <div class="data-input product">
          <label for="weight">Weight (KG):</label>
          <input type="number" id="weight" name="weight" class="form-control " >
          <p class="describe">Please provide weight in KG</p>
        </div>

      </div>

      <div id="furniture">
        <div class="data-input product">
          <label for="height">Height (CM):</label>
          <input type="number" id="height" name="height" class="form-control " >
          <p class="describe">Please provide measurements in (CM)</p>
        </div>
        <div class="data-input product">
          <label for="length">Length (CM):</label>
          <input type="number" id="length" name="length" class="form-control" >
          <p class="describe">Please provide measurements in (CM)</p>
        </div>
        <div class="data-input product">
          <label for="width">Width (CM):</label>
          <input type="number" id="width" name="width" class="form-control " >
          <p class="describe">Please provide measurements in (CM)</p>
        </div>

      </div>

    </form>

  </section>

and the save.php

<?php

/** @var $pdo \PDO */

$pdo = require_once 'database.php';

$message[] = '';

if(isset($_POST['save'])) {

 if($_SERVER['REQUEST_METHOD'] == "POST") {

$sku = $_POST['sku'];
if(!(isset($_POST['sku']))) {
  echo 'please enter valid SKU';
}
$sku = filter_var($sku, FILTER_SANITIZE_STRING);
$name = $_POST['name'];
if(!(isset($_POST['name']))) {
  echo 'please enter valid name';
}
$name = filter_var($name, FILTER_SANITIZE_STRING);
$price = $_POST['price'];
if(!(isset($_POST['price']))) {
  echo 'please enter valid price';
}
$price = filter_var($price, FILTER_VALIDATE_INT);
$productType = $_POST['productType'];
if(!(isset($_POST['productType']))) {
  echo 'please enter valid SKU';
}
$productType = filter_var($productType, FILTER_SANITIZE_STRING);
$size = $_POST['size'];
if(!(isset($_POST['size']))) {
  echo 'please enter valid size';
}
$size = filter_var($size, FILTER_VALIDATE_INT);
$weight = $_POST['weight'];
if(!(isset($_POST['weight']))) {
  echo 'please enter valid weight';
}
$weight = filter_var($weight, FILTER_VALIDATE_INT);
$height = $_POST['height'];
if(!(isset($_POST['height']))) {
  echo 'please enter valid SKU';
}
$height = filter_var($height, FILTER_VALIDATE_INT);
$length = $_POST['length'];
if(!(isset($_POST['length']))) {
  echo 'please enter valid SKU';
}
$length = filter_var($length, FILTER_VALIDATE_INT);
$width = $_POST['width'];
if(!(isset($_POST['width']))) {
  echo 'please enter valid SKU';
}
$width = filter_var($width, FILTER_VALIDATE_INT);

$statement_products = $pdo->prepare("SELECT * FROM skandi WHERE sku = :sku");
$statement_products->bindParam(':sku', $sku);
$statement_products->execute();

if($statement_products->rowCount() > 0)
{
  $message[] = 'product name already exists!';
  header('Location: product-add.php');
}
else 
{
  $insert_statement = $pdo->prepare("INSERT INTO skandi (sku, name, price, productType, size, weight, height, length, width)
VALUES(:sku, :name, :price, :productType, :size, :weight, :height, :length, :width) ");

$insert_statement->bindParam(':sku', $sku);
$insert_statement->bindParam(':name', $name);
$insert_statement->bindParam(':price', $price);
$insert_statement->bindParam(':productType', $productType);
$insert_statement->bindParam(':size', $size);
$insert_statement->bindParam(':weight', $weight);
$insert_statement->bindParam(':height', $height);
$insert_statement->bindParam(':length', $length);
$insert_statement->bindParam(':width', $width);
$insert_statement->execute();

$message[] = 'Inserted succesfully';
header('Location: index.php');

}

}

}

?>
0 Answers
Related