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 ? 

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 Reddit, Facebook and Twitter