What is the best way to select the initial element from my class within my component using protractor?

Can anyone help me figure out how to click on the button in this component?

I need guidance on navigating through the following path:

Is xpath my only option for doing this? I believe a css locator could work as well, but I am unsure of how to construct the relative path.

Here are the classes associated with the button: app-lista-convites-lote, card, card-convite ng-star-inserted, btn btn-danger btn-no-text, zmdi zmdi-delete

HTML

<app-lista-convites-lote _ngcontent-c13="" _nghost-c18="">
<div _ngcontent-c18="" class="card card-convite ng-star-inserted">
<div _ngcontent-c18="" class="kebab kebab-convite">
<button _ngcontent-c18="" class="btn btn-danger btn-no-text" title="Remover convite" type="button">
<i _ngcontent-c18="" class="zmdi zmdi-delete"></i>
</button>
javascriptseleniumjasminecss-selectorsprotractor

Answer №1

If you want to trigger the click() event on the button labeled Remover convite in the provided HTML, you have a couple of options:

  • Solution #1 using css:

    element(by.css('div.card.card-convite.ng-star-inserted button.btn.btn-danger.btn-no-text[title="Remover convite"]'));

  • Solution #2 using css:

    element(by.css("div.card.card-convite.ng-star-inserted button.btn.btn-danger.btn-no-text[title='Remover convite']>i.zmdi.zmdi-delete"));

Please note: Since the element is an Angular element, you need to use async/await when working with it.

Answer №2

The level of specificity required depends on the structure of your entire HTML page. Although all these examples target the same element, they vary in their level of specificity using CSS Selectors.

element(by.css('.zmdi-delete'));
element(by.css('button.btn-danger i'));
element(by.css('div.kebab i'));
element(by.css('div.card-convite>div.kebab>button>i'));
element(by.css('app-lista-convites-lote i.zmdi-delete'));

Answer №3

Try this out:

By.css('.kebab kebab-convite:first-child')

Alternatively, you could also use:

let temp = await driver.findElement(By.css('.kebab kebab-convite'))
let button = await temp.findElement(By.css('button'))
button.click()

Answer №4

The goal is to find a CSS selector that can target an element regardless of its position in the DOM tree.

One approach could be to specify in your CSS that you are looking for a button with the title "Remover convite" and type "button".

This would result in: 

element(by.css('button[title="Remover convite"][type="button"]'));

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

Failure of window marker to trigger click event in jquery-bing-maps

I'm encountering an issue where clicking on links within Window markers on Bing Maps redirects me to a new page instead of triggering a JavaScript event as intended. $('.single_address').on('click', function (evt) { alert(&apo ...

javascriptjqueryjquery-mobilebing-mapsjquery-events

Guide on displaying content in two different tabbable ID's when one tab is selected in a Rails 3.2 App using Twitter Bootstrap's Tabbable Tabs

My implementation using Twitter Bootstrap's bootstrap-tab.js includes: <ul class="tabnavcenter" id="myTab"> <li class="active"><a href="#home" data-toggle="tab">about</a></li> <li><a href="#tab2" data-togg ...

javascripttwitter-bootstrap

Cookie vanished post registration in the captive portal

Just a heads up, I'm new to this. I've encountered an issue where a cookie doesn't persist after captive portal login. The setup involves landing on our web server, storing MAC and a unique ID on two cookies, redirecting for authentication, ...

javascriptphpandroidcookiesportal

When the parent component in React JS rerenders, the props are not automatically passed down to the child

I have come across similar questions in the past, but I have not found any answers that directly address the issue I am facing in my scenario. In my case, there is a parent component that passes a property to a child component's state. Depending on t ...

javascriptreactjs

Is there a way to extract individual values from a for-each loop in JavaScript?

Would appreciate any guidance on my use of Bootstrap vue table with contentful's API. I'm currently working on implementing a for loop to iterate through an array and retrieve the property values. Although the console.info(episodes); call success ...

javascriptvue.jsbootstrap-vuecontentful-api

