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

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Seeking the most efficient method to load content from a php file into a designated div on my webpage, prioritizing speed, minimal performance requirements, and ease of implementation. Unsure whether it's preferable to utilize php or javascript for t ...

javascriptphpjqueryhtmlcss

Having issues executing the test suite in Firefox or any other browser with Selenium RC

I am new to Selenium and recently faced a challenge that I couldn't solve. I'm attempting to execute the following suite in either Firefox or Chrome: C:\auto_tools>java -jar selenium-server-standalone-2.46.0.jar -htmlSuite "*googlechrom ...

javagoogle-chromefirefoxseleniumselenium-rc

Enhancing functionality in Javascript by employing prototype descriptor for adding methods

Code: Sorter.prototype.init_bubblesort = function(){ console.log(this.rect_array); this.end = this.rect_array.length; this.bubblesort(); } Sorter.prototype.init = function(array,sort_type){ this.rect_array = array; this.init_bubblesort(); } Wh ...

javascript

The ForbiddenError has struck again, this time wreaking havoc in the realms of Node.js, Express.js

I am currently adapting this GitHub sample application to utilize Express instead of KOA. However, I am encountering an Access Denied issue when the / route in Express attempts to load the index.html. What specific modifications are required in the code be ...

javascriptnode.jsexpressangular

What steps do I need to take to have Greasemonkey execute a function upon the completion of an AJAX call

Whenever I select the trending tab on YouTube, an AJAX call is triggered to retrieve the latest trending videos. I have developed a custom script that filters out any videos I have already watched. Although this script successfully applies to the homepag ...

javascriptajaxevent-handlingyoutubegreasemonkey

What are the steps to successfully execute a basic project using Selenium web driver in c#?

I have taken on the challenge of learning Selenium Web Driver with C# and decided to create a simple project based on the code provided in the image linked below: https://i.stack.imgur.com/ZYAC2.jpg I've gone ahead and added all the necessary refere ...

c#seleniumselenium-webdriver

How to animate a left border shifting to the center using JavaScript

As I'm modifying my current div, I need to add a vertical line in the center of it. I've come across various solutions where a left border is added and then shifted using the left property by 50% (which effectively places it in the middle). Here ...

javascripthtmlcsssimple-html-dom

Anyone have a sample showcasing the integration of VueJS with the latest webpack 4 configuration?

VueJs templates now come with numerous examples and starting project skeletons. However, most of them still utilize webpack v3. Has anyone experimented with webpack 4? I'd love to see how you integrate version 4 of webpack into a VueJs project. Thank ...

javascriptvue.jsvuejs2

Encountering the "No injector found for element argument to getTestability" error while navigating between various single page applications

Currently, I am conducting tests on Protractor for a website that is bootstrapping AngularJS manually. Despite the steps continuing to execute, I encounter this error: Error while waiting for Protractor to sync with the page: "[ng:test] no injector found ...

javascriptangularjsprotractor

How can I extract only certain keys from a large JavaScript object while keeping the code concise?

Simply put, I aim to streamline objects by discarding unnecessary keys. Imagine a scenario where a third party API sends back JSON data with numerous attributes that hold no importance to you. obj = { name: ..., id: ..., description: ..., blah: .. ...

javascriptjsonjavascript-objects

Creating a JavaScript function to selectively blur elements while leaving one in focus

My goal is to blur all elements on a webpage except for the p#this tag using vanilla JavaScript. I am determined to learn the intricacies of JavaScript, so I'm not looking for solutions involving jQuery or CSS. I came across a potential solution on t ...

javascripthtml

The incorrect date selection made by the Datepicker feature in the Vue / Buefy component

Currently, I am utilizing Vue / Buefy as a datepicker in the form on a specific page (2nd step). You can find the page here: An issue has arisen where the date of birth input is sometimes recorded inaccurately. For instance, the user selects June 5th, 197 ...

javascriptvue.jsdatepickervuejs2buefy

Having trouble importing my function component into a router in reactjs. Need some guidance on how to properly set it up

I am working on a Slider component function called export default Slider. In my App.js file, I have the following code: function App() { return ( <Router> <Routes> <Route exact path='/' element={<Home />} /> ...

javascriptreactjs

Guide on Developing a JavaScript Library

After creating several JavaScript functions, I noticed that I tend to use them across multiple projects. This prompted me to take things a step further and develop a small JavaScript Library specifically for my coding needs. Similar to popular libraries l ...

javascriptnpmpackagenode-modulesnpm-publish

Ways to update list item text with jQuery

I am attempting to create a button that can replace the content of a list item. Although I have looked at other solutions, I keep encountering this error message: Uncaught TypeError: Object li#element2 has no method 'replaceWith' I have experime ...

javascriptjqueryhtmldom

Insert a picture within the text input field

I'm facing a specific scenario where I need to add text followed by an image, then more text followed by another image and so on. Please see the input text with values in the image below. Can someone guide me on how to accomplish this with jQuery and ...

javascriptjqueryhtmlcss

Tips on revealing TypeScript modules in a NodeJS environment

Currently, I am working on developing a TypeScript library. My goal is to make this library compatible with both TypeScript and JavaScript Node projects. What would be the most effective approach for achieving this? Should I create two separate versions ...

javascriptnode.jstypescript

Error occur when trying to execute a Python script from within a Shell script

While working on a small shell script that ultimately calls a Python script, I encountered an issue. The end of the shell script looks like this: echo $pythonFilePath cd $pythonFilePath python Python-webtest.py Even though I have made Python-webtest.py ...

python-2.7shellseleniumselenium-webdriver

Using Firebase onDisconnect with React Native

I am currently working on a React Native app and I am facing an issue where I need to update the user status to 'offline' in Firebase when the user closes the app. Here is what I have tried: import React, { Component } from 'react' ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

Can someone help me figure out how to make my Dropdown stay open when I highlight input, drag, and release

While working with the react bootstrap Dropdown component, I've encountered a specific behavior that is causing some trouble. To better illustrate the issue, I've attached some images. In my dropdown, there is an input filter box along with a li ...

javascripthtmlreactjs