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

Clicking on the Edit button does not result in any changes to the HTML on the page following a table

My current setup involves a button that is supposed to toggle between 'Add New User' and 'Update User' elements when clicked. However, it seems to work only when the table has not been filtered. Once I apply any kind of filtering on the ...

javascriptjqueryhtml

Steps for removing the label associated with an input field in an HTML form

I attempted to use JQuery and JavaScript in order to modify the CSS of a label to make it greyed out, but unfortunately I have not been able to achieve this. The label is positioned next to a checkbox, and although I am able to disable the checkbox, I hav ...

javascriptjqueryhtmlcss

Can you help me transform this javascript code into a JSON format?

Is there a way for me to organize my data so that I have one main question with 5 choices, each associated with a vote? It's like thinking of it as a tree where the question is the root and has 5 leaves, representing the choices, and each choice furth ...

javascriptjson

Unable to utilize a computed property within the data section

I am working with an array in my data: data () { return { steps: [ { disabled: this.someCheck } ] } } Additionally, I have a computed property: computed: { ...mapGetters({ getFinishedSteps: 'jobFound/getFinishedS ...

javascriptvue.jsvuejs2vue-componentvue-reactivity

Displaying the information fetched using axios on the screen using node.js

Is there a way to display the information from the input boxes in the image on the screen using node js? ...

javascriptnode.jsvue.jsexpressaxios

GAS: What strategies can I implement to optimize the speed of this script?

I have a sheet with multiple rows connected by "";" and I want to expand the strings while preserving the table IDs. ID Column X: Joined Rows 01 a;bcdfh;345;xyw... 02 aqwx;tyuio;345;xyw... 03 wxcv;gth;2364;x89... function expand_j ...

javascriptperformancegoogle-apps-scripttime

Efficiently converting arrays to strings in JavaScript using mapping techniques

My goal is to retrieve data through AJAX without formatting it as JSON, so I took the initiative to encode it myself. The data I am working with consists of client records: where the pound sign (#) separates the client records, the pipe sign (|) separates ...

javascriptajaxarraysjson

Is it possible to use setState after a setTimeout to unmount a component?

Can anyone help me find the issue with my code? I am attempting to clear an error message after a specific duration, but it's not working as expected. I'm puzzled about what might be causing this problem. export default class MyError extends Com ...

javascriptreactjs

Enhancing transparency with a touch of background color

After successfully exporting my chart created in canvas as an image file, I noticed that the image turned out to be transparent without any background. Is there a way through code to add a background color to this existing image obtained from canvas? For ...

javascriptphpcsshtmlcanvas

php failure to execute included file

Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...

phpjavascriptcssfileinclude

AJAX request: No values are being returned by $_GET

After spending hours trying to figure this out... I've been working on using AJAX to grab values from a jQuery slider within an <input> tag. The AJAX request is not failing (see code below), and when I use console.log to check the variable I&ap ...

javascriptphpjqueryajax

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...

javascripthtmlcss

Enliven the character limit reaction by incorporating a thrilling shake animation when it reaches

I have implemented a feature in my component where if a user reaches the character limit, the component should shake. However, despite my efforts, the shaking effect is not working in the current code. const useStyles = makeStyles(() => ({ shake ...

javascriptreactjsmaterial-ui

Can you combine multiple items in PaperJS to move them collectively?

I'm working on a PaperJS project that involves numerous circles that can move independently. In addition to this, I would like each circle to have PointText at its center acting as a label. However, instead of having to manually animate each label ev ...

javascriptcanvaspaperjs

The issue with HTML where the header and footer elements are continuously repeating when

I'm struggling with the title header and footer repeating on every printed page. I just want to show the title at the top of the page and display the footer at the end of the print page. Can anyone provide a solution or suggestion? You can view my fid ...

javascripthtmlcssprinting

Unique Javascript Library Focused on AJAX

Looking for a specific JavaScript library that focuses solely on AJAX functionality, such as a basic XMLHttp wrapper. ...

javascriptajaxxmlhttprequest

Encountered a runtime error while processing 400 requests

Current Situation: When authenticating the username and password in my Ionic 2 project using WebApi 2 token authentication, a token is returned if the credentials are correct. However, a 400 bad request error is returned if the credentials are incorrect. ...

javascriptangulartypescriptionic2

Managing waste: AngularJS service variable cleanup

I am a beginner in angularjs. Recently, I created an angularJS service based on the following diagram: The Global Service acts as a way for controllers to communicate with each other. It holds data shared between parent and child controllers. The Grand Pa ...

javascriptangularjsgarbage-collectionangularjs-service

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

I am currently exploring the ExpectedConditions class in search of the onChange method

During testing of the application I am currently working on, I have observed that when I click a submit button, a grid refreshes. There is a row count available to me in a span element, and my intention was to achieve something like: (new WebDriverWait(dr ...

javaseleniumselenium-webdriver