0
我有一個運行在提交但功能沒有出現跑，當我運行使用Zombie.jsZombie.JS不執行JavaScript
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bulk Order Calculator</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- shopping.html -->
<form action="" method="post" id="theForm">
<fieldset>
<p>Calculate a bulk book order.</p>
<div>
<label for="quantity">Quantity</label>
<input type="number" name="quantity" id="quantity" value="1" min="1" required>
</div>
<div>
<label for="price">Price Per Unit</label>
<input type="text" name="price" id="price" value="1.00" required>
</div>
<div>
<label for="tax">VAT (%)</label>
<input type="text" name="tax" id="tax" value="0.0" required>
</div>
<div>
<label for="discount">Discount</label>
<input type="text" name="discount" id="discount" value="0.00" required>
</div>
<div>
<label for="total">Total</label>
<input type="text" name="total" id="total" value="0.00">
</div>
<div>
<input type="submit" value="Calculate" id="submit">
</div>
</fieldset>
</form>
<script src="js/shopping.js"></script>
</body>
</html>
這裏一個簡單的驗收測試JavaScript函數的簡單的HTML表單頁面是JavaScript：
// shopping.js
// This script calculates an order total.
// Function called when the form is submitted.
// Function performs the calculation and returns false.
function calculate() {
'use strict';
// For storing the order total:
var total;
// Get references to the form values:
var quantity = document.getElementById('quantity').value;
var price = document.getElementById('price').value;
var tax = document.getElementById('tax').value;
var discount = document.getElementById('discount').value;
// Add validation here later!
// Calculate the initial total:
total = quantity * price;
console.log("total before tax: " + total);
// Make the tax rate easier to use:
tax = tax/100;
tax = tax + 1;
// Factor in the tax:
total = total * tax;
console.log("total after tax: " + total);
// Factor in the discount:
total = total - discount;
console.log("total after discount: " + total);
// Format the total to two decimal places:
total = total.toFixed(2);
// Display the total:
document.getElementById('total').value = total;
document.getElementById('newTotal').innerHTML = total;
console.log('value displayed in total: '+document.getElementById('total').value)
// Return false to prevent submission:
return false;
} // End of calculate() function.
// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
'use strict';
// Add an event listener to the form:
var theForm = document.getElementById('theForm');
theForm.onsubmit = calculate;
} // End of init() function.
// Assign an event listener to the window's load event:
window.onload = init;
，這裏是這是寫在茉莉花和使用殭屍無頭瀏覽器的驗收測試：
'use strict'
/* global expect */
const Browser = require('zombie');
const browser = new Browser({ debug: true });
const url = 'page url here';
describe('testing google search',() => {
it('should have defined headless browser', (next) => {
console.log('running first spec');
expect(typeof browser != 'undefined').toBe(true);
expect(browser instanceof Browser).toBe(true);
next();
});
it('should calculate the correct total', (next) => {
browser.visit(url, (err) => {
if (err) { console.log(err) }
expect(browser.success).toBe(true);
browser.fill('quantity', '10');
console.log('quantity: '+browser.query('input#quantity').value)
browser.fill('price', '5.00');
browser.fill('tax', '0.0');
browser.fill('discount', '0.00');
browser.pressButton('[type="submit"]',() => {
console.log('button clicked!');
let total = browser.query('input#total').value
console.log('total: '+total)
next();
});
})
})
})
但總收益爲0.0，這是該領域的原始價值。有沒有辦法來調試這個腳本，爲什麼它看起來不執行JavaScript？