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

gracefully handle NONE computedstyle #1401

Merged
merged 1 commit into from
Dec 17, 2024
Merged

gracefully handle NONE computedstyle #1401

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 47 additions & 30 deletions skyvern/webeye/scraper/domUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,11 @@ class DomUtils {
// Inline elements with font-size: 0px; will declare a height of zero, even if a child with
// non-zero font-size contains text.
let isInlineZeroHeight = function () {
const elementComputedStyle = window.getComputedStyle(element, null);
const elementComputedStyle = getElementComputedStyle(element, null);
const isInlineZeroFontSize =
0 ===
elementComputedStyle.getPropertyValue("display").indexOf("inline") &&
elementComputedStyle.getPropertyValue("font-size") === "0px";
elementComputedStyle?.getPropertyValue("display").indexOf("inline") &&
elementComputedStyle?.getPropertyValue("font-size") === "0px";
// Override the function to return this value for the rest of this context.
isInlineZeroHeight = () => isInlineZeroFontSize;
return isInlineZeroFontSize;
Expand All @@ -119,7 +119,10 @@ class DomUtils {
let computedStyle;
if ((clientRect.width === 0 || clientRect.height === 0) && testChildren) {
for (const child of Array.from(element.children)) {
computedStyle = window.getComputedStyle(child, null);
computedStyle = getElementComputedStyle(child, null);
if (!computedStyle) {
continue;
}
// Ignore child elements which are not floated and not absolutely positioned for parent
// elements with zero width/height, as long as the case described at isInlineZeroHeight
// does not apply.
Expand Down Expand Up @@ -157,7 +160,10 @@ class DomUtils {
continue;

// eliminate invisible elements (see test_harnesses/visibility_test.html)
computedStyle = window.getComputedStyle(element, null);
computedStyle = getElementComputedStyle(element, null);
if (!computedStyle) {
continue;
}
if (computedStyle.getPropertyValue("visibility") !== "visible")
continue;

Expand All @@ -173,6 +179,7 @@ class DomUtils {
const style = getComputedStyle(box);
const rect = box.getBoundingClientRect();
if (
style &&
style.position === "static" &&
!/content|paint|strict/.test(style.contain || "")
) {
Expand Down Expand Up @@ -370,7 +377,7 @@ function expectHitTarget(hitPoint, targetElement) {
elements[0] &&
parentElementOrShadowHost(singleElement) === elements[0]
) {
const style = window.getComputedStyle(singleElement);
const style = getElementComputedStyle(singleElement);
if (style?.display === "contents") {
// Workaround a case where elementsFromPoint misses the inner-most element with display:contents.
// https://bugs.chromium.org/p/chromium/issues/detail?id=1342092
Expand Down Expand Up @@ -675,8 +682,8 @@ function isInteractable(element) {
tagName === "li" ||
tagName === "p"
) {
const computedStyle = window.getComputedStyle(element);
if (computedStyle.cursor === "pointer") {
const elementCursor = getElementComputedStyle(element)?.cursor;
if (elementCursor === "pointer") {
return true;
}
// FIXME: hardcode to fix the bug about hover style now
Expand All @@ -685,7 +692,7 @@ function isInteractable(element) {
}

// auto for <a> is equal to pointer for <a>
if (tagName == "a" && computedStyle.cursor === "auto") {
if (tagName == "a" && elementCursor === "auto") {
return true;
}
}
Expand All @@ -709,7 +716,10 @@ function isScrollable(element) {
}

function isScrollableOverflow(element) {
const style = window.getComputedStyle(element);
const style = getElementComputedStyle(element);
if (!style) {
return false;
}
return (
style.overflow === "auto" ||
style.overflow === "scroll" ||
Expand Down Expand Up @@ -871,11 +881,14 @@ const checkStringIncludeRequire = (str) => {
};

const checkRequiredFromStyle = (element) => {
const afterCustom = getElementComputedStyle(element, "::after")
.getPropertyValue("content")
.replace(/"/g, "");
if (checkStringIncludeRequire(afterCustom)) {
return true;
const afterCustomStyle = getElementComputedStyle(element, "::after");
if (afterCustomStyle) {
const afterCustom = afterCustomStyle
.getPropertyValue("content")
.replace(/"/g, "");
if (checkStringIncludeRequire(afterCustom)) {
return true;
}
}

if (!element.className || typeof element.className !== "string") {
Expand Down Expand Up @@ -903,15 +916,19 @@ function getElementContext(element, stopped_element) {
}

// sometimes '*' shows as an after custom style
const afterCustom = getElementComputedStyle(element, "::after")
.getPropertyValue("content")
.replace(/"/g, "");
if (
afterCustom.toLowerCase().includes("*") ||
afterCustom.toLowerCase().includes("require")
) {
fullContext.push(afterCustom);
const afterCustomStyle = getElementComputedStyle(element, "::after");
if (afterCustomStyle) {
const afterCustom = afterCustomStyle
.getPropertyValue("content")
.replace(/"/g, "");
if (
afterCustom.toLowerCase().includes("*") ||
afterCustom.toLowerCase().includes("require")
) {
fullContext.push(afterCustom);
}
}

if (element.childNodes.length === 0) {
return fullContext.join(";");
}
Expand Down Expand Up @@ -1823,10 +1840,10 @@ function scrollToNextPage(draw_boxes) {

function isWindowScrollable() {
// Check if the body's overflow style is set to hidden
const bodyOverflow = window.getComputedStyle(document.body).overflow;
const htmlOverflow = window.getComputedStyle(
const bodyOverflow = getElementComputedStyle(document.body)?.overflow;
const htmlOverflow = getElementComputedStyle(
document.documentElement,
).overflow;
)?.overflow;

// Check if the document height is greater than the window height
const isScrollable =
Expand Down Expand Up @@ -1939,8 +1956,8 @@ if (window.globalObserverForDOMIncrement === undefined) {
// TODO: need to confirm that elemnent is hidden previously
const node = mutation.target;
if (node.nodeType === Node.TEXT_NODE) continue;
const newStyle = window.getComputedStyle(node);
const newDisplay = newStyle.display;
const newStyle = getElementComputedStyle(node);
const newDisplay = newStyle?.display;
if (newDisplay !== "none") {
window.globalOneTimeIncrementElements.push({
targetNode: node,
Expand All @@ -1956,8 +1973,8 @@ if (window.globalObserverForDOMIncrement === undefined) {
!isClassNameIncludesHidden(mutation.oldValue)
)
continue;
const newStyle = window.getComputedStyle(node);
const newDisplay = newStyle.display;
const newStyle = getElementComputedStyle(node);
const newDisplay = newStyle?.display;
if (newDisplay !== "none") {
window.globalOneTimeIncrementElements.push({
targetNode: node,
Expand Down
Loading