Header Ads

  • Breaking News

    Learn Basic automation with puppeteer

     if you are new to puppeteer first check this post - What is puppeteer? setup and writing first script. After setting up puppeteer one need to know how to do basic automation using this tool. To learn any automation tool you should know how to find web element? how to click ? how to insert text in inputs? how to select from dropdown? so let's learn how to do this ? 

    Learn basic automation with puppeteer

    Before reading more, if you are interested in video tutorial on same, please go through below video and subscribe our youtube channel. 


    How to find web element (xpath) using puppeteer ?

    For pupeeteer you can use data-tid elements or data-testId elements to find out web elements uniquely. This is most efficient way to find out the web elements. 
    If you see facebooks sign up page, they have data-testId that can be used to find that button. They might be using same for their unit tests. 


    You can use that in your automation code like this -

    const signup = '[data-testid="open-registration-form-button"]';
    await page.waitForSelector(signup );
    await page.click(signup);

    Also you can use regular xpaths with puppeteer ( to learn about xPaths click here ) -

    const firstname= await page.waitForXPath(`//input[@name='firstname']`);
    await firstname.click();

    How to click on button ?

    To click on button or other element you can use page.click(); method. 

    const signup = '[data-testid="open-registration-form-button"]';
    await page.waitForSelector(signup );
    await page.click(signup);

    How to type in input using puppeteer?

    puppeteer's page class have type method. Page. type ();
    for better you can use like this 

    const firstname= await page.waitForXPath(`//input[@name='firstname']`);
    await firstname.click();
    await firstname.type("software testing");

    How to select from dropdown using puppeteer?

    Selecting element from dropdown is not that strait forward in selenium but puppeteer has simple page.select() method. 

    await page.select(`[id='day']`, '5')
    Sometimes if dropdown is not implemented correctly, you can click on dropdown and then click on element. But you need to make sure dropdown is opened before click and closed after click as puppeteer run too fast it clicks before dropdown gets open. 

    To understand each and every point why and how, Please watch the video from my youtube channel and subscribe the channel -> Youtube channel . Thank You.

    Follow Us on RedditFacebook and Twitter


    2 comments:

    1. After a long time, I read a very beautiful and very important article that I enjoyed reading. I have found that this article has many important points, I sincerely thank the admin of this website for sharing it. Best Automation in UAE service provider

      ReplyDelete
    2. Thank you for sharing such a useful article. I had a great time. This article was fantastic to read. Continue to publish more articles on

      Data Engineering Services

      ReplyDelete

    Post Top Ad

    Post Bottom Ad