使用 selenium webdriver python 检索 SVG 文本元素

Question

我正在尝试使用 selenium webdriver (Firefox) 从可以查看课程评论的网站获取有关大学课程的信息....我可以让 webdriver 成功登录网站并访问课程信息页面，但是一旦我在那里，我就无法访问整体课程评分的文本元素。

页面如下所示：

课程评分表：

这就是文本元素 HTML 代码的样子：

<text style="text-anchor: middle; font: 12px Arial,Helvetica,sans-serif; 
opacity: 1;" x="438.00500259399416" y="131.25" text-anchor="middle" 
font="10px &quot;Arial&quot;" stroke="none" fill="#3c4c30" font-size="12px" 
font-family="Arial,Helvetica,sans-serif" font-style="normal" font-
weight="normal" transform="matrix(1,0,0,1,0,0)" opacity="1"><tspan 
dy="4">3.00</tspan></text>

还有svg代码：

<svg height="200" version="1.1" width="600" 
xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: 
relative; left: -0.5px; top: -0.866669px;"><rect x="0" y="0" width="600" 
height="200" r="0" rx="0" ry="0" fill="#ffffff" stroke="#ffffff" 
style="stroke-linejoin: round; stroke-linecap: square; stroke-opacity: 1; 
fill-opacity: 1;" stroke-linejoin="round" stroke-linecap="square" stroke-
width="1" stroke-opacity="1" fill-opacity="1"></rect>
.......</svg>

首先我尝试通过它的 CSS 选择器 (#chart > svg:nth-child(1) > text:nth-child(107)) 来识别元素，但我得到了一个 nosuchelement 异常。

我认为下一个选项是通过 XPath 查找元素，但我不确定如何识别“3.00”元素，因为它没有特定的 ID 或类名。

父元素1： （论文/问题集的栏和文本） -Papers/Psets 标签：

<text style="text-anchor: middle; font: 12px Arial,Helvetica,sans-serif;" 
x="0" y="0" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" 
fill="#3c4c30" font-size="12px" font-family="Arial,Helvetica,sans-serif" 
font-style="normal" font-weight="normal" 
transform="matrix(1,0,0,1,128,102.0833)"><tspan dy="4">Papers, Reports, 
Problem Sets, Examinations</tspan></text>

纸张/Psets 栏：

<rect x="262.03334045410156" y="96.00694444444444" width="216.0105950756073" 
height="12.152777777777777" r="0" rx="0" ry="0" fill="#ffffff" 
stroke="#ffffff" style="stroke-linejoin: round; stroke-linecap: square; 
stroke-opacity: 0; opacity: 1; fill-opacity: 0;" stroke-linejoin="round" 
stroke-linecap="square" stroke-width="0" stroke-opacity="0" opacity="1" 
fill-opacity="0"></rect>

论文/psets 的数字评级：

<text style="text-anchor: middle; font: 12px Arial,Helvetica,sans-serif; 
opacity: 1;" x="458.2356021327972" y="102.08333333333333" text-
anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#3c4c30" 
font-size="12px" font-family="Arial,Helvetica,sans-serif" font-
style="normal" font-weight="normal" transform="matrix(1,0,0,1,0,0)" 
opacity="1"><tspan dy="3.999997456868485">3.31</tspan></text>

父元素 2（其他学生的反馈栏）

反馈文字标签：

<text style="text-anchor: middle; font: 12px Arial,Helvetica,sans-serif;" 
x="0" y="0" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" 
fill="#3c4c30" font-size="12px" font-family="Arial,Helvetica,sans-serif" 
font-style="normal" font-weight="normal" 
transform="matrix(1,0,0,1,175.3333,160.4167)"><tspan dy="4">Feedback for 
other students</tspan></text>

反馈栏：

<rect x="262.03334045410156" y="154.34027777777777" 
width="232.3255947036743" height="12.152777777777777" r="0" rx="0" ry="0" 
fill="#ffffff" stroke="#ffffff" style="stroke-linejoin: round; stroke-
linecap: square; stroke-opacity: 0; opacity: 1; fill-opacity: 0;" stroke-
linejoin="round" stroke-linecap="square" stroke-width="0" stroke-opacity="0" 
opacity="1" fill-opacity="0"></rect>

反馈评分文字：

<text style="text-anchor: middle; font: 12px Arial,Helvetica,sans-serif; 
opacity: 1;" x="474.55060176086425" y="160.41666666666666" text-
anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#3c4c30" 
font-size="12px" font-family="Arial,Helvetica,sans-serif" font-
style="normal" font-weight="normal" transform="matrix(1,0,0,1,0,0)" 
opacity="1"><tspan dy="3.9999949137369697">3.56</tspan></text>

这是来自 page_source 的网站正文的完整 HTML 代码：

(https://pastebin.com/zpd4iF05)

对于我试图用来查找元素的python代码：

(https://pastebin.com/aW40P86u)

Answer 1

首先，您需要从 iframe 中获取 html。在这里查看答案： Is it possible to get contents of iframe in selenium webdriver python?

将 iframe 中的代码设置为驱动程序后，以下是获取必要信息的完整代码：

tspans = driver.find_element_by_id('chart').find_elements_by_tag_name("tspan")
values = map(lambda x: x.get_attribute('innerHTML'), tspans)
length = len(values)
scores = {
"Lectures": values[length-2],
"Precepts": values[length-3],
"Readings": values[length-4],
"Papers, Reports, Problem Sets, Examinations": values[length-5],
"Overall Quality of the Course": values[length-6],
"Feedback for other students": values[length-7]
}
browser.close()
print scores

这将输出：

{'Lectures': u'2.71', 'Papers, Reports, Problem Sets, Examinations': u'3.31', 'Readings': u'3.67', 'Overall Quality of the Course': u'3.00', 'Feedback for other students': u'3.56', 'Precepts': u'3.43'}

Answer 2

如果没有更多的 HTML，很难说出正确的定位器是什么。我将从包含文本的实际元素开始，并避免使用诸如 nth-child() 之类的定位器，因为 HTML 太容易发生轻微变化，然后您的定位器指向错误的元素。

你想要的元素是<tspan dy="4">3.00</tspan>。您是否尝试过像 tspan[dy='4'] 这样的简单 CSS 选择器？

我希望dy 与文本位置相关，并且在页面上是唯一的。如果您可以发布包含“课程整体质量”标签的整行的 HTML 和包含 3.00 的条形图，我认为可以创建一个 XPath 来查找您想要的内容。