Create a JavaScript script within a CSS file

I'm attempting to create this using only CSS: Codepen and I would like to achieve the same effect but solely with CSS. This is what my CSS looks like: .text{ --a: calc(var(--a);*0.82+(1.5-var(--b);)/10); --b: calc(var(--b);+var(--a);); transfor ...

javascriptcss

best way to eliminate empty strings from an array collection using javascript

I'm currently working on a search functionality where I separate each value in an array, and it's functioning properly. The issue arises when the user enters an empty value, causing the search to break as it returns an empty string within the arr ...

javascriptarrays

Similar to the filter() method in Vanilla Javascript but behaves in a equivalent way to

Looking to convert some JQuery code to Vanilla JS. $('#myID :not(a, span)').contents().filter( function() { return this.nodeType === 3 && this.data.trim().length > 0;}) .wrap('<span class="mySpanClass" />'); I&a ...

javascriptjqueryequivalent

Guide on saving images using selenium

Good day. I have a picture on a webpage that needs to be downloaded in order to import it onto another website. This is what the site looks like: I am looking to download this using xpath, with the xpath being //*[@id="word-img"]/img. The code ...

pythonpython-3.xseleniumselenium-webdriverselenium-chromedriver

Enable automated addition or alteration of phone numbers through Twilio's API

I'm looking to programmatically add and edit phone numbers using the API on this Twilio link. Can you guide me on how to achieve this? ...

javascriptphptwilio

Efficiently transferring time values from dynamically created list items to an input box using JavaScript

Is there a way to store a dynamically generated time value from an li element into an input box using JavaScript? I have a basic timer functionality on my website that includes starting, stopping, pausing, taking time snaps, and resetting them. These time ...

javascripthtml

Summary in Javascript

After utilizing the inspect code tool in PHPStorm, I received the following message: 'recipient_user.id === app.currentUser.id ? true : false' can be simplified to '!!(recipient_user.id === app.currentUser.id)' I'm wondering: ...

javascriptjslint

Access the website using Python's Selenium module

I am attempting to use Python Selenium to log in to this website, and have written the following code: # -*- coding: utf-8 -*- from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys from ...

pythonseleniumselenium-webdriver

What is the best way to scrape information from a real-time website using Python?

One thing that has been on my mind is how to retrieve real-time data from a website using Python. Want to check out the website to see what I mean? Here's the link: ...

pythonseleniumweb-scrapingbeautifulsoupraspberry-pi

Combining the Powers of ExpressJS and MeteorJS

I am currently using an Epress JS rest api to send data to a MongoDB database. I'm curious if it's feasible to incorporate Meteor JS for fetching these values from the MongoDB. Any insights or suggestions would be greatly valued. Thank you ...

javascriptjsonexpressmeteor

Using Angular's $filter to target a specific field

I'm attempting to use the $filter function in my controller, within a $watch function, to filter specific fields. I am having trouble understanding the documentation provided. The situation: I have a dropdown menu that serves as the filter parameter. ...

javascriptangularjs

What are some solutions for repairing xpath?

Here is the specific xpath I need to use: "//*[@id="zona-mijloc"]/div/table/tbody/tr[1]/td[1]/label/kbd" String id = driver.findElement(By.xpath("//*[@id=\"zona-mijloc\"]div/table/tr[1]/td[1]/label/kbd")).getText(); This is a link to view the H ...

javaselenium

Adjust the height of a div using jQuery once the AJAX call retrieves the data

There is a div that always matches the height of the adjacent div, depending on the content loaded in it. This setup was functioning properly until I implemented a search feature using jQuery. Now, when I perform a search, the element used in the jQuery ca ...

javascriptjquerycssajax

Verify the ability to view a webpage

I am currently working on creating a method to check if data access is equal to next.data.access. Since it's an array, I cannot use the includes method. It would be enough for just one of the data access values in the array to return true. auth.guard ...

javascriptangular

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

javascriptjqueryhtmlcss