Zombie.JS 未执行页面 javascript

Question

我有一个简单的 html 表单，在提交时运行有一个 javascript 函数，但是当我运行一个使用 Zombie.js

的简单验收测试

<!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:

// 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;

这是用 Jasmine 编写并使用僵尸无头浏览器的验收测试：

'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();
            });
        })
    })
})

但合计returns0.0 是字段中的原始值。有没有办法调试这个脚本，为什么它似乎没有执行 JavaScript?

Answer 1

解决方案是使用 CasperJS/PhantomJS 而不是 Jasmine/Zombie。 Zombie 不支持页面中 JavaScript 的运行但 PhantomJS 支持。这是一个工作测试套件。

casper.test.begin('can multiply quantity and price', 1, function suite(test) {

  casper.start(url, function() {
    this.fill('form#theForm', {
        'quantity': '10',
        'price': '5'
    });
  });

  casper.thenClick('input#submit', function() {
    var total = this.getFormValues('#theForm').total;
    casper.test.assertEquals(total, '50.00');
  });


  casper.run(function() {
    casper.capture('basic-math-1.png');
    test.done();
  });
});

Zombie.JS 未执行页面 javascript

Zombie.JS not executing page javascript

javascript

node.js

jasmine

zombie.js