Category: puppeteer

Puppeteer – Handling Tabs ”; Previous Next We can handle tabs in Puppeteer using the below methods − newPage() We can open a new tab using this method available in the browser object. Syntax The syntax is as follows − const p = await browser.newPage() close() We can close the tab opened using this method. Syntax The syntax is as follows − await p.close() close() We can close all the tabs opened using this method available in the browser object. Syntax The syntax is as follows − await browser.close() 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”) //capture screenshot await p.screenshot({ path: ”tutorialspoint.png” }); //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, 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. Print Page Previous Next Advertisements ”;

Puppeteer – Basic Commands ”; Previous Next Some of the basic commands of Puppeteer are listed below − title() This command is used to obtain the title of the present page. Syntax The syntax is as follows − await page.title() url() This command is used to obtain the URL of the application currently launched in the browser. Syntax The syntax is as follows − await page.url() content() This command is used to obtain the page source code. Syntax The syntax is as follows − await page.content() 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/questions/index.php”) //obtain page title console.log(“Page title: ” + await p.title()) //obtain URL console.log(“Url: ” + await p.url()) //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 page title – The Best Technical Questions and Answers gets printed in the console. Also, the URL – www.tutorialspoint.com/questions/index.php gets printed in the console. The execution has happened in the headless mode. Print Page Previous Next Advertisements ”;

Puppeteer – Xpath Grouping ”; 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, 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. Obtaining one element from a collection of matching elements by utilising the index is known as the group index. If an xpath expression identifies multiple elements, then we can use the group index. The format for writing a group index is first the xpath expression followed by the index number enclosed in []. It represents an xpath array with index starting from 1. The function last() is used to point to the last element in the xpath array. Syntax The syntax for the use of function last() is as follows − (/table/tbody/tr/td[1]/input)[last()] Syntax The function position() is used to obtain an element at a particular position in the xpath array. The syntax is as follows − (/table/tbody/tr/td[1]/input)[position()=1] The above xpath expression shall obtain the first element from the group of all the matching elements. In the below image, let us identify the highlighted edit box and input some text in it. So the xpath expression shall be as follows − 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/td[1]/input 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 selectorGroupXpath(){ //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 group index xpath then enter text const f = (await page.$x(“//table/tbody/tr/td[1]/input”))[0] f.type(“Puppeteer”) //wait for sometime await page.waitForTimeout(4000) //capture screenshot await page.screenshot({ path: ”tutorialspoint.png” }); //browser close await browser.close() } selectorGroupXpath() 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, 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 with the text Puppeteer. Print Page Previous Next Advertisements ”;

Puppeteer – Non Headless Execution ”; Previous Next By default, Puppeteer executes the test in headless Chromium. This means if we are running a test using Puppeteer, then we won”t be able to view the execution in the browser. To enable execution in the headed mode, we have to add the parameter: headless:false in the code. 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”); //adding headless flag to false pt.launch({headless:false}).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/about/about_careers.htm”); }) Step 4 − Execute the code with the command given below − node <filename> So in our example, we shall run the below mentioned command − node testcase1.js After the command has been successfully executed, we shall see the execution getting triggered in a headed mode. Print Page Previous Next Advertisements ”;

Puppeteer – Xpath Attributes ”; 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. If an xpath expression with a single attribute identifies multiple elements, we can use more than one attribute in the xpath expression to locate a single element. The format for writing an xpath with only one attribute is as follows − //tagname[@attribute=”value”] For multiple attributes, we can apply AND and OR conditions. The format for writing an xpath with AND condition − //tagName[@attribute1=”value1”] [@attribute2=”value2”] Or, //tagName[@attribute1=”value1” and @attribute2=”value2”] The format for writing an xpath with OR condition is as follows − //tagName[@attribute1=”value1” or @attribute2=”value2”] We can also identify an element by applying the NOT condition on an attribute. The format for writing an xpath with NOT condition − //tagname[not(@attribute=”value”)] Let us identify the below highlighted logo on the page with the help of the alt attribute and then click on it. The xpath for the element shall be as follows − //img[@alt=”tutorialspoint”]. Here, we are working with the xpath selector, so we have to use the method: page.$x(xpath value). The detail on this method is 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 selectorAttributeXpath(){ //launch browser in headed mode const browser = await pt.launch() //browser new page const page = await browser.newPage() //launch URL await page.goto(”https://www.tutorialspoint.com/questions/index.php”) //identify element with relative xpath then click const b = (await page.$x(“//img[@alt=”tutorialspoint”]”))[0] b.click() //wait for sometime await page.waitForTimeout(4000) //obtain URL after click console.log(await page.url()) } selectorAttributeXpath() 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 URL of the page navigated on clicking the logo image – https://www.tutorialspoint.com/index.htm gets printed in the console. Print Page Previous Next Advertisements ”;

Puppeteer – Firefox ”; Previous Next We can run the tests developed in Puppeteer in Firefox. It must be remembered that while executing the test in Firefox, Puppeteer uses its internal Firefox browser and not the Firefox browser installed in the local system. Step 1 − We have to first install Puppeteer for the Firefox browser by executing the below command − npm install puppeteer-firefox Also, we have to add the Firefox-Puppeteer library in the code. const f = require(”puppeteer-firefox”) 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- Firefox library const pt = require(”puppeteer-firefox”); //adding headless flag to false 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/about/about_careers.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 – Firefox/65.0 gets printed in the console. Print Page Previous Next Advertisements ”;

