What is the method for selecting an element using CSS code in Protractor?

Having trouble clicking on the element with CSS Selector:

<button _ngcontent-c16="" class="btn btn-flat btn-no-text btn-kebab-view">
         <i _ngcontent-c16="" class="zmdi zmdi-more-vert"></i>
</button>

This is what I've tried:

element.all(by.css('.btn .btn-flat .btn-no-text .btn-kebab-view')).first().click();

An error occurs when running Protractor:

Failed: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator By(css selector, .btn .btn-flat .btn-no-text .btn-kebab-view)

javascriptseleniumprotractor

Answer №1

The recommended CSS Selector to use is: 

.btn.btn-flat.btn-no-text.btn-kebab-view
.

Answer №2

Consider employing XPath for selecting elements:

To locate the button element, you can use the following path: 

//button[@class='btn btn-flat btn-no-text btn-kebab-view']

Alternatively, to target the i tag, utilize this XPath expression: 

//i[@class='zmdi zmdi-more-vert']

Answer №3

To locate the element, you can use either a class name locator or XPath:

Using class name locator:
by.className('btn btn-flat btn-no-text btn-kebab-view')

Using XPath:
//*[@class='btn btn-flat btn-no-text btn-kebab-view']

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

Guide to substituting the index value with the user's specific choice

Let's simplify this. Suppose I have a list in my ng-repeat 1. A & index[0]<br> 2. B & index[1]<br> 3. C & index[2]<br> 4. D & index[3]<br><br> and there is an input field where the user can priorit ...

javascriptangularjs

Encountering a problem with lazy loading of module routing paths. Issue arises when attempting to navigate to http://localhost:4200

AppLazyLoadingMoudle import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; const ROUTES : Routes = [ /* ProductModule (defined in the feature module) is loaded lazily when navigating ...

javascriptangulartypescriptangular-router

What steps can I take to make my animation work in the opposite direction as well?

I'm currently working with an angular slider that is set to TRUE/OPEN by default. The issue I am facing is that while I am able to slide it using angular animations in one direction, I am unable to see the transition when sliding it back. Any assistan ...

javascripthtmlangulartypescript

I am able to successfully receive accurate data in JSON format, however I am facing difficulties binding it to a jquery

I am struggling with integrating data fetched in JSON format using $.ajax into a table using jquery's datatable. Below is the JavaScript code I have been trying: $(document).ready(function () { $.ajax({ type: "POST", url: "Result.aspx/getUser ...

javascriptjqueryjsonajax

Javascript - accessing a local file (located in the same directory as the HTML file, not an uploaded file)

I have been attempting to find a solution, but have had no success. Is there a way to read a file using JavaScript or HTML? I have a text file named "sample.txt" with some information in it. This file is located in the same folder as the HTML file that con ...

javascripthtml

Angular's implementation of a web socket connection

I am facing an issue with my Angular project where the web socket connection only opens upon page reload, and not when initially accessed. My goal is to have the socket start as soon as a user logs in, and close when they log out. Here is the custom socke ...

javascriptangulartypescriptwebsocket

Strategies for temporarily storing values within md-list-item in AngularJS

I am attempting to populate a list with items using material icons. The issue is that the values are being added permanently when the material icon is clicked, disregarding the save and discard buttons at the bottom of the card. My goal is to add values te ...

javascriptcssangularjshtml

Having trouble with npm debounce in ReactJS?

When using the npm debounce package in ReactJS, I encountered an error with the code below: Javascript - Uncaught TypeError: Object(...) is not a function The error occurs when passing the function into the debounce() method. import React, { Component ...

javascriptreactjsnpmdebouncing

Interacting with Google Maps using Selenium IDE

I am facing challenges in creating a Selenium test case to automate the process of clicking on Google Maps, specifically for creating markers by single-clicking on the map. Issue with Record function in IDE Upon using the "Record" function, my mouse cli ...

google-mapsselenium

Creating NextJS Route with Dynamic Links for Main Page and Subpages

In my NextJS project, I have dynamic pages and dynamic subpages organized in the following folders/files structure: pages ├── [Formation] ├── index.js │ ├── [SubPage].js Within index.js (Formation Page), I create links like this: < ...

javascriptnext.jsnext-link

What is the best way to find out if multiples of a specific time interval can evenly divide the time between two

I'm currently utilizing Luxon for handling dates and durations. I have two specific dates and an ISO duration, and I am looking to figure out how to determine if the interval between the dates is a multiple of the specified duration without any remain ...

javascripttypescriptdatetimeluxon

employing a flexible array of gulp operations in run-sequence

I have a situation where I need to create gulp tasks with dynamic names and ensure that they run in sequence, not parallel. I have stored the task names in an array, but when I try to use run-sequence, I encounter an error. I suspect the issue lies in how ...

javascriptnode.jsrun-sequence

Ways to store AJAX response data for future use

I am struggling with implementing the getState function. My goal is to update a field on click using a state value retrieved from an AJAX call. I have come across mentions of promises in other responses, but I am unsure how to integrate them into my code ...

javascriptjqueryajax

I want to retrieve a complete HTML page using an AJAX request

I am trying to retrieve the content of a specific page, but encountering issues when using this function: function getResult() { var url="http://service.semanticproxy.com/processurl/ftfu27m3k66dvc3r43bzfneh/html/http://www.smallbiztechnology.c ...

javascriptajaxopencalais

Maintain Open State of Toggle Drop Down Menu

Having an issue with the toggle down menu or list on my webpage. The problem is that the menu is constantly open (the #text_box) when the page loads. My intention was for it to be closed initially, and then open only when the user clicks on the 'Ope ...

javascriptjqueryhtml

Conceal the menu when tapping anywhere else

I am working on a project that involves implementing HTML menus that can be shown or hidden when the user interacts with them. Specifically, I want these menus to hide not only when the user clicks on the header again but also when they click outside of th ...

phpjavascript

Does applying a style to an element that already has the same value result in a decrease in performance? Alternatively, do all browsers simply overlook it?

Assuming I have an element with the style top: 5px, and then I execute element.style.top = "5px";, will the browser readjust its position and trigger a layout again? Or does it recognize that there is no need to change anything? (Is this behavior specified ...

javascriptjquerycsshtml

What is the best way to invoke a controller method using jQuery within a cshtml file?

I am working on a project where I need to add user information to the database by calling a function in my controller class. The user's information is entered through a form created in a .cshtml file that interacts with an external JavaScript file. Is ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4

Utilizing Vue.js to track and navigate through browsing history using the browser's

I'm currently working on an application using Vue and Laravel. Instead of relying on vue-router, Laravel is managing my routes. Within my parent component, I am dynamically loading components based on the state of an object in the data. One of the m ...

javascriptlaravelvue.js

Maintaining a reliable and efficient way to update the userlist in a chatroom using PHP, AJAX, and SQL

I've successfully created a chatroom using PHP, JavaScript, AJAX, and SQL without the use of JQuery or any other tools. I maintain user persistence through session variables to keep users visible on the front page of my website (www.chatbae.com). How ...

javascriptphpajax