End To End Date Picker example in puppeteer

How to handle date picker in puppeteer. In this puppeteer example, We will see an end to end date picker example in puppeteer.

Date Picker example in puppeteer

TestScenrios 1: Login in the application

  • Launch browser.
  • Navigate to the login page.
  • Enter a valid username.
  • Enter a valid password.
  • Click to the login button.
  • Verify use is log in successfully.

TestScenrios 2: Navigate to pay the billing page

  • Click to pay the bill

TestScenrios 3: Pay the bill

  • Select Payee.
  • Select Account type.
  • Enter amount.
  • Enter Date.
  • Enter description.
  • Click to pay button.
const puppeteer = require('puppeteer');
const expect = require('chai').expect;

describe("User Login",()=>{

    let browser
    let page
    before(async function(){
      browser = await puppeteer.launch({
      page = await browser.newPage()
      await page.goto("http://zero.webappsecurity.com/bank/pay-bills.html")

    it("Login with valid username and password", async()=>{

        await page.waitForSelector('#user_login');
        //Enter Username........
        await page.type('#user_login', 'username');
        //Enter Password.....
        await page.type('#user_password', 'password');
        //Click to login button..
        await page.click('.btn-primary');
        //Verify loged in successfully....
        await page.waitForSelector('.dropdown-toggle');    

     it("Navigate to pay bill", async()=>{
        await page.waitForSelector('#pay_bills_tab');
         await page.click('#pay_bills_tab')

     await page.waitForSelector('#sp_payee');
     //Select Sprint........
     await page.select('#sp_payee', 'Sprint');
     //Select Account.....
     await page.select('#sp_account', 'Savings');
     //Enter Amount..
     await page.type('#sp_amount','30');
      //Enter Date..
      await page.type('#sp_date','2020-05-08');
      await page.keyboard.press('Enter');
      //Enter Discription
      await page.type('#sp_description', 'Test Descitpion');
    //Click to pay button
     await page.click('#pay_saved_payees');
     //Verify payment
     await page.waitForSelector('#alert_content');
     let PaymentMessage = await page.$eval('#alert_content', element=>element.textContent);
     //Verify text...


    after(async function(){
       await browser.close()