Using selenium webdriver python to retrieve SVG text element

Question

I am trying to use selenium webdriver (Firefox) to get information about college courses from a website where we can see course reviews .... I can get the webdriver to successfully log into the website and reach the course info page, but once I am there I can't access the text element for the overall course rating.

Here is what the page looks like:

Course Ratings Chart:

Course Ratings Chart

And this is what the text element HTML code looks like:

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

And the svg code:

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

First I tried identifying the element by it's CSS selector (#chart > svg:nth-child(1) > text:nth-child(107)) but I got a nosuchelement exception.

I think the next option is to find the element by XPath but I'm not sure how to identify the "3.00" element because it doesn't have a specific ID or class name.

Parent element1: (bar and text for Papers/Problem Sets) -Papers/Psets label:

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

Paper/Psets bar:

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

Number rating for papers/ 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>

Parent element 2 (Feedback for other students bar)

Feedback text label:

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

Bar for feedback:

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

Feedback rating text:

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

Here is the entire HTML code for the body of the website from page_source:

(https://pastebin.com/zpd4iF05)

And for the python code I attempted to use to find the element:

(https://pastebin.com/aW40P86u)

pthamm · Accepted Answer · 2017-08-31 02:57:11Z

2

First you need to get the html from the iframe. See the answer here: Is it possible to get contents of iframe in selenium webdriver python?

Once you have the code from iframe set to the driver, here's the full code to get the necessary info:

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

That will output:

{'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'}

edited Aug 31, 2017 at 2:57

answered Aug 30, 2017 at 22:41

pthamm

1,8411 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

programmingnovice Over a year ago

AHHH yes it worked!!!!!!! I just needed to convert the map type into a list using lis = list(values) Thanks a ton! Can't thank you enough!

JeffC · Accepted Answer · 2017-08-26 00:37:49Z

0

Without more of the HTML it's hard to say what the right locator would be. I would start with the actual element that contains the text and avoid locators that use things like nth-child() because it's WAY too easy for the HTML to change slightly and then your locator is pointing at the wrong element.

The element you want is <tspan dy="4">3.00</tspan>. Have you tried a simple CSS selector like, tspan[dy='4']?

I'm hoping that the dy is related to the text position and will be unique on the page. If you can post the HTML for the entire row that contains the "Overall quality of the course" label and the bar graph that contains 3.00, I think that an XPath can be created to find what you want.

answered Aug 26, 2017 at 0:37

JeffC

26.4k5 gold badges35 silver badges57 bronze badges

6 Comments

programmingnovice Over a year ago

Hey thanks for the reply! Here is the HTML code for the "Lectures" element for example...I don't think the dy is unique to the rows :( ` <text style="text-anchor: middle; font: 12px Arial,Helvetica,sans-serif;" x="0" y="0" text-anchor="middle" font="10px "Arial"" 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,227,14.5833)"><tspan dy="4">Lectures</tspan></text>`

programmingnovice Over a year ago

And this is the HTML element for that specific row:

<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,173.0333,131.25)"><tspan dy="4">Overall Quality of the Course</tspan></text>

programmingnovice Over a year ago

And the code for the bar graph with the 3.00:

<rect x="262.03334045410156" y="125.17361111111111" width="195.7799955368042" 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>

programmingnovice Over a year ago

Would it be possible to identify that row based on the x/y coordinates?

JeffC Over a year ago

Find the nearest parent element that contains both the text and rect elements and post that entire block in your question formatted.

|

Collectives™ on Stack Overflow

Using selenium webdriver python to retrieve SVG text element

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related