如何使用量角器在非角度网站中测试日期选择器

时间:2018-11-05 09:53:19

标签: testing datepicker jasmine protractor

请帮助以正确编写日期选择器测试。 我有一个不可点击的字段,将在其中设置我选择的日期:

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" action="">
<table>
  <thead>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Width</th>
    <th>Height</th>
    <th>Total</th>
  </thead>

  <tbody id="product_table">
    <tr>
        <td><input type="text" name="product[]"></td>
        <td><input type="text" name="price[]"></td>
        <td><input type="text" name="quantity[]"></td>
        <td><input type="text" name="width[]" value="0"></td>
        <td><input type="text" name="height[]" value="0"></td>
        <td><input type="text" name="total[]" class="totalPrice" readonly></td>
    </tr>
    <tr>
        <td><input type="text" name="product[]"></td>
        <td><input type="text" name="price[]"></td>
        <td><input type="text" name="quantity[]"></td>
        <td><input type="text" name="width[]" value="0"></td>
        <td><input type="text" name="height[]" value="0"></td>
        <td><input type="text" name="total[]" class="totalPrice" readonly></td>
    </tr>
  </tbody>
<button name="send">Submit</button>
</table>
</form>
</body>
<?php
include('database.php');

if (isset($_POST['send'])) {
$product = $_POST['product'];
$price = $_POST['price'];
$quantity = $_POST['quantity'];
$width = $_POST['width'];
$height = $_POST['height'];
$total = $_POST['total'];
$invoice_number = 1;

for($i=0; $i<count($_POST['total']); $i++) {
        if($i <> count($_POST['total'])) {

  $sql = "INSERT INTO invoice_order(invoice_number, product, price, quantity, width, height, total) 
      VALUES (".$invoice_number.",".$_POST['product'][$i].",".$_POST['price'][$i].",".$_POST['quantity'][$i].",".$_POST['width'][$i].",".$_POST['height'][$i].",".$_POST['total'][$i].")";

      $query = mysqli_query($connect, $sql);  
    }}
  if ($query) {
          echo "Record inserted Successfully";
       }else{
          echo "Unable to insert Record";
       }}?>

<script>
const table = document.getElementById('product_table');
table.addEventListener('input', ({ target }) => {
  const tr = target.closest('tr');
  const [product, price, quantity, width, height, total] = tr.querySelectorAll('input');

  var size = width.value * height.value;
  var rate = price.value * quantity.value;
  var nameproduct = product.value;
  if (size != "") {
    total.value = size * rate;
  }else{
    total.value = rate; 
  }
  totalPrice();
});
</script>
<style>
    table,tr,td,th { border: 1px black solid;}
</style>
</html>

带有可打开日期格式的可点击按钮:

<input type="text" class="submit hasDatepicker" placeholder="License Expiry Date*" 
name="website_field[bGl==]" 
id="website_field_bGl" value="" size="16" 
readonly="readonly">

月:

<img class="ui-datepicker-trigger" src="images/calendar.png" alt="Select date" 
title="Select date">

年:

<select class="ui-datepicker-month" data-handler="selectMonth" data- 
event="change"><option value="0">Jan</option></select> ...

和一个脚本:

<select class="ui-datepicker-year" data-handler="selectYear" data- 
event="change"><option value="2000">2000</option></select> ...

我需要设置一个日期,例如:2020-07-14。

如何执行此操作? 谢谢。

我做了一些原始的工作。但是也许还有更多的“专业版”变体?:

                    $(function(){
                        $( "#website_field_bGljZW5zZSBleHBpcnkgZGF0ZQ" 
).datepicker({
                            changeMonth: true,
                            changeYear: true,
                            firstDay:1,
                            dateFormat: "yy-mm-dd",
                            showOn: "button",
                            buttonImage: "images/calendar.png",
                            buttonImageOnly: true,
                            buttonText: "Select date",
                            minDate: "2000-01-01",
                            yearRange: "2000:+15"
                        }).attr("readonly", "readonly");
                    });

0 个答案:

没有答案