文章/答案/技术大牛

发布

问Zombie.JS不执行页javascript
EN

Stack Overflow用户

提问于 2016-02-11 20:07:09

回答 1查看 716关注 0票数 1

我有一个简单的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();
            });
        })
    })
})

但是，总计返回0.0，这是字段中的原始值。有办法调试这个脚本吗?为什么它不执行JavaScript？

javascript

node.js

jasmine

zombie.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-17 09:24:39

解决方案是使用CasperJS/PhantomJS，而不是Jasmine/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();
  });
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35349044

复制

相似问题

问Zombie.JS不执行页javascript
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zombie.JS不执行页javascriptEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zombie.JS不执行页javascript
EN