CODEWITHSUNDEEP
angularjsselenium-webdriverprotractorautomated-tests
M M
M M

Reputation: 99

How to validate multiple error message on page having same locator?

For application developed in angularjs, i am verifying validation message on page. But all message having same identifier. So how can we validate each message on page. I am using selenium, protractor with C#.

<div _ngcontent-c3="" class="form-row" xpath="1">
    <div _ngcontent-c3="" class="form-group col-md-4">
        <label _ngcontent-c3="" for="firstName">First Name</label>
        <span _ngcontent-c3="" style="color:red;"> *</span>
        <input _ngcontent-c3="" class="form-control ng-untouched ng-pristine ng-invalid" formcontrolname="firstName" placeholder="First Name" type="text">
        <!---->
        <div _ngcontent-c3="" style="color: red;font-weight: bold">
            <!---->
            <div _ngcontent-c3="">First Name is required</div>
        </div>
    </div>
    <div _ngcontent-c3="" class="form-group col-md-4">
        <label _ngcontent-c3="" for="lastName">Last Name</label>
        <span _ngcontent-c3="" style="color:red;"> *</span>
        <input _ngcontent-c3="" class="form-control ng-untouched ng-pristine ng-invalid" formcontrolname="lastName" placeholder="Last Name" type="text">
        <!---->
        <div _ngcontent-c3="" style="color: red;font-weight: bold">
            <!---->
            <div _ngcontent-c3="">Last Name is required</div>
        </div>
    </div>
    <div _ngcontent-c3="" class="form-group col-md-4">
        <label _ngcontent-c3="" for="lastName">Date of Birth</label>
        <input _ngcontent-c3="" bsdatepicker="" class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="dob" placeholder="Date of Birth" type="text">
    </div>
</div>

Upvotes: 0

Views: 553

Answers (4)

JeffC
JeffC

Reputation: 25744

I would get the validation message relative to each INPUT.

//input[@formcontrolname='firstName']//following::div[1]/div
^ starts with the firstName INPUT
                                     ^ finds the first DIV that follows
                                                        ^ and finds the child DIV

This finds the DIV that contains the message, "First Name is required", so you can assert that these two strings are equal.

Similar locator for the second message, the only thing that changes is the formcontrolname.

//input[@formcontrolname='lastName']//following::div[1]/div

Upvotes: 1

DublinDev
DublinDev

Reputation: 2348

The most reliable way to find these elements will be to verify the text content of the tag and use some form of xpath axes in order to do that. Axes allow you to find more easily find elements relative to another element.

Using protractor with xpaths you can use:

element(by.xpath('//input[@class="form-control ng-untouched ng-pristine ng-invalid"]/following::div[text()="First Name is required"]'));

element(by.xpath('//input[@class="form-control ng-untouched ng-pristine ng-invalid"]/parent::div//div[text()="First Name is required"]'));

Update with another approach not using axes:

element(by.xpath('//div[@style="color: red;font-weight: bold"]/div[text()="First Name is required"]'));

Upvotes: 1

Kuba Lubas
Kuba Lubas

Reputation: 91

In your situation, the only solution which could work is:

const firstNameError = element(by.cssContainingText('div', 'First Name is required'));
const lastNameError = element(by.cssContainingText('div', 'Last Name is required'));

// Here some code to act empty inputs

expect(firstNameError.isPresent()).toBeTruthy();
expect(lastNameError.isPresent()).toBeTruthy();

But honestly I would not recommend to use cssContainingText(). From my experience I can say that it's not stable enough to safe use.

Upvotes: 0

takrishna
takrishna

Reputation: 5002

When you query with same identifier it returns you an array instead of unique element (one object). You can then pick one element by way of say myArray[0], myArray[1] etc. and verify your messages.

Upvotes: 0

Related Questions