个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
30
4
我正在尝试自动化 www.freeinvaders.org使用 Python 和 Selenium 的 Space Invaders 版本。实际游戏通过 HTML5 canvas 元素运行，该元素包裹在 shadow-root 中。
使用 this question 的答案，我正在尝试展开影子根，这样我就可以单击 Canvas 并“玩”游戏。
我当前的代码:
def expand_shadow_element(element):
shadowRoot = browser.execute_script('return arguments[0].shadowRoot', element)
return shadowRoot
browser = webdriver.Firefox()
browser.get("http://www.freeinvaders.org/")
#wait for element to load
el = WebDriverWait(browser, timeout=20).until(lambda d:d.find_element_by_tag_name("ruffle-player"))
time.sleep(5)
#expand the shadowroot and click the canvas
host = browser.find_element_by_tag_name("ruffle-player")
shadowRoot = expand_shadow_element(host)
canvas = shadowRoot.find_element_by_tag_name("canvas")
canvas.click()
页面的HTML结构是这样的:(为便于阅读而删节)
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Free Invaders</title>
</head>
<body>
<div id='full-page-container'>
<main>
<div id="game-container">
<ruffle-player>
#shadow-root (open)
<div id="container" style="visibility: visible;">
<canvas width="1600" height="760" style="touch-action: none; cursor: auto;"></canvas>
</div><!--container-->
</ruffle-player>
</div><!--game-container-->
</div><!--fullpagecontainer-->
</body>
运行上述 Pyhton 脚本时，在这一行失败:
shadowRoot = browser.execute_script('return arguments[0].shadowRoot', element)
Javascript 错误:
selenium.common.exceptions.JavascriptException: 消息:循环对象值
我知道这个错误应该意味着返回的 JSON 字符串中有一个自引用项，但这里不应该是这种情况。
任何人都可以帮助我解释为什么会出现此错误以及采取什么行动可以缓解这个问题吗？
我使用的是 Python 3.8.5、Selenium 3.141.0 和 Firefox 86.0。所有这些都在 Linux Mint 20.1 上运行。
编辑我也尝试过替代 Javascript:
shadowRoot = browser.execute_script('document.querySelector("ruffle-player").shadowRoot')
但这只会返回另一个错误:
AttributeError: 'NoneType' object has no attribute 'find_element_by_tag_name'
这表明它甚至没有找到任何对象。
最佳答案
这似乎是在 bugzilla 上提交的一个已知问题。
geckodriver 开发者还表示 WebDriver 规范需要更新。参见:w3c/webdriver#350。
但是，CAVAh 已经找到并发布了解决此问题的方法 here。
按照返回 shadowroot 的子元素的建议 return arguments[0].shadowRoot.children 它找到了 4 个元素:
[<selenium.webdriver.firefox.webelement.FirefoxWebElement (session="1dd0fedf-1a8c-42f2-a4de-0ed7df478212", element="252a6352-4fe0-409d-a626-18456a973da5")>,
<selenium.webdriver.firefox.webelement.FirefoxWebElement (session="1dd0fedf-1a8c-42f2-a4de-0ed7df478212", element="47d76aed-5f44-4933-9718-53267a6417bf")>,
<selenium.webdriver.firefox.webelement.FirefoxWebElement (session="1dd0fedf-1a8c-42f2-a4de-0ed7df478212", element="d3fcad48-7cbb-4de3-a247-49d7d227e982")>,
<selenium.webdriver.firefox.webelement.FirefoxWebElement (session="1dd0fedf-1a8c-42f2-a4de-0ed7df478212", element="abb5012e-79bf-494b-b5f2-ff28dfecab0f")>]
在检查这些之后，看起来第三个元素包含 Canvas 并且可以点击。
下面的代码似乎对我有用:
def expand_shadow_element(element):
# return a list of elements
shadowRoot = browser.execute_script('return arguments[0].shadowRoot.children', element)
return shadowRoot
browser = webdriver.Firefox()
browser.get("http://www.freeinvaders.org/")
#wait for element to load
el = WebDriverWait(browser, timeout=20).until(lambda d:d.find_element_by_tag_name("ruffle-player"))
time.sleep(5)
#expand the shadowroot and click the canvas
host = browser.find_element_by_tag_name("ruffle-player")
shadowRoot = expand_shadow_element(host)
canvas = shadowRoot[2].find_element_by_tag_name("canvas")
canvas.click()
关于javascript - 在 Firefox 中通过 Selenium 访问 ShadowRoot 返回 JavascriptException : Cyclic object value，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67133483/
30
4
0
我正在尝试在 Javascript 中选择 Shadow 根，以便我可以设置内部元素的样式。但是当使用 elem.shadowRoot 时它返回 Null 尽管 ShadowRoot 是下一个元素。下
我的自定义 HTMLElements 中的大多数事件处理程序看起来像这样， totalChanged() { if (!this.shadowRoot) return const
我正在尝试克隆影子根，以便我可以交换 的实例及其相应的分布式节点。 我的方法: var shadowHost = document.createElement('div'); var shadowR
我试图在另一个自定义元素阴影根中访问我的自定义元素的内容。 index.html刚好有一个 my-tag-wrapper元素: ... ... my_tag_wrapper.html包含 my-t
我有一个丰富的编辑器，我正在将其重写为 lit-element 自定义元素。我正在使用 Firefox(最新)进行测试。我正在尝试在自定义元素的 shadowDom 中选择内容可编辑元素(在方法中)。
这个问题在这里已经有了答案: How to access host element from within the shadow root using Shadow DOM v1? (2 个答案)
我无法理解何时可以访问组件的 shadowRoot。这是一组嵌套组件的图像: 所以有一些组件: MortgageDetails:将一组 3 个其他组件绑定(bind)在一起的组件 MoneyInput
我在测试上下文中对 shadowroot 中的元素执行操作时遇到困难。假设我有一个 Web 组件 它包含一个按钮 从 chrome 控制台，我可以执行以下操作: document.getElement
所以我有这个角 Dart 组件: @Component(...) class TableCard implements AttachAware, ShadowRootAware { void on
我在访问 Polymer 元素的 shadowDom 时遇到问题。这是元素的(截断)代码: Drag and drop the letters to form anagrams
Chrome 中的谷歌翻译扩展，具有弹出功能，它会立即显示所选单词的翻译，我想访问弹出显示的那些翻译，但是这个弹出元素是 shadowRoot("closed")，所以 javascript 无法访问
在下面的示例中，我尝试创建一个菜单组件来试验组件层次结构。 index.html Sample Menu App
我正在尝试访问元素上的 ShadowRoot，属性 element.shadowRoot 返回 null。 ShadowDOM 定义为 mode: 'open'，这是正确的，我什至可以通过 conso
我正在使用 Jest 设置 Vue3 和单元测试。 我已经不得不努力让它工作，并且我已经尝试了很多不同的配置。 这是我最后一次“工作”配置，我得到了这个错误: ReferenceError: Shad
我正在尝试使用以下内容读取元素的值 (innerHTML/innerText) 属性，但我得到一个空字符串。cy.get('#INGLoanRequests-container').shadow().
我正在尝试访问 ShadowRoot dom 树元素，但我面临的问题是我无法使用特定的 html 元素来调用 .ShadowRoot，因为该元素是动态的(请参见下面的 html 片段 id="vaad
我正在创建一个自定义元素并将其 shadowRoot 设置为包含其他自定义元素，这会引发 NotSupportedError (DOM Exception 9): A newly constructe
我尝试截取 AMP Stories 的屏幕截图，但不使用声音和分享按钮。 当我发现有一个叫做shadow DOM的东西之后，我想知道如何在那里设置显示:无: addStyleTag({content:
好的，所以我在这里看到了一些与我的问题类似的问题，但没有一个解决方案对我有用，所以我认为最好更具体地描述我的问题。 我正在使用 Web 组件，起初我没有使用 lit 元素，当时 this.shadow
我有一个非常简单的网站，类似于 jsfiddle .一切似乎都很好，但在我的本地，但是当我停在第一行 JS 时(在声明自定义元素之前)我可以看到没有格式的 div ...... T
我是一名优秀的程序员,十分优秀！