Category: puppeteer

Puppeteer – Locators ”; Previous Next We can handle elements on page with Puppeteer. Once we navigate to a webpage, we have to interact with the webelements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case. For this, our first job is to identify the element. To get the property of an element uniquely we need to inspect it (right-click on the element then select the option Inspect). The ElementHandle objects are created by the methods – page.$, page.&dollar;&dollar; and page.&dollar;x. These objects refer to an element or tag in a page. To determine an element uniquely, we can either take the help of any of the attributes within the html tag or we can use a combination of attributes on the html tag. Mostly the id attribute is used since it is unique to a page. However, if the id attribute is not present, we can use other attributes like the class, name, and so on. In case the attributes like id, name, and class are not present, we can utilise a distinct attribute available to only that tag or a combination of attributes and their values to identify an element. For this, we have to use the xpath expression. Methods to locate elements These methods are listed below − page.$(locator value) This method yields a Promise with the ElementHandle. The ElementHandle is an object of the identified element. If there are multiple elements having the same locator value, then only the first matching element from the top left corner of the page shall be returned. page.$$(locator value) This method yields a Promise with an array of ElementHandle. If there are multiple elements having the same locator value, then all matching elements shall be returned in the form of an array. page.$x(xpath value) This method yields a Promise with an array of ElementHandle. If there are multiple elements having the same xpath value, then all matching elements shall be returned in the form of an array. In case, there is one matching element, then the array returned shall have a single element. The ElementHandle methods like elementHandle.$, elementHandle.$$ and elementHandle.$x can be applied to an element. In that case, an element shall be searched within the DOM of the present ElementHandle and not in the entire DOM. In the below given image, let us take the example of an element having the li tag(having a parent element ul) and class attribute value as heading. To identify it using the ElementHandle method on the page, the expression should be as follows − const n = await page.$(“.heading”) To identify it using the ElementHandle method on an element, the expression should be − const m = await page.$(“ul”) const p = await m.$(“.heading”) Now, refer the image given below of an element having the li tag Types of Locators The types of locators in Puppeteer are listed below − ID Class Type Xpath Attribute Type To work with the above locators we should have the basic understanding of HTML code. Let us take an example of an edit box having the below properties − Here, input is the tagname. A tag in HTML may or may not have attributes. The type, class, name, id and so on are the attributes of the element. For example, in the expression id = “gsc-i-id1”, text to the left of = is the attribute name (id) and to the right of = is the attribute value (gsc-i-id1). An attribute may or may not have a value assigned. Also, if a value is assigned, then it should be enclosed in double or single quotes. The value of an attribute is set by a developer as per his choice. Let us take an example of an element having the below html code − We can identify the first checkbox in the above image, with the expression − const n = await page.$(“input[type=”checkbox”]”) To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows − Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed). The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation. Right-click on the folder where the node_modules folder is created, then click on the New file button. Step 2 − Enter a filename, say testcase1.js. Step 3 − Add the below code within the testcase1.js file created. //Puppeteer library const pt= require(”puppeteer”) async function checkBoxHandle(){ //launch browser in headed mode const browser = await pt.launch() //browser new page const page = await browser.newPage() //launch URL await page.goto(”https://the-internet.herokuapp.com/checkboxes”) //identify element with xpath then click const n = await page.$(“input[type=”checkbox”]”) n.click() //wait for sometime await page.waitForTimeout(4000) //verify if checkbox is checked const v = await (await n.getProperty(“checked”)).jsonValue() console.log(v) } checkBoxHandle() Step 4 − Execute the code with the below mentioned command − node <filename> So in our example, we shall run the following command − node testcase1.js After the command has been executed successfully, the boolean value true is printed in the console. This is returned by getProperty(“checked”) which returns true as the checkbox is selected. Print Page Previous Next Advertisements ”;

