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

MongoDB has encountered an error while attempting to combine two disparate conditions

I need to run a MongoDB query using JavaScript. Specifically, I am looking to retrieve documents based on two different criteria. The first condition is as follows: $or: [ { "users.username": user.username }, { buyer: ...

javascriptmongodb

Utilize Vue.js 3 and InertiaJs to Retrieve Session Information in Laravel 9

I am currently working on my initial Laravel project, incorporating Vuejs for the frontend. One of the key features of my application is allowing a Super admin to log in as a User (impersonate). By clicking on the Impersonate Button, the word impersonate g ...

javascriptlaravelvue.jsinertiajs

How to modify the overlay color in the TouchableHighlight component using an arrow function in React Native

With touchableHighlight, I found that I could easily modify the overlay color using the following code: <TouchableHighlight onPress={this.toggle.bind(this)} underlayColor="#f1f1f1"> However, when attemptin ...

javascriptiosreact-native

what can prevent a React component from re-rendering?

Being a novice in the realm of React, I find myself with a perplexing query. Within my application, I have two distinct components - the parent component named Goals and its child, EditGoal. The Goals component functions to display all goals, while the Edi ...

javascriptreactjs

Determine the value of an object by iterating through its keys

UPDATE: (for clarification) I currently have a table named modelCoa +----+----------+-------+--------------------+ | id | id_parent| code | name | +----+----------+-------+--------------------+ | 1 | 0 | 1 | asset ...

javascriptvue.js

jQuery: Repeated Triggering of Button Click Event

At my website, I am facing an issue with multiple buttons being loaded twice via ajax from the same file. The problem arises when the event associated with a button fires twice if that same button is loaded twice. However, it functions correctly if only o ...

phpjavascriptjqueryajax

The matter concerning the intricacies of Rails, JQuery, Prototype, and RJS

I am exploring the integration of Jquery and ajax in rails 3.0.7, but I'm unclear on the current landscape regarding their usage together. There seems to be an abundance of hacks, plugins, and scripts available for utilizing JQuery. So: Is there an ...

javascriptjqueryruby-on-railsajaxprototypejs

Node React authentication

Struggling with implementing authentication in React Router. I am using componentDidMount to check if the user is logged in by calling an endpoint. If not, it should redirect to login, otherwise proceed to the desired component. However, this setup doesn&a ...

javascriptnode.jsreactjsexpressreact-router

Exploring the potential of Oracle Openscript in combination with Javascript using AngularJS,

I have encountered an issue while using Openscript on a form page with a clickable "save" button implemented as a div. Manually clicking the button triggers a javascript event that saves any changes made on the page. However, when I run the script, the but ...

javascriptjqueryangularjsoracleopenscript

Refreshing a component in React when a prop changes

My understanding is that React components update when their props or state change. For example, I declare a variable like this: let percentage = { width: '10%', }; Then, I have a function using setInterval to upd ...

javascriptreactjsreact-router

The component next/image is experiencing issues when used in conjunction with CSS

I struggled to create a border around an image because the custom CSS I wrote was being overridden by the Image component's CSS. Despite trying to leverage Tailwind and Bootstrap to solve the problem, my efforts were unsuccessful. Now, I am at a loss ...

javascriptcssnext.jsnextjs-image

Exploring the functions of the elasticsearch javascript library: Understanding the search_type feature

Currently, I am attempting to run a search query using search_type of count with the elasticsearch.angular.js version sourced from the npm module. The query can be successfully executed as follows: POST /index1/type1/_search?search_type=count { " ...

javascriptangularjselasticsearchnpm

Guide on configuring Angular validation to trigger on blur events and form submission

Validation in Angular is currently set to update on model change, but this method can be unfriendly for user interface as it displays errors upon keyup. An optimal solution would involve displaying error messages on blur and also on form submission. After ...

javascriptangularjsformsvalidation

What could be causing my XPath locator to not function properly?

While trying to locate this element driver.get("https://ivtripadmindev.azurewebsites.net/login"); driver.findElement(By.xpath("//*[@id=\"root\"]/div[2]/div/div/div/div[2]/form/div[1]/input")).sendKeys("5"); Encountering the following Exception e ...

javaselenium-webdriverautomation

The API is returning a successful response code of 200 when the HEAD and OPTIONS methods are utilized

My API is up and running smoothly with a GET method in express. This is the code for my API: app.get('/healthcheck', (_req, res) => { res.status(200).send({ state: 'Healthy', timestamp: new Date(), uptime: process.upti ...

javascriptnode.jsexpressresthttp-method

Troubleshooting the malfunction of the TestStack.Seleno TickCheckbox issue

When testing with TestStack.Seleno, I encountered an issue involving two forms that each have a mandatory checkbox. The first form contains 5 fields, and I was able to successfully create a passing test with valid data by setting the checkbox like this: ...

asp.net-mvc-4c#-4.0selenium-webdriverseleno

Struggling to Enforce Restricted Imports in TypeScript Project Even After Setting baseUrl and resolve Configuration

I am facing challenges enforcing restricted imports in my TypeScript project using ESLint. The configuration seems to be causing issues for me. I have configured the baseUrl in my tsconfig.json file as "src" and attempted to use modules in my ESLint setup ...

javascriptreactjstypescriptwebpackeslint

A step-by-step guide to adding an object to an already existing array in Vue.js

Within the code snippet below, I am dealing with an object value and trying to figure out how to push it to an existing array. methods: { onChange(event) { this.newItems.push(event.target.value); console.log(event.target.value); } } Here is m ...

javascriptarraysvue.js

What is the appropriate overload to be selected when utilizing a ref in the method call?

Encountering an unfamiliar TS error while working with the code snippet below: <script lang="ts"> import {defineComponent, computed, toRef} from 'vue' import _ from 'lodash' import {DateTime} from 'luxon' int ...

javascripttypescriptvue.jsoverloadingvuejs3

What is the process for utilizing multiple datacontexts in XAML?

I am facing an issue with multiple viewmodels. I have used three datatemplates for three listboxes that are bound with 3 comboboxes and their selected items. However, only one datacontext seems to work correctly. For example, if I have code like this: pu ...

c#.netwpfxamlmvvm