Fatal编程技术网

Zombie.JS不执行页面javascript

javascript node.js jasmine

Zombie.JS不执行页面javascript,javascript,node.js,jasmine,zombie.js,Javascript,Node.js,Jasmine,Zombie.js,我有一个简单的html表单，它在提交时运行javascript函数，但是当我使用Zombie.js运行一个简单的验收测试时，该函数似乎没有运行 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bulk Order Calculator</title> <!--[if lt IE 9]> &

我有一个简单的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>
以下是用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();
            });
        })
    })
})
但是total返回0.0，这是字段中的原始值。有没有办法调试这个脚本，为什么它看起来不执行JavaScript？

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