Protractor is unable to locate the button associated with $ctrl in ng-click

I'm having trouble locating buttons that contain the $ctrl part using Protractor. Here's an example of a button:

<button class="btn btn-primary ng-scope" ng-click="$ctrl.openProfileModal()" ng-if="$ctrl.admin &amp;&amp; $ctrl.networkInfo.scenario !== 'simple_mesh'" 
ng-disabled="$ctrl.stats['5G'].full &amp;&amp; $ctrl.stats['2G'].full"><i class=""></i>Add virtual AP</button>

My first thought was to search by ng-click:

addVAPButton = element(by.css('[ng-click="$ctrl.openProfileModal()"]'))

Unfortunately, this method did not work. I have tried various combinations of commas, searching by class, ng-if, xpath, adding id, name, and other attributes to the button, but nothing helped Selenium locate it. I can find other elements on the page without $ctrl using ng-click, name, id, model, so it seems that there may be compatibility issues between $ctrl and Protractor. Are there any solutions or workarounds to target this button?

Protractor version: 5.3.0 Angular version: 1.5.11

cssangularjsseleniumxpathprotractor

Answer №1

If you are searching for the button labeled Add virtual AP, you can utilize this line of code:

addVAPButton = element(by.css("button.btn.btn-primary.ng-scope > i"))

Keep in mind: Since the button is an Angular Element, it is crucial to wait until the button becomes clickable

Modification

You also have the option to try any of these alternatives:

addVAPButton = element(by.css("button.btn.btn-primary.ng-scope"))

Or

addVAPButton = element(by.xpath("//button[@class='btn btn-primary ng-scope' and contains(.,'Add virtual AP')]"))

Answer №2

Here's a versatile solution that can be applied to various types of selectors (css, ng-click, id, name, xpath, etc):

profileModalButton = $("[ng-click=\"$ctrl.openProfileModal()\"]");
browser.wait(protractor.ExpectedConditions.elementToBeClickable(profileModalButton), 10000).then(function(){
profileModalButton.click();})

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 presence of floats in CSS influence the surrounding div elements

Currently experimenting with HTML/CSS utilizing Bootstrap v5.0 and encountering issues with the unusual interactions between floats and divs. Specifically, aiming to achieve the following: https://i.sstatic.net/4lpC2.png Successfully achieved the desired ...

htmlcssbootstrap-5

Concealing a form in AngularJS based on a specific value selected in a dropdown menu

I need assistance with implementing a specific functionality. If the option value is equal to 1, I want to hide the form below. <select ng-model="selection"> <option value="1">1</option> <option value="2">2</option> ...

javascriptangularjs

cannot find element: element not found (even with implicit wait)

After encountering the same error multiple times, I decided to try implementing an implicit wait to allow for the button to load. It appears that the issue is not related to an iframe and interestingly enough, when I run the code through the interactive ...

pythonseleniumselenium-webdriverselenium-chromedriver

Is there a way to get rid of those pesky red lines that appear when declaring variables in a .scss file in VS

Encountering red lines when defining variables in a .scss file using VS Code. The error message reads as follows: I have attempted various settings configurations in VS Code, but none seem to resolve the issue. Any suggestions for fixing this problem? ...

htmlcssvisual-studio-codesassscss-lint

Alternating Text Color jQuery Sequencing

