Introduction
Many modern web applications use SVG (Scalable Vector Graphics) to display icons, charts, logos, maps, diagrams, and interactive graphics. Unlike regular HTML elements, SVG elements belong to the SVG namespace, which makes locating and interacting with them slightly different.
Selenium can automate SVG elements, but choosing the correct locator strategy is important. In many cases, CSS Selectors are simpler and more reliable than XPath for locating SVG elements.
In this tutorial, you’ll learn how to automate SVG elements using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.
What are SVG Elements?
SVG (Scalable Vector Graphics) is an XML-based format used to create vector graphics on webpages.
Unlike images such as PNG or JPG, SVG graphics can scale without losing quality.
Example:
SVG
├── Circle
├── Rectangle
├── Line
├── Path
└── Polygon
Each SVG shape is an individual element that Selenium can interact with.
Why Automate SVG Elements?
Automating SVG elements helps you:
Test interactive charts.
Verify graphs.
Test clickable icons.
Validate maps.
Automate dashboards.
Why are SVG Elements Different?
SVG elements belong to a different XML namespace than normal HTML elements.
Because of this:
Some XPath expressions become more complex.
CSS Selectors are often simpler and easier to maintain.
Browser Developer Tools can help identify SVG element attributes.
Example
from selenium import webdriver
from selenium.webdriver.common.by import By
# Topic: 31. Modern Web Elements - SVG Elements
# Practice site: https://www.testmuai.com/selenium-playground/
# Run: pytest -s 31_examples/test_05_svg_elements.py
#
# SVG elements live in the SVG namespace, so CSS selectors are usually simpler
# than XPath for locating them.
def test_click_svg_element():
driver = webdriver.Chrome()
try:
driver.get("https://www.testmuai.com/selenium-playground/")
driver.execute_script(
"""
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('id', 'demo-svg');
svg.setAttribute('width', '120');
svg.setAttribute('height', '80');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('id', 'demo-circle');
circle.setAttribute('cx', '40');
circle.setAttribute('cy', '40');
circle.setAttribute('r', '25');
circle.setAttribute('fill', 'blue');
circle.addEventListener('click', () => circle.setAttribute('data-clicked', 'yes'));
svg.appendChild(circle);
document.body.appendChild(svg);
"""
)
circle = driver.find_element(By.CSS_SELECTOR, "circle#demo-circle")
circle.click()
assert circle.get_attribute("data-clicked") == "yes"
finally:
driver.quit()
Understanding the Code
Import Required Libraries
from selenium import webdriver
from selenium.webdriver.common.by import By
These modules are required to launch the browser and locate SVG elements.
Create a Chrome Browser Instance
driver = webdriver.Chrome()
Starts a new Chrome browser session.
Open the Practice Website
driver.get("https://www.testmuai.com/selenium-playground/")
Navigates to the Selenium Playground website.
Create an SVG Element
driver.execute_script(
"""
...
"""
)
This JavaScript dynamically creates:
An SVG container.
A blue circle inside the SVG.
A click event listener that sets the attribute
data-clicked="yes"when the circle is clicked.
This provides a simple SVG example for automation.
Locate the SVG Circle
circle = driver.find_element(
By.CSS_SELECTOR,
"circle#demo-circle"
)
Locates the SVG <circle> element using a CSS Selector.
Since SVG elements belong to the SVG namespace, CSS selectors are often the simplest way to identify them.
Click the SVG Element
circle.click()
Clicks the SVG circle.
The JavaScript click event updates the element by adding the attribute:
data-clicked="yes"
Verify the Click Action
assert circle.get_attribute("data-clicked") == "yes"
Verifies that clicking the SVG element successfully updated the attribute.
If the click event does not execute correctly, the test fails.
Close the Browser
driver.quit()
Closes the browser and ends the WebDriver session.
Practical Example
Suppose an analytics dashboard displays data using interactive SVG charts.
The automation script:
Opens the dashboard.
Clicks a chart segment.
Verifies that the selected data is displayed.
Automation Testing Example
Consider an online mapping application.
The map markers are implemented using SVG icons.
The automation script:
Opens the map.
Clicks a location marker.
Verifies that the location details appear.
Real-World Example
SVG elements are commonly used in:
Analytics dashboards
Interactive charts
Maps
Banking dashboards
E-commerce websites
Monitoring systems
Enterprise applications
Examples include pie charts, bar charts, line graphs, organization charts, floor plans, icons, and interactive diagrams.
Advantages of Automating SVG Elements
Tests interactive graphics.
Verifies chart functionality.
Supports dashboard automation.
Improves automation coverage.
Simulates real user interactions.
Common Mistakes Beginners Make
Treating SVG Like Normal HTML
SVG elements belong to a separate namespace and may require different locator strategies.
Using Complicated XPath Expressions
Whenever possible, prefer CSS Selectors for SVG elements because they are usually shorter and easier to maintain.
Assuming Every SVG Element is Clickable
Not every SVG shape responds to click events.
Verify the application behavior before writing the automation.
Ignoring Browser Developer Tools
Inspect SVG elements carefully to identify IDs, classes, and other useful attributes.
Best Practices
Prefer CSS Selectors for SVG elements whenever possible.
Inspect SVG elements using browser Developer Tools.
Verify that the SVG element is visible before clicking.
Confirm the expected result after interacting with the SVG.
Keep locator strategies simple and maintainable.
Conclusion
SVG elements are widely used in modern web applications for interactive graphics, charts, icons, and maps. Because SVG elements belong to their own namespace, CSS Selectors are often the easiest and most reliable way to locate them. Understanding how to automate SVG elements is an important Selenium skill for testing modern dashboards and graphical user interfaces.
Frequently Asked Questions (FAQs)
What is SVG?
SVG (Scalable Vector Graphics) is an XML-based format used to create scalable graphics for webpages.
Why are SVG elements different from HTML elements?
SVG elements belong to the SVG namespace, which affects how they are located and manipulated.
Which locator is commonly preferred for SVG elements?
CSS Selectors are commonly preferred because they are simpler and more reliable for many SVG elements.
Can Selenium click SVG elements?
Yes.
Selenium can click SVG elements just like normal web elements, provided they are visible and clickable.
Where are SVG elements commonly used?
SVG elements are widely used in dashboards, charts, maps, icons, diagrams, monitoring systems, and enterprise web applications.
Key Takeaways
SVG is used to create scalable graphics on webpages.
SVG elements belong to a different namespace than HTML elements.
CSS Selectors are often the preferred locator strategy for SVG elements.
Selenium can interact with SVG elements like other web elements.
SVG automation is commonly required for charts, maps, dashboards, and interactive graphics.
Understanding SVG automation improves Selenium test coverage for modern web applications.