Error encountered: "OpenQA.Selenium.WebDriverException: 'unknown error: arguments[0].click is not a function" when attempting to click on an SVG element with ChromeDriver in Selenium

I am working on automating the manipulation of an image element "svg" that contains 12 selectable parts (each with a "path" tag).

In my electron-angular application, I have been using js actions with Selenium to interact with buttons and other UI components. However, the Selenium Click function or Actions class is not effective for me in this particular application.

When attempting to click on one of the "svg" elements:

 IWebElement patientIllustration = electron.driver.FindElement(By.Id("patientIllustration"));
 IWebElement shadow = (IWebElement)jse.ExecuteScript("return arguments[0].shadowRoot", patientIllustration);
 IWebElement body = shadow.FindElement(By.Id("adult_vascular"));
 IReadOnlyCollection<IWebElement> parts = body.FindElements(By.TagName("path"));
 IWebElement bodyPart = parts.ElementAt(0); 

 jse.ExecuteScript("arguments[0].scrollIntoView(true);", bodyPart);
 jse.ExecuteScript("arguments[0].click();", bodyPart);

This results in the following error message:

OpenQA.Selenium.WebDriverException: 'unknown error: arguments[0].click is not a function (Session info: content shell=) (Driver info: chromedriver=2.36 (7361dbe5ac927be4276ec7da1d3548c4f22343a0),platform=Windows NT 10.0.14393 x86_64)'

I have also attempted to click on the bodyPart element using the Click() method and with the Actions class, but it had no effect. These methods did not work for any element within my application.

Does anyone have any alternative suggestions or ideas to try?

javascriptseleniumsvgelectronselenium-chromedriver

Answer №1

Forget about using this 

jse.ExecuteScript("arguments[0].scrollIntoView()", bodyPart);

and give this a shot.

jse.ExecuteScript("arguments[0].scrollIntoView(true);", bodyPart);

Answer №2

Encountering this error message...

OpenQA.Selenium.WebDriverException: 'unknown error: arguments[0].click is not functioning as expected 
 (Session info: content shell=) 
 (Driver info: chromedriver=2.36 
 (7361dbe5ac927be4276ec7da1d3548c4f22343a0),platform=Windows NT 10.0.14393 x86_64)

...indicates a communication issue between ChromeDriver and the WebBrowser, specifically the Chrome Browser session.

The root cause lies in the compatibility mismatch between the software versions being used:

  • You are utilizing chromedriver=2.36
  • The Release Notes of chromedriver=2.36 clearly state:

Supports Chrome v63-65

  • It's possible that you have the latest Chrome Browser version, namely chrome= 73.0
  • The Release Notes of ChromeDriver v73.0.3683.68 mention:

Supports Chrome version 73

Hence, there exists a distinct mismatch between ChromeDriver v2.36 and Chrome Browser v73.0

Resolution

  • Upgrade to the current ChromeDriver version ChromeDriver 73.0.3683.68.
  • Update your Chrome to a version within the range of Chrome v73 levels (as per ChromeDriver 73.0.3683.68 release notes)
  • If your base Web Client version is outdated, consider uninstalling and reinstalling a more recent, officially released version of Web Client.
  • Proceed with executing your @Test.

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

Once a profile is added to the contact list, it fails to appear immediately. To see the new addition, the page must be manually refreshed, resulting in duplicate contact data being

Currently, there are three crucial files in play within this project. The primary one is index.js, responsible for running the server, while the other two are EJS files that need to be rendered. Despite numerous attempts to render and redirect these files, ...

javascriptnode.jsmongodbexpress

Attempting to add an element using jQuery

After a user selects an option from my dropdown list, I want to create a new element. However, the result I'm getting is not what I expected. The current outcome looks like this: As you can see, the link 'remove' gets incremented every time ...

javascriptjqueryhtml

Interceptors in axios do not trigger when making requests through a PHP proxy

I am currently working on a React app that will be interacting with services hosted on a remote server. During development on my local machine using the react-scripts server at localhost:3000, I disable CORS in the browser and have no issues with axios f ...

javascriptphpreactjsproxyaxios

Display a modal as the first screen appears in a React Native application

Trying to implement a non-animating modal before the main screen loads on my react-native app. The goal is to display a login screen in a modal view if no user is logged in. Encountering an issue where the main screen briefly appears before the modal, ins ...

javascriptreactjsreact-native

Using selenium to create a brief pop-up message that appears for a few seconds

I have a Selenium script in Java that opens a Google web page and then closes the browser. Upon closing the browser, I want a pop-up message to appear briefly with the text "Code executed" before fading away after a few seconds. I know that I can achieve t ...

