Testing broken html with casperjs

问题

I am trying to run some setup routines before running some CasperJs browser tests.

At one point I am unable to fill in form data because there is some misplaced HTML (a form tag is misplaced in a table):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body>
        <table>
        <form id="test1">
            <input type="text" name="selector_1" />
        </form>
        </table>
    </body>
</html>

This is the simple test case:

casper.test.begin('Test', 0, function suite(test) {

    casper.start('http://localhost:8000', function() {

        this.fill('form#test1', {
            "selector_1": 'Yo!'
        }, true);

    });

    casper.run(function() {
        test.done();
    });

});

The tests result is: error: Errors encountered while filling form: no field matching names selector "selector_1" in form

It works when I simply remove the table tag in this example.

Unfortunatly I cannot change this in the "real world" because the broken HTML is from an application I have no source code access.

Can this be solved with CasperJs directly?

I guess I could also try to "fix" the HTML by replacing the broken parts. Could this be the only way to get this working?

回答1:

You should try to use fillXPath (but it is available in version 1.1):

casper.test.begin('Test', 0, function suite(test) {

    casper.start('http://127.0.0.1:8020/test_casper/testme.html', function() {
        this.test.assertExists({
            type: 'xpath',
            path: '//*[@name="selector_1"]'
        }, 'the element exists');

        this.fillXPath('form#test1', {
            '//input[@name="selector_1"]': 'Yo!'
        }, true);

    });

    casper.run(function() {
        test.done();
    });

});

来源：https://stackoverflow.com/questions/21381549/testing-broken-html-with-casperjs

标签

javascript

casperjs