Puppeteer – Handling Confirm Alerts ”; Previous Next Puppeteer is capable of handling Alerts. The automation tools like Selenium, WebdriverIO, and so on, accept or dismiss an alert after it has appeared on the page. However in Puppeteer, the user has to give direction whether to accept or dismiss an alert before it appears on the page. For this, the on event listener has to be triggered using Puppeteer. Methods for Handling Confirm Alerts Some methods to work with Alerts are listed below − accept(): Promise<void> − This method is used to accept an alert. message(): string − This method is used to yield the message obtained in an alert. type(): DialogType − This method is used to obtain the Dialog type. A Dialog type can be a prompt, confirm or prompt. dismiss(): Promise<void> − This method is used to dismiss an alert. In the below given image, on clicking Click for JS Confirm, a confirm alert is displayed. Let us obtain the text on the alert. To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows − Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed). The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation. Right-click on the folder where the node_modules folder is created, then click on the New file button. Step 2 − Enter a filename, say testcase1.js. Step 3 − Add the below code within the testcase1.js file created. //Puppeteer library const pt= require(”puppeteer”) async function confirmAlert(){ //launch browser in headless mode const browser = await pt.launch() //browser new page const page = await browser.newPage(); //on event listener trigger page.on(”dialog”, async dialog => { //get alert message console.log(dialog.message()); //accept alert await dialog.accept(); }) //launch URL await page.goto(”https://the-internet.herokuapp.com/javascript_alerts”) //identify element with xpath then click const b = (await page.$x(“//button[text()=”Click for JS Confirm”]”))[0] b.click() } confirmAlert() Step 4 − Execute the code with the following command. node <filename> So in our example, we shall run the command given below − node testcase1.js After the command has been successfully executed, the confirm alert text – I am a JS Confirm gets printed in the console. Print Page Previous Next Advertisements ”;

Puppeteer – Xpath Axes ”; Previous Next To determine an element uniquely, we can either take the help of any of the attributes within the html tag or we can use a combination of attributes on the html tag. Mostly the id attribute is used since it is unique to a page. However, if the id attribute is not present, we can use other attributes like the class, name, and so on. In case the attributes like id, name, and class are not present, we can utilise a distinct attribute available to only that tag or a combination of attributes and their values to identify an element. For this, we have to use the xpath expression. Also, if the element on a page is dynamic, then xpath selector can be a good choice as a selector. The xpath is bi-directional which means we can traverse from the parent to the child element and also from the child to the parent element. The details of xpath axes shall be available in the below link − https://www.tutorialspoint.com/xpath/xpath_axes.htm In the below image, let us identify the highlighted edit box and obtain the value of its class attribute – gsc-input. In the above example, there are two columns (represented by td tags) in the table having the tr tag as their parent. The input box is present in the first column. So the xpath expression shall be as follows − //table/tbody/tr/child::td. Here, we are working with the xpath selector, so we have to use the method: page.$x(xpath value). The details on this method are discussed in the Chapter of Puppeteer Locators. To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows − Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed). The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation. Right-click on the folder where the node_modules folder is created, then click on the New file button. Step 2 − Enter a filename, say testcase1.js. Step 3 − Add the below code within the testcase1.js file created. //Puppeteer library const pt= require(”puppeteer”) async function selectorAxesXpath(){ //launch browser in headless mode const browser = await pt.launch() //browser new page const page = await browser.newPage() //launch URL await page.goto(”https://www.tutorialspoint.com/index.htm”) //identify element with xpath axes const n = (await page.$x(“//table/tbody/tr/child::td”))[0] // get value of class attribute let v = await page.$eval(“input”, n => n.getAttribute(“class”)) console.log(v) } selectorAxesXpath() Step 4 − Execute the code with the command given below − node <filename> So in our example, we shall run the following command − node testcase1.js After the command has been successfully executed, the value of the class attribute for the element – gsc-input gets printed in the console. Print Page Previous Next Advertisements ”;

Puppeteer – Basic Test ”; Previous Next To start with a basic test on Puppeteer, we have to follow the below mentioned steps − Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed). The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation. Right-click on the folder where the node_modules folder is created, then click on the New file button. Step 2 − Enter a filename, say testcase1.js. Step 3 − Add the below code in this file − //adding Puppeteer library const pt = require(”puppeteer”); pt.launch().then(async browser => { //browser new page const p = await browser.newPage(); //set viewpoint of browser page await p.setViewport({ width: 1000, height: 500 }) //launch URL await p.goto(”https://www.tutorialspoint.com/index.htm”) //capture screenshot await p.screenshot({ path: ”tutorialspoint.png” }); //browser close await browser.close() }) Step 4 − Execute the code with the following command − node <filename> So in our example, we shall run the following command − node testcase1.js After the command has been successfully executed, a new file called the tutorialspoint.png gets created within the page directory. It contains the captured screenshot of the page launched in the browser in a headless mode. Print Page Previous Next Advertisements ”;

