CODEWITHSUNDEEP
protractor
Kevin
Kevin

Reputation: 95

Find an Element in Protractor

 <div>
                <label localize="{data: 'Name', suffix: ':'}">Name:</label>
                <span class="required" ng-class="{'disabled': meterCreating}" input-control="{title: 'Meter', okCallback:setMeterName, value: meter.meterName, ss: 'meters'}">
                    <span hs-placeholder="Enter Name" class="ng-binding"></span>
                </span>
            </div>

What is the best way to find an element: placeholder = "Enter Name"?

Scenario: find an element using Snippet above

User clicks on the "Enter Name" box, another windows pops-up for entering a name.

Upvotes: 0

Views: 4995

Answers (1)

Gunderson
Gunderson

Reputation: 3266

Based off that HTML, the cleanest way I can see is by css chaining:

element(by.css('span.required span.ng-binding')) (would normally just be span.ng-binding, but I highly doubt that's unique. I also doubt that span.required span.ng-binding is unique either)

There are many other options, however they won't be pretty cause they will be similar chains.

element(by.cssContainingText('label', 'Name:')).element(by.css('span > span'));

or

element(by.css('div label span.ng-binding')) etc..

I would suggest asking your developers for better locators (specifically, ID's), it makes JavaScript way easier. Unfortunately, I don't think you're able to locate that element by HTML attributes, which is one of my favorite ways. It would have looked like this:

element(by.css('span[placeholder=Enter Name]')) -- but I'm pretty sure that will throw an error for invalid locator. It accepts most "standard" html attributes such as value, option, style etc...

Upvotes: 3

Related Questions