Using Selenium with C# to find elements within a chart

I am trying to locate and interact with the stimulusFrequency circles on this chart so that I can click and drag them.

<svg class="svg-graph-content graphEventHandler ng-valid" ng-model="hearingGraph" viewBox="0 0 470 355" preserveAspectRatio="none">
<path class="" ng-show="audiogram.leftEnabled" ep-d="M42 148.39999389648438 L126 148.71843558091385 L210 147.23333740234375 L294 147.86266635014462 L378 147.86266635014462 L462 147.86266635014462" fill-opacity="0" stroke-width="2" stroke="rgb(0,0,255)" d="M42 148.39999389648438 L126 148.71843558091385 L210 147.23333740234375 L294 147.86266635014462 L378 147.86266635014462 L462 147.86266635014462" style="">
<circle class="" ng-touch="manualGraph($event, c, 'left')" ng-mousedown="manualGraph($event, c, 'left')" ng-show="audiogram.leftEnabled && manual" ng-repeat="c in audiogram.tonePoints | filter: {'resultSet': 'left'} | orderBy : 'stimulusFrequency'" fill="black" ep-r="8" ep-cy="148.39999389648438" ep-cx="42" cy="148.39999389648438" cx="42" r="8">

I have identified the XPath using firebug for one of the circle elements as shown below, however, I encountered a "No such element" exception:

.//*[@id='layout-wrapper']/ui-view/ui-view/div/ep-annotation-widget/div/div/div/div[1]/div[4]/div[1]/div[2]/svg/circle[1]

My initial attempt to locate the circles using the tag name "circle" returned 27 results instead of the expected 12, indicating there may be duplicates, so I will continue investigating.

javascriptc#seleniumxpathselenium-webdriver

Answer №1

I brainstormed this solution. Do you have any suggestions for improving it?

    public static void MoveNode(string side, int frequency)
    {
        int circleIndex = 0;
        switch (frequency)
        {
            case 250:
                if (side == "right")
                {
                    circleIndex = 12;
                }
                else if (side == "left")
                {
                    circleIndex = 0;
                }
                break;
            case 500:
                if (side == "right")
                {
                    circleIndex = 13;
                }
                else if (side == "left")
                {
                    circleIndex = 1;
                }
                break;
        }
        var circles = Driver.Instance.FindElements(By.TagName("circle"));
        circles[circleIndex].Click();
        //add logic for drag and release here
    }

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

The display of 'App' seems to be experiencing issues within the render method

Can someone help me with this issue? I am encountering the following error: Uncaught Error: Invariant Violation: Element type is invalid - expected a string for built-in components or a class/function for composite components, but received an object. Bel ...

javascriptreactjs

Protractor throws an error when trying to display toast notifications due to a "RangeError: Maximum call stack size exceeded"

I've attempted to test the behavior of toast notifications using the code snippet below (refer to the latest code block): describe('vCita Frontage - Conversation test cases', function() { var EC = protractor.ExpectedConditions; var ...

angularjsnode.jsselenium-webdriverjasmineprotractor

Is there a way to create a PHP function that can process an AJAX request and return a boolean value?

After some testing, I discovered that when the code snippet below is executed within my PHP function to manage an AJAX call: session_start(); if ( $_POST['animal'] != $_SESSION['animal'] ) die(json_encode(false)); Upon returning to th ...

javascriptphpjqueryajax

Validator returns undefined when expressing invalid data

