lundi 18 mai 2020

Testcafe Hammerhead has a distinct behaviour on innerHTML with broken code

Trying to use Testcafe on a page which use dojo js library, its pagination component has broken HTML (enter link description here), browsers (Chrome, Firefox and Safari) handle it and fixed as desired, but testcafe-hammerhead treat it different and breaks the associate components.

This can be reproduced by using:

<html>
    <body>
        <script>

            document.body.innerHTML = '<html>'+
                '<head></head>'+
                '<body>'+
                    '<div dojoattachpoint="paginatorBar">'+
                        '<table style="width:100%">'+
                            '<tbody>'+
                                '<tr>'+
                                    '<td>Jill</td>'+
                                    '<td>Smith</td>'+
                                    '<td>'+
                                        '<div>50</div></div>'+<!--broken code--!>
                                    '</td>'+
                                '</tr>'+
                                '<tr>'+
                                    '<td>Eve</td>'+
                                    '<td>Jackson</td>'+
                                    '<td>94</td>'+
                                '</tr>'+
                            '</tbody>'+
                        '</table>'+
                    '</div>'+
                '</body>'+
            '</html>';

        </script>
    </body>
</html>

Browsers generate:

<html>
    <head></head>
    <body>
        <div dojoattachpoint="paginatorBar">
            <table style="width:100%">
                <tbody>
                    <tr>
                        <td>Jill</td>
                        <td>Smith</td>
                        <td>
                            <div>50</div> <!--fixed code--!>
                        </td>
                    </tr>
                    <tr>
                        <td>Eve</td>
                        <td>Jackson</td>
                        <td>94</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

And hammerhead:

<html data-hammerhead-hovered="">
    <head>
        <meta class="charset-hammerhead-shadow-ui" charset="iso-8859-1">
            <script type="text/javascript" class="script-hammerhead-shadow-ui" charset="UTF-8" src="http://localhost:1401/hammerhead.js"></script>
            <script type="text/javascript" class="script-hammerhead-shadow-ui" charset="UTF-8" src="http://localhost:1401/task.js"></script>
        </head>
        <body>
            <div dojoattachpoint="paginatorBar">
                <table style="width:100%">
                    <tbody>
                        <tr>
                            <td>Jill</td>
                            <td>Smith</td>
                            <td>
                                <div>50</div>
                            </td>
                        </tr>
                    </tbody>
                </table>           <!--ends table--!>
            </div>EveJackson94
            <div id="root-hammerhead-shadow-ui" contenteditable="false" class="root-hammerhead-shadow-ui"></div>
        </body>
    </html>

Does anyone knows what is causing this problem and how to avoid it?

I'm using:

  • Chrome Version 81.0.4044.138 (64-bit)
  • node v12.16.3
  • testcafe 1.8.4
  • macOS Mojave 10.14.4

Thanks in advance.

Aucun commentaire:

Enregistrer un commentaire