Unable to find any interactive elements on the page

When I visit this website, I come across a chart.
I am able to locate the chart boundaries element using 

//div[@data-chart_id='product_cannabinoids']
, but I cannot find the rect, svg, or g elements inside it.
Even though I can see these elements in the F12 developer tool, searching for 
//div[@data-chart_id='product_cannabinoids']//svg
or 
//div[@data-chart_id='product_cannabinoids']//rect
does not yield any results.
It seems like these elements might be generated dynamically with JavaScript, but they do not behave like pseudo elements, they appear to be regular elements!
Can anyone explain why this occurs and suggest a reliable method to locate these elements using Selenium?

javascriptselenium

Answer №1

When it comes to locating 'svg' and 'rect' elements in XPATH, a unique approach is needed. Instead of the usual method, you can use the following syntax:

//*[local-name() = 'svg']

The reason for this is that 'svg' and 'rect' belong to different XML namespaces, hence the need for a specialized approach.

Alternatively, you can consider using CSS selectors as they are compatible with all types of elements, providing a more versatile solution.

Answer №2

It's important to note that SVG elements have their own unique characteristics and may require special handling.

For more information, take a look at this helpful response:

Click here to learn about using Selenium WebDriver to interact with elements within an SVG using XPath

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the easiest way to switch the ON-OFF button and fetch data from the API?

I have completed my code to fetch data from an API upon button click, but I am now looking for a way to incorporate a toggle button for a more user-friendly and organized interface. However, I am unsure of how to implement this feature within my function a ...

javascriptreactjstogglefetch-api

I need assistance in locating an error; the error message states that $ is not defined and an object is expected

Issue with $ not being defined, object expected.. I am trying to verify if all sets of radio buttons are checked when a button is clicked! Please help. <script type="text/javascript> $(document).on('click', 'form', function () { ...

javascriptjqueryarrays

Angular click directive

Exploring AngularJS and attempting to modify an example from a tutorial. I want the ng-init value to be equal to the value passed from a script function. How can I achieve this? Here's the code snippet: <html> <body> <h2> ...

javascriptangularjs

Can context be passed into a component that is created using ReactDOM.render()?

TL;DR In this given example code: ReactDOM.render(<MyComponent prop1={someVar} />, someDomNode); Can one manually provide React context to the instance of MyComponent? This might seem like an unusual question considering React's usual behavio ...

javascriptreactjs

Automatically open the Chackra UI accordion upon page loading

Currently, I am working on developing a side menu with accordion functionality in Nextjs. I have managed to get the index values from 0 to 1 based on the page URL, but I am facing an issue where the accordion is not opening as expected. Each time a user ...

javascriptreactjsnext.jsaccordionchakra-ui

Clicking on the button in Angular 2+ component 1 will open and display component 2

I've been developing a Angular 4 application with a unique layout consisting of a left panel and a right panel. In addition to these panels, there are 2 other components within the application. The left panel component is equipped with buttons while ...

javascriptangular

Step-by-step guide on entering text into a hidden field with Selenium WebDriver and Java

I am currently utilizing WebDriver in conjunction with Java for automated testing. I have come across a hidden input field within the following HTML code: <input type="hidden" value="" name="body" id=":6b"> My challenge lies in trying to input data ...

javajavascripttextfieldselenium-webdriverhidden-field

Dynamic x-axis movement with interactive Google Line Chart functionality

I am struggling with implementing Google charts, After reviewing Real-time changing point chart with Google Charts, I realized it is not providing the solution I need. I aim to achieve a similar result as shown in this example: Is there a method for me t ...

javascriptjquerychartsgoogle-visualization

Navigating from the Login Page to the Dashboard in Vue.js following successful token validation

I am facing an issue with the code that is supposed to redirect the User to the dashboard page if they have a token. Despite generating a JWT token from my Spring Boot backend and sending it to Vue for processing, the redirection is not working as expect ...

javascriptvue.jsauthenticationhttp-redirecttoken

What is the reason for the viewport in three.js renderer not functioning properly on IE browser?

Try setting the viewport with different coordinates: this.renderer.setViewport(50, -50, this.width, this.height); What could be causing issues with IE browser compatibility? ...

javascriptthree.js

Tips for selecting a JSON data node on-the-fly using jQuery

This is an example of my ajax function: $.ajax({ type: "GET", dataType: "json", async: false, url: "/wp-content/comment_data.php", data: 'songid=' + $array, success: function(data){ oTable.find('td').eac ...

javascriptjquery

Extract information from webpage utilizing iframe using C#

I'm working on retrieving data from a specific webpage at The webpage allows you to input a container number (e.g. OOLU0198315) and it will provide information on whether the container is unloaded, along with other details. However, I've encoun ...

c#seleniumweb-scrapinghtml-agility-pack

angularjs dropdown - customize selected item appearance

My dilemma involves a list of countries, each with a code and name. When the list is expanded, I aim to show "code + name" (e.g. "+44 United Kingdom"). However, once a country is selected, I only want to display the code ("+44"). Is it achievable using Ang ...

javascriptangularjshtml

What is the method to obtain the dimensions of the browser window using JavaScript?

In my JavaScript code, I am trying to retrieve the browser window size and then set the size of a div element accordingly. I have two div elements that should adjust based on the window size. For example, if the window size is 568px, div1 should be 38% of ...

javascriptjqueryhtmlcss

JavaScript can be utilized to manage the exit events

Possible Duplicate: Alert when browser window closed accidentally Is there a way to trigger a new window to open when a user clicks the exit button (X) on the browser, similar to how the Wordpress Admin Panel functions? In the Wordpress panel, when t ...

javascriptjqueryevents

How to retrieve items from a DynamoDB table where the fields array is not empty using JavaScript FilterExpression

Can anyone help me with filtering this sample dynamodb table to only return items where either the "old" or "new" array is not empty? In the example below, it should retrieve the items with id "2" and "3". Table: field name = item [ { id: "1", p ...

javascriptamazon-dynamodbfilterexpression

What is the best way to incorporate auto refresh in a client-side application using vue.js?

Disclaimer: I have separated my client application (Vue.js) from the server side (DjangoRest). I am utilizing JWT for validating each request sent from the client to the server. Here is how it works - The client forwards user credentials to the server, an ...

javascriptauthenticationvue.jsjwtrefresh-token

Issue with `styles` argument after updating from Material version 4 to 5: MUI

After recently upgrading from Material V4 to V5, I encountered the following error message: MUI: The `styles` argument provided is invalid. You are providing a function without a theme in the context. One of the parent elements needs to use a ThemeProvider ...

javascriptreactjsmaterial-uimaterial-design

Passing data as a parameter to a page in React using history push

My Ionic React application includes functionality where the history.replace method is used to redirect users from the settings page to the login screen upon clicking a logout button. I am looking for a way to include a loggedOut flag in the redirection pro ...

javascriptreactjsionic-frameworkreact-router

Exploring the capabilities of webdriverIO in testing websites on an iOS simulator

I am struggling with setting up browser testing in the iOS simulator using webdriverIO. Instead of running the tests through the iOS simulator, the browser is launching in the desktop version of Safari. There are no errors being reported. I am utilizing th ...

seleniumselenium-webdriversafariwebdriverwebdriver-io