Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

jsdom behaves inconsistently with browser DOM in some cases #3708

Open
imdoge opened this issue May 6, 2024 · 0 comments
Open

jsdom behaves inconsistently with browser DOM in some cases #3708

imdoge opened this issue May 6, 2024 · 0 comments

Comments

@imdoge
Copy link

imdoge commented May 6, 2024 •
edited

Basic info:

  • Node.js version: v20.9.0
  • jsdom version: 24.0.0
const { JSDOM } = require("jsdom");

const htmlContent = `<html>
<head>
</head>
<__hrp-shortcut__ class="hrp-container hrp-container_normal" style="inset: auto 0px 143px auto; opacity: 1;"><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/close.svg"><div class="hrp-tooltip">CLOSE AI BAR<br>• ALT → Disable for website<br>• SHIFT → Disable globally</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/general-search-refraction.svg"><div class="hrp-tooltip">RESEARCH</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/education-atom-02.svg"><div class="hrp-tooltip">EXPLAIN</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/communication-annotation-dots.svg"><div class="hrp-tooltip">CHAT WITH PAGE</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/files-file-search-04.svg"><div class="hrp-tooltip">SHORT SUMMARY</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/files-file-search-02.svg"><div class="hrp-tooltip">LONG SUMMARY</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/editor-dotpoints-02.svg"><div class="hrp-tooltip">EXTRACT DATA</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/editor-roller-brush.svg"><div class="hrp-tooltip">REPURPOSE PAGE</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/time-clock-refresh.svg"><div class="hrp-tooltip">MONITOR PAGE</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/arrows-flip-backward.svg"><div class="hrp-tooltip">REPLY TO TEXT</div><div class="hrp-triangle"></div></div><div class="hrp-button hrp-button_option" style="order: 1;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/general-dots-horizontal.svg"><div class="hrp-tooltip">ALL COMMANDS</div><div class="hrp-triangle"></div></div><div class="hrp-button" style="order: 2;"><img src="chrome-extension://eanggfilgoajaocelnaflolkadkeghjp/img/commands/main.svg"><div class="hrp-tooltip">OPEN HARPA AI<br>Drag to move</div><div class="hrp-triangle"></div></div><style>html.has-hrp-frame > .hrp-container{display:none} .hrp-container{position:fixed;z-index:2147483647;opacity:0;width:22px;min-height:49px;box-shadow:0 3px 6px rgba(0,0,0,0.16);border-radius:4px 0 0 4px;background-color:#fff;display:flex;flex-direction:column;align-items:center;transition:opacity 0.12s ease-in-out,width 0.12s ease-in-out;box-sizing:border-box;} @media print{.hrp-container{display:none !important}} .hrp-container::before{content:"";position:absolute;top:-14px;right:0;bottom:-14px;left:-14px;opacity:0;pointer-events:all} .hrp-container:hover,.hrp-container_active{width:36px;box-shadow:0 6px 12px rgba(0,0,0,0.20)} .hrp-container:hover::before,.hrp-container_active::before{left:-40px;bottom:-40px;top:-40px} .hrp-button{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:100%;color:#2B3338;font-weight:600;font-size:13px;line-height:19px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";text-align:center;cursor:pointer;box-sizing:border-box;} .hrp-button_option{display:none;min-height:34px;} .hrp-button_option>img{filter:invert(38%) sepia(10%) saturate(170%) hue-rotate(191deg) brightness(95%) contrast(86%)} .hrp-button>img{max-width:fit-content} .hrp-container_normal .hrp-button_option:first-of-type{border-radius:4px 0 0 0} .hrp-container_reversed .hrp-button_option:last-of-type{border-radius:0 0 0 4px} .hrp-button_option:hover{background-color:#2A3338} .hrp-button_option:hover>img{filter:invert(100%)} .hrp-container:hover>.hrp-button_option{display:flex} .hrp-container_active>.hrp-button_option{display:flex} .hrp-button:hover>.hrp-tooltip{display:block} .hrp-button:hover>.hrp-triangle{display:block} .hrp-tooltip{position:absolute;z-index:2;top:50%;transform:translate(0,-50%);white-space:nowrap;background-color:#2A3338;color:white;border-radius:3px;padding:4px 8px 5px 8px;right:46px;display:none;font-weight:500;box-sizing:border-box;text-align:left;} .hrp-triangle{position:absolute;right:41px;top:50%;display:none;transform:translate(0, -50%);width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid #2A3338}</style></__hrp-shortcut__>
<body>
<div class="a3"></div>
</body>
</html>`;
const dom = new JSDOM(htmlContent);
const { document } = dom.window;

const elm = document.querySelector('.a3');
console.log(elm.parentNode.children[0].className);

I use jsdom to traverse nodes and generate XPath. The algorithm is consistent with the browser's method of obtaining XPath. However, I've found that jsdom behaves differently from the browser in some ways, leading to discrepancies between the XPath generated by jsdom and that obtained by the browser.

Output: hrp-button hrp-button_option, The actual correct output should be a3.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@imdoge