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({
        headless:false,
        slowMo:100
      })
      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')
     })

   it("PayBill",async()=>{
     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...
     console.log(PaymentMessage);
     expect(PaymentMessage).to.include('successfully');

    })


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

 });