使用硒webdriver python來檢索SVG文本元素

Question

我想使用硒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/Pset中標籤：

<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> 

紙張/ Pset中吧：

<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> 

號碼評級紙/ pset中：

<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> 

這裏是身體的整個HTML代碼來自page_source的網站：

（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>。你有沒有試過一個簡單的CSS選擇器，如tspan[dy='4']？

我希望dy與文本位置相關，並且在頁面上將是唯一的。如果您可以發佈包含「課程總體質量」標籤的整行HTML以及包含3.00的條形圖，我認爲可以創建XPath以查找您想要的內容。