javajavascriptjqueryselenium

What is the best way to enhance the appearance of labels on my Google Maps using the Google Maps API?

I've created a map that pulls data points from a json file. I've successfully displayed an image as a marker and added a label, but I'm struggling with styling the label. How can I add style to the label without affecting the map or coordina ...

javascriptphpjsongoogle-maps

WebRat and Selenium WebDriver team up to ensure that AJAX operations are fully completed before proceeding

Currently in our application, we are utilizing Webrat with Selenium2.0, also known as WebDriver. One of the standout features of WebDriver is its ability to handle page reloading seamlessly without advancing to the next steps if the browser is still loadi ...

ajaxseleniumwebratwebdriver

Exploring: Accessing the Tags Attribute

For a project, I am integrating wicket and jQuery together. In my HTML, I have: <a wicket:id="link" testAttr="test"></a> With jQuery, I am updating this attribute when other components on the page are clicked. My question is: how can I retri ...

javajavascriptjqueryhtmlwicket

Clearing Cookies and Cache in the Google Chrome Browser

Can you verify if I am able to utilize the functionality below for deleting cookies in Chrome: driver.manage().deleteAllCookies() Additionally, could you please provide the instructions for clearing the cache in both Chrome and IE? And how can one confir ...

javaseleniumselenium-webdriver

Toggle on and off using a checkbox feature in conjunction with the straightforward form gem

Seeking assistance in toggling an action using a checkbox on a post form. Not well-versed in javascript or JQuery. Struggling with this task while working alone. If anyone can provide guidance, it would be greatly appreciated! Using Rails 4.2.8 an ...

javascriptjqueryruby-on-rails-4twitter-bootstrap-3simple-form

Don't allow users to switch views without saving their changes

We are working with a Backbone.js application that presents various forms to users. Our goal is simple: if a user navigates away from the page without saving the completed form, we need to show a confirmation dialog. When dealing with traditional forms, i ...

javascriptbackbone.js

Is there a way to dynamically update a game's highscore from a database without having to refresh the page?

I developed a JS snake game using HTML5 canvas. In the event that the user loses, the score is transmitted to the database through an AJAX call in my PHP script. The PHP code then compares this score to the current highscore and updates it if needed. Howev ...

javascriptphpjqueryajaxhtml

Transmit the JavaScript array via AJAX to PHP server

Is it possible to transfer a JS array created using the .push function to another PHP file? I have included the code snippets for the two files involved, game.js and gallery.php. In Game.js: imgarray.push({"img_name": img_name,"x": x_value,"y": y_value,"w ...

javascriptphpajax

Guide on updating a specific item in a JSON array using npm request

I am currently working on setting a value in a JSON array utilizing a PUT request with the request module, specifically targeting one of multiple main objects within the array. The structure is as follows: [ 0: { status: 'pending' ...

javascriptjsonnode.jsnpm

Creating a visually dynamic stack of images using javascript, jquery, and HTML

I'm interested in creating a unique image viewer using javascript/jQuery/HTML that combines elements of a book page flip and iTunes coverflow, optimized for mobile device browsers. I've been searching for tutorials to help kickstart this project, ...

javascriptjqueryhtmlimagejquery-animate

Guide on verifying the clickability of a button with selenium webdriver

I am currently working on determining whether or not the button element is clickable, however I am facing difficulties in successfully validating this using Selenium WebDriver. Below is the code snippet I am using to validate if the element is clickable: ...

javaseleniumselenium-webdriverpageobjects

Image not displaying correctly with Neatshow JS Plugin

I've added neatshow.min.js to my project and I'm following all the instructions in the script. The first step is to hide images with CSS, then show them using the script. Here are my instructions: $(window).ready(function(){ $('img&ap ...

javascriptjqueryimage

Determine the frequency of a word in Java programming language

Ticket Type Priority Assigned Incident 3 - Medium Acknowledgement Service Request 3 - Medium Assigned Problem 2 - High Assigned Incident 3 - Medium Assigned Service Request 3 - Medium Closed Incident 3 - Medium Assigned Service ...

javacsvselenium

Tips for retrieving a specific color from the color palette while using Selenium WebDriver in C#

Having trouble selecting a color from a palette while using Selenium for the first time. When attempting to locate the web element through XPath, an "Element not found" exception is thrown. Any assistance would be greatly appreciated :) https://i.sstatic. ...

selenium

use angular to dynamically add attributes to html components

When I need to insert attributes into a component that I plan to reuse, I receive different attributes as strings. For example, if I want to add an element in my component: <input type="text" maxlength="10" placeholder="enter your name"/> I will re ...

javascriptangular