Using Selenium to trigger a click event on an ng-click directive in AngularJS is not functioning properly

I am currently trying to confirm that a specific external function is being called when an ng-click event occurs. The code for the input declaration is shown below. While everything seems to be functioning properly in browsers, I am encountering issues during testing with Selenium as the expected result is not showing up. The myFunction is supposed to call an external myExternalFunction, which is what I need to verify. We already have jasmine tests set up with spies to validate this behavior in a different environment, but we still require Selenium for our testing. Additionally, we are not using protractor at the moment. I am seeking a solution specifically using Selenium.

<input class="myClass" ng-click="myFunction()">

For the C# Selenium tests, here is the code I have written:

// Creating a mock external function since it is not available in the context.
IJavaScriptExecutor executor = WebDriver as IJavaScriptExecutor;
executor.ExecuteScript("window.called='false'");
executor.ExecuteScript("window.external = {}");

// The behavior of the function will simply set the 'called' variable to true.
// We will retrieve this variable afterwards to check if the function was called.
executor.ExecuteScript("window.external.myExternalFunction = function() {window.called = 'true';}");

// Selecting the element - there is only one element with this classname
IWebElement element = WebDriver.FindElement(By.ClassName("myClass"));
string value = "";  
// I have verified through debugging that the element is indeed valid.
// I have tried the following options.

// 1) Simply click and wait for event propagation - did not work.
element.Click(); // Did not perform any action so added a Thread Sleep for verification.
Thread.Sleep(1000);
value = WebDriver.ExecuteJavaScript<string>("return window.called;"); // returns false - expecting true.

// 2) Using actions to focus and then click on the element.
IWebDriver driver = WebDriver;
Actions a = new Actions(driver);    
a.MoveToElement(element).Perform();
a.MoveToElement(element).Click().Perform();
Thread.Sleep(1000);
value = WebDriver.ExecuteJavaScript<string>("return window.called;"); // returns false - expecting true.

// 3) Selecting and clicking via javascript instead.
executor.ExecuteScript("angular.element('.myClass').click();");
Thread.Sleep(1000);
value = WebDriver.ExecuteJavaScript<string>("return window.called;"); // returns false - expecting true.

At this point, I have exhausted all my ideas. Is there no way to get Selenium to work seamlessly with angularjs? A similar question can be found here: Selenium click event does not trigger angularjs ng-click without a definitive answer.

Answer №1

My recommendation would be to utilize xpath for finding the element, which should work well in this situation. Feel free to provide the xpath if you can.

Answer №2

If you're looking to utilize a css selector, this code should do the trick:

By.cssSelector("input[ng-click='myFunction()']") 

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

Leverage Pinia store in Vue helper functions

I have been working on my Vue.js application and I am looking to implement some helper functions that will utilize a Pinia store within the app. These functions need to be accessible by multiple components. Should I define these helper functions directly ...

What is the proper way to place a newly added element using absolute positioning?

Currently, I am in the process of developing a tooltip feature. This function involves adding a div with tooltip text inside it to the element that is clicked. However, I am facing a challenge in positioning this element above the clicked element every tim ...

Using Jquery to create an array containing all the items in the pager

192.168.1.1/home?page=1, 192.168.1.1/home?page=2, 192.168.1.1/home?page=3. Is there a way to create an array of only the new items on the pager? I am interested in storing only the elements with the class item-new into the array. To clarify further: I n ...

Values do not appear as expected post PDF conversion using wkhtmltopdf

Currently, I am updating certain values within my HTML page by following this process: The function: function modifyContent(){ var newTitle = document.getElementById('myTextField1').value; if( newTitle.length==0 ){ alert('Plea ...

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

How to link a CSS file from a JavaScript file

I have a form for users with fields for first name, last name, password, and confirm password. I've implemented validation to check if the password and confirm password fields match using JavaScript: $(document).ready(function() { $("#addUser").cl ...

Error message: "Issue encountered with locating Node import module while operating within a docker

I've created a React app along with a Node.js server that includes the following imports: import express from 'express' import compression from 'compression' import cookieParser from 'cookie-parser' import bodyParser from ...

How can an object inside an array be destructured in just one line?

Consider the following array: const array = [{b:2}] Can you extract the value of b using destructuring in just one line? I attempted something similar to this approach, but it did not yield the desired result: const [{b} = array] ...

No element found with the specified exportAs value of "ngForm" on the <form> tag

I am currently experimenting with a template driven form in Angular, but I encountered an error stating **There is no directive with “exportAs” set to “ngForm"** I have made sure to import FormsModule and ReactiveFormsModule in app.module.ts as well ...

Balancing website speed with capturing product impression

I've been tasked with capturing impressions of all the products visible in the viewport on a website that features thousands of products. To achieve this, I implemented a directory and utilized the IntersectionObserver, which was referenced within the ...

What is the best method for saving a cookie in splinter using a pre-existing splinter instance?

After logging into a website using splinter, I capture the cookies and save them as a pickled object for future use. def save_cookie(username, password): browser = Browser() browser.visit("https://somesite.com") browser.fill('username&ap ...

Guide on how to display registration form data on the current page as well as on a separate page

I am facing an issue with outputting registration form data to two different pages after successful validation. Specifically, I want the form data to be displayed on both the current page (form.php) and another page (profile.php). Despite my efforts to fin ...

The Twitch API is providing inaccurate channel information

Currently facing an issue while working with the Twitch API. When making a GET request to /api.twitch.tv/helix/search/channels?query=[STREAMER_NAME], it seems to be returning the wrong streamer/user. For instance: /api.twitch.tv/helix/search/channels?quer ...

Incorporate a jQuery userscript on Firefox that includes a link to a form

Attempting to incorporate a search link into an online form using a userscript with jQuery, specifically for Firefox. I typically work in Chrome, so I'm encountering some challenges with compatibility in Firefox. However, I need this to be functional ...

Tips for obtaining a JSON response from a RESTful API in AngularJS by utilizing the $resource service

I have been working on my AngularJS code, and although I am receiving a response in the console, I am having trouble storing it in an array or JSON format. angular.module('user', ['ngResource']). config(function($httpProvider){ $h ...

Issue with Angular UI-Grid: Tooltip not appearing

I'm having trouble implementing a filter on ui-grid cells while also adding a tooltip. The filter works fine, but the tooltip does not display unless I remove the filter. cellFilter: 'number: 2', cellTooltip: 'Custom tooltip - maybe som ...

Tips for retrieving data from Angular Material Table source

It's great to see everyone doing well! I'm facing an issue with rendering data to a material table, and I can't figure out why it's not working. When I try to assign the data to the table's datasource for rendering, the information ...

Is there a glitch preventing the connection between HTML and CSS in Notepad++ even though the link is correct?

I have encountered a puzzling situation that has left me scratching my head in confusion. Despite being a rookie, I've had experience with linking CSS files before and can't understand why it's not working this time around. This issue is per ...

The node sends a request to the API to retrieve data, which is then stored in an array. Subsequently, another request is

var UfcAPI = require('ufc-api'); var ufc = new UfcAPI({ version: '3' }); const fighterIdList = []; function fetchFighterIds() { ufc.fighters(function(err, res) { for (let i = 0; i < res.body.length; i++) { ...

Angular JS is patient when waiting for asynchronous requests to complete

Once upon a time in a factory httpFactory.factory('setFavorability', function($http){ return{ Like: function(id){ return $http.get('http://localhost:51265/Film/Like/' + id); } } ...