Puppeteer – Installation ”; Previous Next The steps for installation of Puppeteer are listed below − Step 1 − Install NodeJS. The details on how to install NodeJs is discussed in detail in the Chapter of Installation of NodeJS. Step 2 − Create an empty folder, say puppeteer in a location. Step 3 − Launch the Visual Studio Code application and click on the Open folder link and import the folder we have created in Step2. The details on how to install VS Code is discussed in detail in the Chapter of VS Code Configuration. Step 4 − Open the terminal and move from the current directory to the directory of the empty folder that we have created in Step 2. Then run the following command − npm Step 5 − For Puppeteer installation, run the below mentioned command − npm install puppeteer Or, npm i puppeteer Step 6 − For installation of Puppeteer core, run the below mentioned command − npm i puppeteer-core Step 7 − After the installation of Puppeteer and Puppeteer core, we shall find the node_modules folder and package.json file generated within the empty folder we created in Step 2. Step 8 − While working on a test, we have to add the below Puppeteer library in the code. const pt = require(”puppeteer”) Print Page Previous Next Advertisements ”;

Puppeteer – Chrome ”; Previous Next The tests written in Puppeteer are executed in the Chrome or Chromium browser in a headless mode by default. Also, we have to add the below Puppeteer library in the code. const pt = require(”puppeteer”) To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows − Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed). The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation. Right-click on the folder where the node_modules folder is created, then click on the New file button. Step 2 − Enter a filename, say testcase1.js. Step 3 − Add the below code within the testcase1.js file created. //adding Puppeteer library const pt = require(”puppeteer”); pt.launch().then(async browser => { //browser new page const p = await browser.newPage(); //set viewpoint of browser page await p.setViewport({ width: 1000, height: 500 }) //launch URL await p.goto(”https://www.tutorialspoint.com/index.htm”) //get browser const v = await p.browser().version(); console.log(“Browser: ” + v) //browser close await browser.close() }) Step 4 − Execute the code with the command given below − node <filename> So in our example, we shall run the following command − node testcase1.js After the command has been successfully executed, the browser in which the test is executed – HeadlessChrome/92.0.4512.0 gets printed in the console. Print Page Previous Next Advertisements ”;

Comparison Between Puppeteer & Protractor ”; Previous Next The major differences between Puppeteer and Protractor are given below − Sr.No. Puppeteer Protractor 1 Puppeteer is a module in node developed for Chromium engine. Protractor is a dedicated test automation tool. 2 Puppeteer is faster in executing tests than Protractor. Protractor is slower in executing tests than Puppeteer. 3 Puppeteer is developed mainly for Chromium so the tests developed are mainly executed in Chrome. Protractor can be used to execute tests on multiple browsers like Chrome, Firefox, IE, Safari, and so on. 4 Puppeteer can be used for API testing by utilising the requests and the responses. API testing with Protractor is difficult. 5 Puppeteer can be used to verify the count of CSS and JavaScript files utilised for loading a webpage. Protractor cannot be used to verify the count of CSS and JavaScript files utilised for loading a webpage. 6 Puppeteer can be used to work on the majority of features in the DevTools in the Chrome browser. Protractor cannot be used to work on the majority of features in the DevTools in the Chrome browser. 7 Puppeteer can be used to execute tests on various devices with the help of the emulators. Using an emulator with Protractor is not easy. 8 Puppeteer can be used to save a screenshot in both image and PDF formats. Protractor can be used to save a screenshot in only image format. 9 Puppeteer can be used to obtain the time needed for a page to load. Protractor cannot be used to obtain the time needed for a page to load. 10 In Puppeteer, we can verify an application without image loading. In Protractor, we can verify an application without image loading. Let us observe the npm trends of Puppeteer and Protractor for the last two years. We shall observe an upward trend towards the use of Puppeteer than Protractor (available from the below link) − https://www.npmtrends.com/protractor-vs-puppeteer Print Page Previous Next Advertisements ”;

