Handle WebElement using Protractor – Part1 – textbox button and alerts

In this post, we will come to know –

• Enter text into a textbox
• Clicking on a button
• Handle alerts, get the alert text and verify the content and click on the ok button to accept the alert.

Watch the 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");
});

For details on how to log in protractor, refer here