Skip to content

Usage of this module breaks the :scope selector of jsdom #84

@codebymikey

Description

@codebymikey

Ran into this whilst testing a legacy project.

Example code:

const jsdom = require('jsdom');
const { JSDOM } = jsdom;

const string =  `
<table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>
                <table>
                    <tbody>
                        <tr>
                            <td>Emil</td>
                            <td>Tobias</td>
                            <td>Linus</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
`;

const checkExpected = (element, selector, expected) => {
  const actual = element.querySelectorAll(selector).length;
  console.log(`Expected ${expected}, found ${actual}`);
}

let jsDOMHtml, jsDOMDoc, table;
jsDOMHtml = new JSDOM(string);
jsDOMDoc = jsDOMHtml.window.document;
table = jsDOMDoc.querySelector('table');
checkExpected(table, `:scope > tbody > tr`, 1);

// Alternate approach.
jsDOMHtml = new JSDOM('');
jsDOMDoc = jsDOMHtml.window.document;
jsDOMDoc = jsDOMDoc.implementation.createHTMLDocument('');
jsDOMDoc.body.innerHTML = string;
table = jsDOMDoc.querySelector('table');
checkExpected(table, `:scope > tbody > tr`, 1);

// Using browser-env environment.
require('browser-env')();
// Creating document this way results in an invalid :scope.
const htmldoc = document.implementation.createHTMLDocument('');
htmldoc.body.innerHTML = string;
const htmlDocTable = htmldoc.querySelector('table');
checkExpected(htmlDocTable, `:scope > tbody > tr`, 1);

Output:

Expected 1, found 1
Expected 1, found 1
Expected 1, found 2

So as suggested in the README, this module should probably not be used as it can lead to unexpected results/breakages.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions