Protractor can now successfully locate and interact with a nested button element

I am trying to click on the second button, but I can't differentiate between the two buttons using class names.

div class="ng-view ff-domain ng-scope">

<div class="hero-unit blur-background ng-scope">
    <h1></h1>
    <h2></h2>
    <a class="btn btn-large btn-warning btn-hero" href="/au/shop/glasses?gender=women"></a>
    <a class="btn btn-large btn-warning btn-hero" href="/au/shop/glasses?gender=men"></a>
    <div class="carousel ng-isolate-scope" carousel="" ng-mouseleave="play()" ng-mouseenter="pause()"></div>
</div>
javascriptangularjsseleniumselenium-webdriverprotractor

Answer №2

Give this a shot:

let secondButton = element.all(by.css(".btn").get(1);
secondButton.click();

Answer №3

To locate the specific links within a div, I recommend identifying them based on their href attribute values. This can be done by checking the end of the href:

var container = element(by.css("div.hero-unit"));

var men = container.element(by.css("a[href$=men]"));
men.click();

The provided code is not only effective but also easy to read and understand.

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 Static Interface Binding in TypeScript

I have inquired about how to extend the static functionality of existing objects in JavaScript (using TypeScript). In all examples provided here, I am utilizing Object The code below showcases a polyfill definition for ECMAScript's Object.is function ...

javascripttypescript

How to customize the appearance of a specific column in Ag-Grid using AngularJs

Is there a way to style a column in ag-grid using AngularJs? I am looking to make it resemble hyperlinks, possibly with different colors for visited and unvisited links. The specific style isn't crucial; I simply want to learn how to style a column. S ...

angularjsag-grid

Troubleshooting issues with the delete functionality in a NodeJS CRUD API

I've been struggling to implement the Delete functionality in my nodejs CRUD API for the past couple of days, but I just can't seem to get it right. As I'm still learning, there might be a small detail that I'm overlooking causing this ...

javascriptjsonnode.jscrudhttp-status-code-400

Guide on utilizing JUnit's @Rule annotation in Scala Specs2 tests

We are utilizing Scala Specs2 in combination with Selenium for our project. I am currently working on incorporating a screenshot-on-failure feature "using the traditional approach (link)" into my tests, using JUnit annotations. However, the rule is not bei ...

scalaseleniumjunitselenium-webdriverspecs2

After being redrawn, the line on the canvas vanishes

After updating the angle value, the line is quickly redrawn correctly but then disappears. It seems like the input value may be getting refreshed and set to undefined again. How can I ensure that the line retains the correct angle? <script language=" ...

javascriptjqueryhtmlcanvasline

Commencing a New Ember.js Venture

I've recently started using Ember.js and I'm used to simply typing rails project33 to create a new Rails project. But with Ember, it seems like there are multiple steps involved: mkdir project43 && cd project43 npm install -g genera ...

javascriptember.jsnpmyeoman

Modifying information in a single array in Vue JS has a ripple effect on

I'm really struggling to understand what the ... want with this Vue component! Can someone please help me out? Here is my code: var groupadding = new Vue({ el: '#groupAdd', data:{ currentFullData: [], localData: [] }, method ...

javascriptvue.js

The $scope update within a function and using $apply does not seem to be functioning properly

One issue I am facing is updating the input value. I have a variable $scope.date_from which is shown in an input[type="date"]. My goal is to change the value by clicking a button. Below is my code snippet: $scope.update_date = function (date_from, date_to ...

angularjsscope

Leveraging the browser's console for transmitting AJAX data

I've created a PHP quiz page that uses AJAX to post answer data when a user clicks on an answer. If the answer is correct, the page then loads the next question using another AJAX function. Here's a snippet of the code: <ul class="choices"> ...

javascriptphpjqueryajax

Updating Angular 1 TypeScript 1.8 Application with Webpack 2 may lead to issues with displaying views

I previously had success working on a project using Angular 1, TypeScript 1.8, and Material Design with Webpack 1 handling the build process. However, after attempting to upgrade to Webpack 2.2.1 and TypeScript 2.2.1, I encountered issues with my app&apos ...

angularjstypescriptwebpack

Including a screenshot within extent report 4 for unsuccessful scenarios

Currently, I am utilizing Extent Report 4 and facing an issue with adding a screenshot when a test fails. The code snippet below aims to address this concern, but the screenshot ends up attached at the end of my report rather than the specific step where t ...

seleniumselenium-webdriverextentreportsselenium-extent-report

How can we prevent users from changing URLs or accessing pages directly in Angular 7 without using authguard?

Hey there! I am trying to find a way to prevent users from accessing different pages by changing the URL, like in this scenario. Is there a method that can redirect the user back to the same page without using Authguard or any Modules? I have a StackBlit ...

javascriptangulartypescripturlurl-routing

What effect does setting AutoPostBack to "true" in an ASP dropdownlist have on the fireEvent() function?

I am currently working on an aspx page. This page includes three dropdown lists and a button, all of which are populated dynamically based on the code written in the code-behind file (.cs file). To achieve this, I need to utilize two event handler methods ...

javascriptc#asp.net.netdom-events

Transforming data with D3.js into a string representation

Recently, I stumbled upon a function called "stringify" that seems like a fantastic tool for converting flat data into a Json format. If this function lives up to its potential, it could potentially save me countless hours of writing recursive code in ASP ...

javascriptjsond3.jsstringify

What is the process for retrieving data from a javascript file that was submitted through a form?

Can you help me with an issue I'm having with this code snippet? <form action="main.js"> <input type="text" required="required" pattern="[a-zA-Z]+" /> <input type="submit" value="Submit" /> </form> After c ...

javascripthtmlformsinputsubmit

Ways to distinguish between two div elements that have scroll bars and those that do not

I created a div with CSS styling. .comment-list { margin: 20px 0; max-height: 100px; min-height: 100px; overflow-y: scroll; width: 100%; background-color:#000; } Here is the HTML code for the div: <div class="comment-list"> </div> When the ...

javascriptjqueryhtmlcss

Refresh the content with an embedded iframe

I am attempting to update the body content by removing all existing content and inserting an iframe: function create_custom_iframe(target){ var iframe = document.createElement('iframe'); iframe.setAttribute('id', 'target_u ...

javascripthtmldomnode.jsiframe

Exploring Next.js: Leveraging fetch to retrieve data in getServerSideProps and passing it to the client via query parameters

I'm utilizing a getServerSideProps function on the directory page. pages/catalog/index.js export async function getServerSideProps(ctx) { const response = await fetch( `http://someDomen.com/api/ipro/catalog?${ctx?.query?.page ? `page=${ctx.quer ...

javascriptreactjsnext.js

Tips for retrieving the identifier of a row in a mui datagrid when an onClick event occurs

I'm attempting to integrate a material-ui datagrid with a sql database for the purpose of enabling edits to be made via a form rather than editing individual rows and cells one by one. My goal is to pass the row's id as a parameter to a function ...

javascriptreactjsmaterial-uimui-x

Receiving an "Undefined Variable" Error when Assigning Variables for JavaScript Executor in Selenium

I am attempting to establish a simple variable "a" for use with a javascript executor in selenium, however I keep receiving an error stating that the variable is not defined. Since I do not have familiarity with JavaScript, I am unsure of how to properly ...

pythonselenium