How to click the first item from first my class into my component using protractor?

protractor select second element
protractor locators
protractor element all
csscontainingtext
protractor gettext
protractor elementfinder

I need to click at the button from this component, but I don't know how to do this.

I need to follow this path:

How can I do this? is xpath my only alternative? I think I can use the css locator but I don't know how to write the relative path.

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>

Get first element in protractor, It seems the table:first-of-type selector is catching both elements, since they're both the first children of their parent div components. My project is  This video will guide you step by step process of How to Create First Protractor Script. We will be using Jasmin here. You can find all tutorials for Protractor here https://www.youtube.com

It depends on how specific you need to be which depends on the html of your entire page. All of these examples select the same element, but with different levels on 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'));

Using Locators - Protractor, The ElementFinder has a set of action methods, such as click() , getText() Protractor exports locator factories on the global by object. The most common locators are: // Find an element using a css selector. by.css('.myclass') // Find an element with Get by index (starting at 0). element.all(locator).get(index); // First and last. In this Protractor tutorial, we would be learning How to handle dropdowns in protractor, how to use click method to set dropdown values, creating a custom Select class to handle dropdowns in protractor, different ways to select a option, check whether a option is selected or not in a dropdown

have a go w/:

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

or also something like

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

Protractor select element from list, Element is the most general base class from which all element objects (i. It is basically having two arguments, first is How to select option in drop down protractorjs e2e tests (17) . One of tests includes interaction with mat-select component. have a setting in my angular based website that turns a dropdown on and off. This video contains how to handle drop-down list in Protractor automation Please share, support and subscribe. Follows us on: Website: http://seleniumonlinet

What you want is to identify a unique CSS selector which is independent on where that item is in the DOM tree.

I would suggest to tell your CSS you want to target a locator with a tagName button that exists with a title Remover convite and has a type called button

That would create:

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

Using Angular Material's component harnesses in your tests , A component harness is a class that lets a test interact with a component via a Angular's Testbed environment in Karma unit tests and Protractor end-to-end (​e2e) tests. The getHarness method gets a harness for the first instance of the matching mat-option'); options[1].click(); // Click the second option, "Bug". fixture​. Sorry @nedo for the slow response; I missed your last update.. you mentioned that getText works, just click does not. This does not sound like a protractor issue because click and getText are following the same code path except one is calling webdriver's native click and one is calling webdriver's native getText, but let's see if we can narrow the problem further:

15 Best Practices for Building Efficient Protractor Frameworks , from my year of first-hands experience with Protractor and Selenium. With many technical keywords such as: element, by, sendKeys, click, etc. By only defining a single page object class in a TypeScript file, along with  The point of using a POM is reducing code duplication and increasing efficiency and maintainability of your testing suite. Before creating a large suite of tests, first consider the approach your team should take in building your automation suite. Conclusion. We’ve covered how to change Protractor and Cucumber step definition to utilize page

ngClass, You should not use interpolation in the value of the class attribute, when using the apply supplementary CSS classes to track the start and end of an animation, but this index.html style.css protractor.js toMatch(/bold/); expect(​ps.first(). <input id="setbtn" type="button" value="set" ng-click="myVar='my-​class'"> <input  Labels: protractor, protractor select element, protractor test, select element with protractor There are different ways to select an element using protractor . You can get it by using id or tagName or css selector or or ng-repeat etc.

Protractor typescript select dropdown by text, Search Selection. click(); of records per page to 10', function(){ element( by. Create Select class in Protractor Typescript; selectByIndex(index:number) to bind the selected items and do edit update Here first one is my dropdown. css('​select This component is used within the <md-input-container> or it can be used  Click on first element in ng-repeat using Protractor To click on the first element in ng-repeat use below code element.all(by.repeater('item in items')).get(0).click(); similarly you can click on any element in ng-repeat just by changing the index in get()

Comments
  • Please provide more information about your solution. Code only answers are discouraged.
  • There you go, as requested