Having an issue with validation, here is the code snippet: routes.js var express = require('express'); var router = express.Router(); var hello_controller = require('../api/controllers/helloController'); var { validationRules, validat ...

javascriptnode.jstypescriptexpressvalidation

Having trouble locating a div element by its class name using Selenium in Python

Struggling to access the "events" section within the div labeled "rps-wrapper" on the webpage http://gridworlds-multiplayer.org/, encountering an error when using a function. <div class="rps-wrapper"> <ul id="events"></ul> ...

pythonseleniumxpathcss-selectorswebdriverwait

Converting Zerodha data into a Pandas DataFrame

Currently, I am working on a project that involves extracting raw data from Zerodha into pandas using Python along with Selenium. However, I am encountering an issue while trying to click on the toggle button that displays the raw data. Please refer to the ...

pythonpython-3.xselenium-webdriver

Perform a calculation using data from one schema and store the result in a different schema within MongoDB using Node.js

var ItemSchema = new Schema({ name: {type: String}, size : {type: String}, price : { type: Number} }); var SizeSchema = new Schema({ sizeName: {type: String}, dimensions : {type: String} }); F ...

javascriptnode.jsmongodbexpress

I am looking to create a for loop that will automate the process of clicking on multiple links and navigating back to the previous page

Below is the code I have written to achieve a specific task: my_list = WebDriverWait(driver, 20).until(EC.visibility_of_all_elements_located((By.XPATH, "//table[@border='1']//a"))) for option in my_list: option.click() WebDriver ...

python-3.xseleniumfor-loopselenium-webdriverautomation

The local variable within the Angular constructor is not initialized until the ngOnInit() function is invoked

I am encountering difficulties with making backend calls from Angular. In my component, I am fetching the "category" parameter from the URL as shown below: export class ProductsComponent{ productList = [] category = "" $params; $products ...

javascriptangular

Is it better to use relative or absolute resource scripts in an AngularJS application?

My project involves building a single-page JavaScript app using AngularJS. In order to achieve this, the index.html file has a specific structure: <html> <head> <base href="/" /> ... </head> <body id="ng-app" ng-app="myAngularAp ...

javascriptangularjsnginx

What could be the reason behind the child component updating without triggering a re-render in Reactjs?

I am encountering an issue with my main component and child chart component. Even though the main component updates the state of the child chart component upon connecting to a websocket, the chart does not redraw as expected. Interestingly, when I click on ...

javascriptreactjschart.jsreact-chartjs

The issue of ExpressionChangedAfterItHasBeenCheckedError is a common problem faced by Angular

I have implemented a component loading and an interceptor to handle all requests in my application. The loading component is displayed on the screen until the request is completed. However, I am encountering an error whenever the component inside my router ...

javascripthtmlcssangular

Activate a button by simulating a click event through a shortcut key with the help of a

I have incorporated the hotkeys plugin to enable shortcut functionality on my website. Currently, I am looking for a way to automatically trigger a button click when any shortcuts are pressed. hotkeys.add({ combo: 'alt+1', callback: function (da ...

javascriptjqueryangularjshotkeys

Discover various ways to encapsulate Vue.js components

I am currently in the process of developing a website that utilizes classic multiple pages powered by blade templates. However, I am looking to incorporate vuejs2 components for more dynamic functionalities. Although things are running smoothly, I am faci ...

javascriptlaravelvue.jsvuejs2

Can CSS be used to communicate to JavaScript which media queries are currently in effect?

Is there a way for Javascript to detect when a specific CSS media query is active without repeating the conditions of the media query in Javascript? Perhaps something similar to an HTML data attribute, but for CSS. For example: CSS @media (min-width: 94 ...

javascriptcssmedia-queries

Cloning a file input does not retain the uploaded file in the cloned input. Only the original input retains the uploaded file

Whenever I duplicate an input type file, I encounter an issue where the uploaded file from the duplicated input is also linked to the original input. It seems like the duplicate input is somehow connected to and taking files for the original one. This is ...

javascriptjqueryfileinputinput-type-file

Modifying the attributes/properties within a class of a bootstrap button

Here is the code that I have: <b-button id="search-button" size="md" class="mt-1 w-100" type="submit" @click="someEvent()" >Example </b-button If we imagine calling someEvent() and wanting to modi ...

javascriptcssvue.jsbootstrap-4bootstrap-vue

jQuery and Bootstrap collide

Here is my jQuery code that toggles visibility of different divs based on a click event: $(function () { $(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide(); $("a").bind("click", function () { $(".conor-div, . ...

javascripthtmljquerycssbootstrap-4

What is the functionality behind app.listen() and app.get() in Hapi.js, Restify, and Koa?

Using the http node module, which consists of only native modules, how can I create a custom version of app.listen() and app.get() by utilizing the http module with a constructor? var app = function(opts) { this.token= opts.token } app.prototype ...

javascriptnode.jsexpresshapi.js

Determine whether there are a minimum of two elements in the array that are larger than zero - JavaScript/Typescript

Looking for an efficient way to determine if there are at least two values greater than 0 in an array and return true? Otherwise, return false. Here's a hypothetical but incorrect attempt using the example: const x = [9, 1, 0]; const y = [0, 0, 0]; c ...

javascripttypescript