I'm having trouble deciding on the most effective approach to achieve this task. My goal is to animate the color change of a div's text in a specific sequence (e.g., #000, #eee, #fff...) every 1.5 seconds. From my research, I gather that I will ...

javascriptjquerycss

Press on the menu <li> item to create additional submenus

A group of friends is facing a challenge. They want to create a dropdown sub-menu that appears directly below the selected item when clicking on a link from a menu. So far, they have been able to use ajax to send requests and generate a sub-menu. However, ...

javascriptjqueryhtmlcssmenu

What is the best way to incorporate a set of buttons and dynamically update them by using next and previous buttons?

Currently, I have code for two sets of buttons. How can we add functionality for next and previous buttons? <div id="chart-section-wrapper" class="container"> <div id="chart-section"> <div class=& ...

javascriptcssbootstrap-4

Challenges with layout and adaptability

Hello, I am looking for some assistance in making my HTML responsive and with positioning the items on my screen. Below is a picture of how I envision it to look: Desired Look: https://i.sstatic.net/84m3H.png I have been experiencing issues with display ...

htmlcsspositionresponsivedisplay

When an element within a dropdown is hovered over, a dropdown menu is triggered

As a newcomer to Web Development, I am facing a fundamental issue with my bootstrap navigation bar. The navigation bar contains multiple dropdown buttons that activate on hover. One of the buttons within a dropdown needs another dropdown to appear when hov ...

htmlcss

The Importance of Selenium Events and Patience

Currently, I am using Selenium to automate some testing for our company's website, but encountering issues along the way. TestItemFromSearch: (driver, part, qty) => { Search.SearchItem(driver, part); driver.findElement(By.id('enterQty ...

javascriptselenium

What's the best way to update the value of an angular field upon submission?

Could someone please provide instructions on how to update the myName variable when the "submit" button is pressed? Thank you! app.js: app.controller('SomeController', ['$scope', 'emails', function($scope, emails) { emails ...

javascripthtmlangularjsangularjs-scope

What is the best way to remove items from a list after finishing each iteration?

I am having an issue with my image list as it keeps adding previous image URLs to every new product. I need to clear the list after writing to my CSV file and completing each loop. Here is the code I am currently using: image_list = [] for page_num in r ...

pythonpython-3.xpython-2.7selenium

The CSS root variable is failing to have an impact on the HTML element's value

I'm in the process of changing the text color on home.html. I've defined the color property in a :root variable, but for some reason, it's not appearing correctly on the HTML page. Take a look at my code: home.scss :root { --prim-headclr : ...

htmlcsstypescriptsass

Uploading Images Across Domains with Angular and Laravel

I have been facing challenges with uploading images to the server. I am utilizing ngFileUpload on the front end. However, I consistently encounter the following error message: "Response to preflight request doesn't pass access control check: No &apos ...

angularjslaravel-5corsng-file-upload

Attempting to make an API call within an ng-repeat loop is causing an error to arise in AngularJS, specifically reaching the limit of 10 $digest

I am encountering an issue with my scope function in the controller, where it calls an API to retrieve data from the database. The problem arises when I use this scope function within ng-repeat and run the application as it ends up getting stuck. Here is ...

javascriptangularjs

Adjusting the dimensions of an HTML image element in Angular dynamically

Recently, I've been exploring the idea of incorporating a jQuery BeforeAndAfter plugin into my angularJS app. However, I've encountered an issue with dynamically setting the width and height of images with different dimensions. Here's what I ...

jqueryhtmlangularjsdynamicattributes

The click() function is not properly functioning for the input tag in selenium automation when using nodejs

I am attempting to click on this specific element, but despite no errors, the click action is not being executed. <input class="btn-add-cart button js-form-submit form-submit" data-drupal-selector="edit-add" type="submit" i ...

node.jsseleniumselenium-webdriverselenium-chromedriverwebautomation

showing processed string in angularjs view

As a newcomer to AngularJS, I am struggling with how to format the title I receive from a web API as "color_flower" to display as "Color Flower" in my view. Despite attempting Angular filters, I have had no success. Can anyone provide guidance on how to ...

angularjs

Instructions on recovering the entered text from a text field (Password) after submission

Step 1: Input the password into the designated text field Step 2: Retrieve and display the inputted password from the text field This pertains to Selenium automation using Java ***WebElement Password = driver.findElement(By.id("usrPwd")); Password.sendKe ...

javaselenium

Executing functions in TypeScript

I am facing an issue while trying to call a function through the click event in my template. The error message I receive is "get is not a function". Can someone help me identify where the problem lies? This is my template: <button class="btn btn-prima ...

htmlangularjstypescriptangulartypescript1.8