Handle WebElement using Protractor – Part2 – dropdown and alerts

In this post, we will come to know –

• How to identify dropdown elements and different ways to select an option from the dropdown
• Identify button using the display text
• Handle alerts, get the alert text and verify the content and click on the ok button to accept the alert.

Watch demo here

Code implementation

import { browser, element, by, protractor } from "protractor";
import { log4jsconfig } from '../config/log4jsconfig'

describe("Banking project test", function(){

    function VerifyAndCloseAlert(text: String){
        let EC = protractor.ExpectedConditions;
        browser.wait(EC.alertIsPresent(), 4000, "ALert not found");
 
        let alert = browser.switchTo().alert();
        let alertText = alert.getText();
 
        alertText.then(function(txt){
            log4jsconfig.Log().debug(txt);
        })
 
        browser.sleep(2000);
        expect(alertText).toContain(text);
        alert.accept(); 
    }

    beforeEach(function(){
        browser.get("http://www.globalsqa.com/angularJs-protractor/BankingProject/#/manager/addCust");
    })

    it("Verify the flow", function(){
       element(by.model('fName')).sendKeys("ABC");
       element(by.model('lName')).sendKeys("XYZ");
       element(by.model('postCd')).sendKeys('1344');
       element(by.className('btn btn-default')).click();

       VerifyAndCloseAlert("Customer added");

       element(by.buttonText('Open Account')).click();
       let Customers = element(by.model('custId'));
       let options = Customers.all(by.tagName('option'));

       options.then(function(items){
           log4jsconfig.Log().debug("Dropdown option size " + items.length);
           for(let i=0 ; i < items.length ; i++){
                items[i].getText().then(function(txt: any){
                    log4jsconfig.Log().debug(txt);
                    if(txt == "ABC XYZ"){
                        log4jsconfig.Log().debug("Item found on the list");
                        items[i].click();
                    }
                })
           }
       })

       element(by.model('currency')).$('[value="Dollar"]').click(); //$ = by.css
       element(by.buttonText("Process")).click();
       browser.sleep(3000);

       VerifyAndCloseAlert("Account created");
});
});