Having trouble finding the svg class with protractor

I am struggling to find the SVG element within an Angular application that contains bar charts. Below is the relevant HTML snippet:

 <div class=" panel-body-style" _ngcontent-c1="">
   <table class="tabel bar-chart-table-fixed" _ngcontent-c1="">
     <tbody _ngcontent-c1="">
       <tr class="bar-chart-tr" _ngcontent-c1="">
         <td class="bar-label" _ngcontent-c1="">Assets ANR</td>
         <td id="bankwide-actual-chart" _ngcontent-c1="">
           <indium-charts _ngcontent-c1="" style="padding: 0px">
             <div id="holder" class="style-scope indium-charts">
               <svg class="bullet-bar-circle style-scope indium-charts" width="198" height="6.930000000000001">
             </div>
           </indium-charts>
         </td>
       </tr>

If anyone knows how to successfully locate the SVG class using Protractor, please share your insights.

javascriptangularjsselenium-webdriverprotractor

Answer №1

One issue with selenium is its difficulty in handling SVG tags. When dealing with SVG tags, it's important to stick to using only one cssSelector.

If you have a single id as holder, the following css selector should be used:

#holder > svg

To traverse to elements like g and rect, follow this path:

#holder > svg > g > rect

I hope this information proves helpful to you.

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 should be done if an image is not wide enough to stretch it to match the width of the window?

When the image is not full screen, it looks fine but when it's viewed in full screen, there's a white area on the right side which is likely due to the image not being large enough. Is there a way to automatically stretch the image so that its wi ...

javascripthtmlcssimagenext.js

Experimenting with code within a window event listener function

I have a component in my AngularJS application that is functioning correctly. However, when it comes to test coverage, everything after the 'window.addEventListener('message',' part is not being covered. Should I create a mock object f ...

javascriptangularjseventsmocking

Manipulate Selenium to interact with a dynamic div element and click on its text content

I am working with an array of strings that contain varying elements, including some with apostrophes. array = ["It's a Joke", "It's not a Joke","No more Jokes please"] strNo = 0 if (strNo == 0): rpstring = array[ ...

pythonselenium-webdriver

What is the best way to sort through td attributes in an HTML table?

I am trying to filter the td attribute in my HTML table, but the results are not as expected. My goal is to display the tr data-value attribute that contains the specified value. "My English may not be perfect, please bear with me." function FilterTabl ...

javascriptjqueryhtmlfilterattributes

Combining code to create a table and transfer files with the help of Rest API and Javascript

I have successfully implemented a code that draws a table using CEWP SPO. Now, I am looking to enhance this functionality by adding a button to each row in the table. This button should be able to move the corresponding files from their current location to ...

javascriptajaxsharepoint-onlinerest

Retrieving information from embedded JavaScript code

The web page I am scraping contains inline JavaScript that dynamically generates telephone numbers inside a script tag. These numbers are not visible in the page source, making it challenging to scrape using common methods like x-path and beautiful soup. U ...

javascriptpythonseleniumweb-scraping

The functionality of Vue slot-scope seems to be restricted when used within nested child components

Here is the component configuration being discussed: Vue.component('myComponent', { data () { return { msg: 'Hello', } }, template: ` <div class="my-component"> <slot :ms ...

javascriptvue.js

Posting data to an HTML file with a foreign key matching the input value in Express.js

My discussion platform features topics and comments. Each comment has its own unique topic_id. Currently, I am able to post comments for the initial topic, but encountering issues when adding new comments for other topics. I am looking for guidance on effi ...

javascripthtmlnode.jsexpresssqlite

Stopping Cross-Origin Resource Sharing (CORS) - Executing Ajax GET Requests on Ngin

I have set up Nginx as my web server and configured it as shown below: server { listen 3000; server_name .*; location / { proxy_pass http://127.0.0.1:3001; if ($request_method = 'OPTIONS') { add_h ...

javascriptjqueryajaxnginxcors

How to pre-select an option in a dropdown menu using AngularJS

Still getting the hang of AngularJS, it's a work in progress. I've been using KnockoutJS for a while now and feel comfortable working with JavaScript. Currently, I'm working on a Task Manager app that returns JSON data like this when making ...

angularjsng-options

Perform batch updates on multiple documents using MongoDB

How can I efficiently update multiple documents in MongoDB by iterating through an array of objects and then returning the modified documents in the response? Be sure to refer to the code comments for guidance .put(function (req, res) { var data = r ...

javascriptnode.jsmongodbexpresses6-promise

How to make the slides in a Bootstrap 4 carousel slide in and out with animation

I'm currently utilizing the bootstrap 4 carousel and have made some customizations to fit my project needs. The main requirement is: When I click on the next slide, the current next slide should become active and a new next slide should load with ...

javascripthtmljquerycssbootstrap-4

Tips for accessing the selected button in notification.confirm() within a PhoneGap app

Recently, I implemented the Phonegap notification.confirm in this way: navigator.notification.confirm( 'Do you wish to proceed?', function() { console.log("Function Called"); }, 'Game Over', 'Continu ...

javascriptcordova

Using the onreadystatechange method is the preferred way to activate a XMLHttpRequest, as I am unable to trigger it using other methods

I have a table in my HTML that contains names, and I want to implement a feature where clicking on a name will trigger an 'Alert' popup with additional details about the person. To achieve this, I am planning to use XMLHttpRequest to send the nam ...

javascripthtmlajax

jquery ajax does not receive the returned data

I am working on a jQuery AJAX script $.ajax({ type: "POST", url: "register.php", data: "name=" + name + "&email=" + email + "&password=" + password + "&confirm_password=" + confirm_password + "&captcha=" + captcha, success: ...

javascriptphpjqueryajax

Different ways to pass an input file type through JavaScript within Joomla modules

I need to transfer a file from JavaScript to a PHP file. In my PHP file, I have the following form: <form action="" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="file" name="file ...

javascriptphpjqueryjoomla

Acquiring an array of fields using MongoDB Aggregate

Currently exploring the MongoDB aggregation framework, let's consider a collection structured like this: [ { _id: ObjectId(123) name: john, sessionDuration: 29 }, { _id: ObjectId(456) name: moore, sessionDuration: 45 }, ...

javascriptmongodbaggregation-frameworkaggregateaggregate-functions

Customize the size of data points on your Angular 2 chart with variable

In my Angular 2 application, I am utilizing ng2-charts to create a line chart. The chart functions properly, showing a change in color when hovering over a point with the mouse. However, I want to replicate this behavior manually through code. Upon clicki ...

javascriptangularjsangularchart.jsng2-charts

Adding a detached <li> element to a <ul> list: step-by

I am currently facing an issue with adding a li element after deleting it from a ul list. I have experimented with various methods using append() and appendTo() but to no avail. https://jsfiddle.net/kq1yyoLk/ The main concept is that when you click on ite ...

javascriptjquery

Having trouble with parsing JSON data using jQuery?

I am currently working on retrieving a result set using postcodes with jQuery autocomplete. However, the code I have implemented seems to be displaying an empty set of rows. <html lang="en"> <head> <meta charset="utf-8> <title>Ausp ...

javascriptphpjqueryjson