Zombie.JS没有执行页面javascript

时间:2016-02-11 20:07:10

标签: javascript node.js jasmine zombie.js

我有一个简单的html表单,在提交时运行javascript函数但是当我使用Zombie.js运行简单的Acceptance测试时,该函数似乎没有运行

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

但是总返回0.0是该字段中的原始值。有没有办法调试这个脚本,为什么它似乎不执行JavaScript?

1 个答案:

答案 0 :(得分:0)

解决方案是使用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();
  });
});