使用Casperjs设置单选按钮

Question

使用Casperjs设置单选按钮

3

我正尝试使用CasperJS设置单选按钮的值，但一直没有成功。

有人可以解释一下为什么这个测试中的assertEval失败吗？

    this.test.assertExist('input[name=main][value=yes]');

    casper.thenEvaluate(function(term) {
        document.querySelector('input[name=main][value=yes]').setAttribute('checked', true);
    });

    this.test.assertEval(function() {
        return document.querySelector('input[name=main][value=yes]').getAttribute('checked') == "true";
    }, 'Main was set to true');

- z1naOK9nu8iY5A

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sirentian · Accepted Answer

要理解为什么这个断言失败，我们需要了解每次调用 casper.then 都会定义一个新的导航步骤，并且 casper.run 会按照定义的顺序执行每个步骤。因此，你 casper.then 块中的代码是一个异步回调。

如果你像这样注释你的代码：

    this.test.assertExists('input[name=main][value=yes]');

    casper.then(function() {
        this.echo('Select the radio button');
        this.evaluate(function() {
            document.querySelector('input[name=main][value=yes]').setAttribute('checked', true);
        }
    });

    this.echo('Assert that the radio button is selected');
    this.test.assertEval(function() {
        return document.querySelector('input[name=main][value=yes]').getAttribute('checked') == "true";
    }, 'Main was set to true');

您会发现在“断言单选按钮已选中”之前打印了“选择单选按钮”。所以这就是您的问题所在！

解决方案：

如果您不执行任何导航步骤，则可能不需要使用then。在这种情况下，您可以简单地使用evaluate而不是thenEvaluate。或者如果您真的需要使用then，只需将assertEval放入同一个casper.then块中：

    this.test.assertExists('input[name=main][value=yes]');

    casper.then(function() {
        this.evaluate(function(term) {
            document.querySelector('input[name=main][value=yes]').setAttribute('checked', true);
        });
        this.test.assertEval(function() {
            return document.querySelector('input[name=main][value=yes]').getAttribute('checked') == "true";
        }, 'Main was set to true');
    });