Tips for finding a duplicate button on a webpage with Protractor

After searching extensively, I am still struggling to find a way to locate a specific button on a webpage that lacks a unique identifier in the HTML. There are three buttons on the page, and the one I need to identify is the second one. Despite trying various methods and consulting multiple online resources, I have not been successful. Here are some of the approaches I have attempted:

element.all(by.css('[type="button"]')).get(1).click();

element.(by.xpathy('//div [@ng-click="addAdminForm()"]')).click();

$$('[ng-click="addAdminForm()"]').click();

element.all(by.css('.adminportal-submit-button')).get(0).click();

I would greatly appreciate any assistance that can be provided. Thank you in advance.

<div class="layout-align-start-center layout-row flex">

<button class="md-primary adminportal-cancel-button md-button md-ink-ripple" ng-transclude="" type="button" ng-click="gotoHomePage()" ng-disabled="disableButtons" analytics-on="" analytics-category="Clinics" analytics-event="cancel" tabindex="0" aria-disabled="false">
</div>

<div class="layout-align-end-center layout-row">

<button class="md-raised md-primary adminportal-submit-button md-button md-ink-ripple" ng-transclude="" type="button" ng-click="addAdminForm()" ng-disabled="manageClinicForm.$invalid || disableButtons" analytics-on="" analytics-category="Clinic-Admins" analytics-event="register" tabindex="0" aria-disabled="false">

<button class="md-raised md-primary adminportal-submit-button md-button md-ink-ripple" ng-transclude="" type="submit" ng-disabled="manageClinicForm.$invalid || disableButtons" aria-disabled="false">
javascriptangularjsprotractorgulp-protractor

Answer №1

Using the xpath locator should do the trick: 

element(by.xpath('//div[@ng-click="addAdminForm()"]'))

If that doesn't work, you can try implementing waits: 

