在剧作家中定位后无法从节点获取类名答案

【问题标题】：Cannot get class name from node after locating it in playwright在剧作家中定位后无法从节点获取类名
【发布时间】：2022-08-18 23:30:21
【问题描述】：

我有一个这样的 SVG 对象：

<svg class=\"class-a color-green marker\" .../>

在 Playwright 中，我想获得该元素类的确切列表。我使用以下代码来定位它：

page.locator(\".status-marker\").first

该节点的位置正确，但是当我在其上调用evaluate(\"node => node.className\") 时，我得到一个空字典，就像定位器完全剥离了有关类的所有信息一样。

一般来说，我如何获得这个元素的句柄并不重要，我总是在evaluate(\"node => node.className\") 上得到一个空字典。

调用page.locator(\".status-marker\").first.is_visible() 返回True，所以对象存在。

此外，如果我运行page.locator(\".status-marker\").first.evaluate(\"node => node.outerHTML\")，我将获得该节点的完整 HTML，其中包含类名。我可以解析它，但这将是一个非常笨重的解决方案。

我发现我可以使用expect(locator).to_have_class()，但是如果节点有多个类，我需要把它们都放在它上面，当我只关心其中一个时（其他类是动态生成的，所以我在测试期间甚至不知道它们）。

编辑：

这是一些额外的示例：

assert page.locator(\".marker\").first.evaluate(\"node => node.className\") == {}
expect(page.locator(\".marker\").first).to_have_class(\"text-green-1\")

第一个断言通过 - evaluate(\"node => node.className\") 返回一个空字典。 expect() 失败并出现以下错误：

AssertionError: Locator expected to have class \'text-green-1\'
E       Actual value: inline pr-2 text-green-1 marker svelte-fa s-z-WEjw8Gh1FG

我找到了一种重现它的方法（它发生在我的字体真棒插件中）：

def test_svelte_fa(page):
    page.goto(\"https://cweili.github.io/svelte-fa/\")

    item = page.locator(\".svelte-fa\").first
    assert item.is_visible()
    assert \"svelte-fa\" in item.evaluate(\"node => node.className\")

我浏览了这个问题的 URL，page.locator(\'#question > div.post-layout > div.votecell.post-layout--left > div > div.js-vote-count.flex--item.d-flex.fd-column.ai-center.fc-black-500.fs-title\').first.evaluate(\"node => node.className\") 按预期工作。
@hardkoded - 我在另一个公共网站上用一个例子更新了这个问题，我设法重现了这个问题。

标签： playwright playwright-python

【解决方案1】：

在您的示例中，SVG 的 className 是 SVGAnimatedString 对象。这是不可序列化的。
如果您在浏览器上执行JSON.stringify($('.svelte-fa').className)，您将看到该值为{}。
evaluate 函数返回的值需要可序列化。

【讨论】：