Testing broken html with casperjs

casperjs, javascript

Solution

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

});

Problem

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?

Original source