var button = element(by.xpath('//div[@ng-click="addAdminForm()"]'));
 browser.wait(EC.presenceOf(element(by.xpath('//div[@ng-click="addAdminForm()"]'))), 30000).then(function () {
        browser.wait(EC.visibilityOf(element(by.xpath('//div[@ng-click="addAdminForm()"]'))), 30000).then(function () {
            browser.wait(EC.elementToBeClickable(element(by.xpath('//div[@ng-click="addAdminForm()'])), 30000).then(function () {
                button.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

Missing index in the GET variable

I have a div with the class .excelDL. When this div is clicked, a form is submitted using AJAX without refreshing the page, and it works perfectly fine. However, the issue I am facing is that I need to check if $_GET['excel'] has been set to one ...

javascriptjqueryajax

React: Managing various browsers and browser tabs to prevent duplicate operations

On my webpage, I have a button labeled Submit that, when clicked, triggers an operation by calling an API. After the button is clicked, it should be disabled or changed to reflect that the operation has started. I am facing an issue where multiple browser ...

javascriptreactjsbrowser

Set the position of a div element to be fixed

I am currently working on a straightforward application that requires implementing a parallax effect. Here are the methods I have experimented with so far: - Inserting an image within a div with the class parallax. - Subsequently, adding an overlay div ...

javascripthtmlcsssassparallax

Traverse the data() object in jQuery to retrieve both keys and values simultaneously

I have a data() object with some JSON content. Is there a way to iterate through the object and extract each key and value pair? Here's my current code snippet: function getFigures() { var propertyValue = getUrlVars()["propertyValue"]; $.getJSON( ...

javascriptjqueryjsoneach

Is it possible to create a route in AngularJS that displays multiple views at once?

Imagine a scenario in which we have a specific route, let's call it myapp\profile, with two different modes (buyer/seller). Here is what I am aiming to accomplish: Maintain the same route URL for both modes. Switch between views using different ...

angularjsangular-ui-router

What steps can I take to allow a third-party JavaScript to access my TypeScript object?

I am working on an Angular application and I have a requirement to develop an API for a third-party JavaScript that will be injected dynamically. public class MyApi{ public callSomeFunction():void{...} public getSomeValue():any {...} } var publicA ...

javascriptangulartypescriptapi-design

Triggering event within the componentDidUpdate lifecycle method

Here is the code snippet that I am working with: handleValidate = (value: string, e: React.ChangeEvent<HTMLTextAreaElement>) => { const { onValueChange } = this.props; const errorMessage = this.validateJsonSchema(value); if (errorMessage == null ...

javascriptreactjstypescriptevents

Sending Data Back to Main Function Using a Callback

When I try to call the emailExists() function, it should ideally return true or false. However, instead of that expected behavior, I am encountering this error: TypeError: cb is not a function Since asynchronous operations and callbacks are relatively ne ...

javascriptnode.jsfunctionasynchronous

Is there a way to selectively display only the first 100 lines using console.log()?

Is there a console.log equivalent of .head() in JavaScript? I need to display only the first 100 lines of a response on my terminal without the top part being cut off due to the entire object being printed. Any suggestions on how to achieve this? ...

javascriptnode.js

"Standard" approach for a Date instance

During my time in the Node REPL environment, the following output was displayed: > console.log(new Date()) 2023-08-15T09:21:45.762Z undefined > console.log(new Date().toString()) Sun Aug 15 2023 09:21:50 GMT+0000 (Coordinated Universal Time) undefine ...

javascriptnode.js

Utilizing jQuery Ajax to submit multiple forms using a single selector in one go

I'm having an issue with jQuery Ajax involving multiple forms. Each time I execute it, only the top form works properly while the others do not function as expected. Can anyone provide assistance with this? Here is the source code: <form id="form_ ...

javascriptphpjqueryajax

In Typescript, define a class with a property that will serve as the name of another type's property

Trying to define a class property for another type: class TypeOne { public static readonly code: string = 'code'; } class TypeTwo { public [TypeOne.code]: TypeOne } Encountering an error message: The computed property name in the class pr ...

javascripttypescript

Scroll Behavior Issue in Bootstrap 4.4.1 Accordion Component on Google Chrome - Possible Bug?

I've been using Bootstrap accordions for quite some time, but a new issue has recently cropped up. If you play around with the code below (preferably in full screen mode), scroll down until the accordion is visible, then open the middle card by toggl ...

javascripthtmljquerycssbootstrap-4

Express server failing to deliver static assets

I am currently developing an app using Express and socket.io, but I am facing an issue where my server is unable to locate the static files. Despite searching for solutions online and trying various methods such as referencing the public folder with expres ...

javascriptnode.jssocketsexpress

Yet another interactive JQuery feature found within the JQuery UI Tabs framework, utilizing seamless Ajax page loading

Currently, I am using JQuery U Tabs with Ajax Page Calls. In my Pages, I have a custom scroller that is functioning correctly. Additionally, I have an ajax search table that works when the page is loaded by itself in the browser but not when called within ...

javascriptjqueryhtmlcss

Exploring how to verify the data type retrieved from PHP using the jQuery post method

Understanding Data Types [{"id":"1","value":"Google"},{"id":"2","value":"Samsung"}] In programming, it's crucial to correctly identify the type of data you are working with. To help with this, I have created a custom function that determines the typ ...

javascriptphparraystype-conversion

Converting JavaScript to JSON and saving dynamic properties

Having a basic knowledge in JavaScript, I am attempting to extract data from users and utilize it as JSON properties in the following format: <th colspan="2"><input id="dc_name" name='dc[name]'></input></th> $ ...

javascriptjqueryjson

retrieve a document from Firebase storage and showcase it on a website

I am currently in the process of developing a web application with AngularJS, utilizing Firebase as both my database and storage solution. While working on my project, I encountered an issue where I'm trying to retrieve a .txt file from my storage an ...

angularjshttpdownloadfirebase-storage

Tips for resolving issues with intermittent 500 errors in AJAX scripts

Currently, I am utilizing an AJAX script to perform some database operations after an order is placed on my website. Below is how I include it in the order confirmation page: <script> // Defining the function function voucherRedeem(str) { if (windo ...

javascriptphpjqueryajax

Updating AngularJS scope values within a PromiseIn an AngularJS application

Having some issues with the following code snippet: init: -> @loadRootQuestion() methods: loadRootQuestion: () -> @$http.get(api_replies_path()).then( (response) => @$.question = response.data.replies[0] ...

angularjscoffeescript