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.
Ran into this whilst testing a legacy project.
Example code:
Output:
So as suggested in the README, this module should probably not be used as it can lead to unexpected results/breakages.