Puppeteer – Handling Drop-downs ”; Previous Next We can handle drop downs in the UI while automating a test using Puppeteer. The static drop downs are identified in the html code with the tagname as select and its options have the tagname as option. Methods to Handle Dropdown Some methods to work with static dropdowns − select() This method is used to select an option from the dropdown. The value of the option to be selected is passed as a parameter to this method. Syntax The syntax is as follows − const page = await browser.newPage() const f = await page.$(”[name=”selType”]”) await f.select(“subject”) We can also select multiple options from a multi-select dropdown. Syntax The syntax is as follows − await f.select(“subject”, “name”) To obtain select value from the dropdown, we have to use the getProperty method and pass value as a parameter to this field. const v = await (await n.getProperty(“value”)).jsonValue() console.log(v) type() This method is used to select an option from the dropdown. The value of the option to be selected is passed as a parameter to this method. Syntax The syntax is as follows − const page = await browser.newPage() const f = await page.$(”[name=”selType”]”) await f.type(“subject”) To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows − Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed). The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation. Right-click on the folder where the node_modules folder is created, then click on the New file button. Step 2 − Enter a filename, say testcase1.js. Step 3 − Add the below code within the testcase1.js file created. //Puppeteer library const pt= require(”puppeteer”) async function dropDownHandle(){ //launch browser in headless mode const browser = await pt.launch() //browser new page const page = await browser.newPage() //launch URL await page.goto(”https://www.tutorialspoint.com/tutor_connect/index.php”) //identify dropdown then select an option by value const f = await page.$(”[name=”selType”]”) await f.select(“subject”) //wait for sometime await page.waitForTimeout(4000) //get value selected const v = await (await f.getProperty(“value”)).jsonValue() console.log(v) } dropDownHandle() Step 4 − Execute the code with the command given below − node <filename> So in our example, we shall run the following command − node testcase1.j After the command has been executed successfully, the value of the option selected in the dropdown – subject is printed in the console. Print Page Previous Next Advertisements ”;

Puppeteer – VS Code Configuration ”; Previous Next The steps to install the Visual Studio (VS) Code are listed below − Step 1 − Navigate to the below link − https://code.visualstudio.com/ Step 2 − Depending on the local operating system we have for example – macOS, Linux or Windows, we need to choose the link for download. Step 3 − A zip file gets downloaded after clicking the Download button. After downloading this file has completed, click on it and the Visual Studio Code application should become available for use. Step 4 − Double-click it and the Visual Studio Code application should launch along with the welcome page. Print Page Previous Next Advertisements ”;

Comparison Between Puppeteer & Selenium ”; Previous Next The major differences between Puppeteer and Selenium are given below − Sr.No Puppeteer Selenium 1 Puppeteer is developed mainly for Chromium so the tests developed are mainly executed in Chrome. Selenium can be used to execute tests on multiple browsers like Chrome, Firefox, IE, Safari, and so on. 2 Puppeteer code can be implemented only in JavaScript. Selenium code can be implemented on multiple languages like Java, Python, JavaScript, C#, and so on. 3 Puppeteer provides APIs to manage headless execution in Chrome by using the DevTools protocol. Selenium requires additional external browser drivers that trigger tests as per the user commands. 4 Puppeteer manages the Chrome browser. Selenium is primarily used to execute tests to automate the actions performed on the browser. 5 Puppeteer is faster in executing tests than Selenium. Selenium is slower in executing tests than Puppeteer. 6 Puppeteer is a module in node developed for Chromium engine. Selenium is a dedicated test automation tool. 7 Puppeteer can be used for API testing by utilising the requests and the responses. API testing with Selenium is difficult. 8 Puppeteer can be used to verify the count of CSS and JavaScript files utilised for loading a webpage. Selenium cannot be used to verify the count of CSS and JavaScript files utilised for loading a webpage. 9 Puppeteer can be used to work on the majority of features in the DevTools in the Chrome browser. Selenium cannot be used to work on the majority of features in the DevTools in the Chrome browser. 10 Puppeteer can be used to execute tests on various devices with the help of the emulators. Using an emulator with Selenium is not easy. 11 Puppeteer can be used to obtain the time needed for a page to load. Selenium cannot be used to obtain the time needed for a page to load. 12 Puppeteer can be used to save a screenshot in both image and PDF formats. Selenium can be used to save a screenshot in both image and PDF formats only in the Selenium 4 version. 13 Puppeteer was first introduced in the year 2017. Selenium was first introduced in the year 2004. 14 In Puppeteer, we can verify an application without image loading. In Selenium, we can verify an application without image loading. Print Page Previous Next Advertisements ”;