Puppeteer – NodeJS Installation ”; Previous Next Puppeteer code implementation is done using JavaScript. For this, NodeJS has to be installed since it is a JavaScript engine. Only after its installation, we can execute Puppeteer tests. The steps to configure NodeJS are listed below − Step 1 − Launch the application having the below link − https://nodejs.org/en/download/ Step 2 − As per the local operating system (Windows, Mac or Linux) we are using, click on the link to download the Installer. Step 3 − Once the installer is downloaded, click on it. We shall be navigated to the Node.js Installer welcome screen. Click on Continue. Step 4 − Agree to the terms of agreement of Nodejs. Step 5 − Click on Install. Step 6 − Once the success message of Nodejs installation is displayed, click on Close. Step 7 − To check if Nodejs is installed successfully, open the terminal and run the command: node. The version of the Nodejs installed in the machine should get displayed. Print Page Previous Next Advertisements ”;

Puppeteer Tutorial PDF Version Quick Guide Resources Job Search Discussion Puppeteer is used for automation and streamlining of the frontend development and testing respectively. This tutorial shall give us a thorough insight on Puppeteer and its different terminologies. The tutorial contains practical examples on all main topics. Audience This tutorial is designed for professionals working in software testing who want to hone their skills on a robust automation testing tool like Puppeteer. It can be used to test applications developed in Angular and Angularjs. Prerequisites Prior going through this tutorial, you should have a fair knowledge on JavaScript and object oriented programming concepts. Besides, a good understanding of basics in testing is important to proceed with the tutorial. Print Page Previous Next Advertisements ”;

Puppeteer – Browser Operations ”; Previous Next The browser operations can be done by Puppeteer with the help of below given methods − launch() It is used to open new browsers and connect with an instance of Chromium. It has some optional parameters which are as follows − Product − This is of String type and is used to point to the browser to be launched. Syntax The syntax is as follows − let l = await puppeteer.launch({product : “chrome” }) headless − This is of Boolean type(default value is true) and it has to be set with false value inorder to execute the tests in headed mode. Syntax The syntax is as follows − let l = await puppeteer.launch({headless : false}) devtools − This is of Boolean type. If it is set to true, then DevTools shall open automatically in each browser tab. Also, the headless parameter should be set to false, if devtools is set to true. Syntax The syntax is as follows − let l = await puppeteer.launch({devtools: true}) defaultViewport − This is of type object. It provides a persistent viewport for a page(default value of viewport is 800*600). We can modify the size of the viewport by mentioning integer values in width and height for pixels. Syntax The syntax is as follows − let l = await puppeteer.launch({defaultViewport: { width: 500, height: 459}}) slowMo − This is of type number. This parameter is used to slow down the Puppeteer execution for some time, provided in milliseconds. Syntax The syntax is as follows − let l = await puppeteer.launch({slowMo: 500}) goTo() It is used to navigate to a webpage. The URL of the page to be navigated is passed as a parameter. Syntax The syntax is as follows − await page.goto(”https://www.tutorialspoint.com/index.htm”) close() It is used to close an opened browser. Syntax The syntax is as follows − await browser.close() browserContexts() This yields an array of all opened browser contexts. createIncognitoBrowserContext() It opens a new browser in incognito context. defaultBrowserContext() It yields a default browser context. disconnect() It is used to disconnect Puppeteer from the browser instance. isConnected() It is used to verify whether a browser is connected. newPage() It yields a Promise with a new page object. pages() It yields a Promise with an array of all open page objects. process() It yields a browser process if the instance is created with the launch method. Furthermore, it yields a null value if the instance is created with the connect method. target() It yields the target for a browser. targets() It yields a Promise containing the array of all targets which are active. Print Page Previous Next Advertisements ”;

Puppeteer – Introduction ”; Previous Next Puppeteer is used for automation and streamlining of the frontend development and testing respectively. It was introduced by Google. Puppeteer is based on the Node.js library and is open-source. Puppeteer contains APIs to interact and manage Chrome browser in headless mode or Chromium (following the protocols in DevTools). However, it can also be used for non-headless execution on browsers like Chrome/Chromium/Edge/Firefox. Puppeteer can be used for the automating majority of UI testing, keyboards, mouse movements, and so on. It can be used to test applications developed in Angular and Angularjs. The actions like web page crawling and scraping can be performed with Puppeteer. Puppeteer is not considered as an automation tool like Selenium, Cypress, Protractor, and so on. It is mostly used to manage the internal features of the Chromium browser. We can open DevTools in the Chrome browser, by pressing F12 or Command+Option+C(in MacOS). Puppeteer is like a development tool as it is capable of performing a majority of tasks performed by a developer like handling requests and responses, locating elements, network traffic and performance, and so on. If we follow the npm trends for Puppeteer download for the last few years, we shall observe an upward trend towards the use of Puppeteer (available from the below link) − www.npmtrends.com/puppeteer Puppeteer Architecture Puppeteer utilises the Node library that gives a top-class API for managing Chromium or Chrome browsers. This is done by following the protocols of DevTools. Puppeteer has the below hierarchy − Browser(with/without headless mode) − The browser performs the actions to be executed on the browser engine. Chromium Development Project or CDP − The Chromium is the real place where all the operations are executed. The browsers – Microsoft Edge and Chrome utilise Chromium as browser engine. Puppeteer − This is actually a package based on the node module. Automation test code − This is also known as the Nodejs level. Here, the actual automation code is developed by the end-user using JavaScript. Print Page Previous Next Advertisements ”;