Category: puppeteer

Puppeteer – Getting Element Text ”; Previous Next We can get element text in Puppeteer. This is done with the help of the textContent property. This property of the element is passed as a parameter to the getProperty method. Syntax The syntax of getting element text is as follows − const n = await page.$(“#txt”) const t = await (await n.getProperty(”textContent”)).jsonValue() In the below image, let us obtain the text – About Tutorialspoint for the highlighted element − 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 getText(){ //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/about/about_careers.htm”) //identify element const f = await page.$(“[class=”heading”]”) //obtain text const text = await (await f.getProperty(”textContent”)).jsonValue() console.log(“Text is: ” + text) } getText() 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 text of the element – About Tutorialspoint gets printed in the console. Print Page Previous Next Advertisements ”;

Puppeteer – Getting Element Attribute ”; Previous Next We can get attribute values of an element using Puppeteer. The attributes are added within the HTML tag. They are used to describe the properties of an element. An attribute and its value are defined in a key-value pair. 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 this element. For example, in id = gsc-i-id1, text to the left of = is the attribute name(i.e id) and to the right of = is the attribute value(i.e 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. Methods for Element Attribute The ways to obtain an element attribute are listed below − getAttribute() This method is used to get the value of the attribute which is passed as a parameter to this method. Syntax The syntax is as follows − let v = await page.$eval(“input”, element=> element.getAttribute(“class”)) element.<attribute name> Syntax The syntax is as follows − let v = await page.$eval(“input”, element=> element.class) element.getProperty() This method is used to get the value of the attribute which is passed as a parameter to this method. The syntax is as follows − Syntax const n = await page.$(“#txt”) const t = await (await n.getProperty(”textContent”)).jsonValue() In the below image, let us identify the highlighted edit box and obtain the value of its class attribute – gsc-input. 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 getElementAttribute(){ //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 id const n = await page.$(“#gsc-i-id1”) //get class attribute let v = await page.$eval(“input”, n => n.getAttribute(“class”)) console.log(v) } getElementAttribute() 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 – Type Selector ”; Previous Next 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. If a tag is used only one time in a page, we can use it as a type selector. If there are multiple elements with the same tag, only the first matching element on the page shall be identified. Syntax The syntax for type selector is as follows − const n = await page.$(“h4″) In the below example, let us identify the highlighted element having tagname h4 and obtain its text – You are browsing the best resource for Online Education. To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which is 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 selectorType(){ //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 type selector const n = await page.$(“h4″) //obtain text const text = await (await n.getProperty(”textContent”)).jsonValue() console.log(“Text is: ” + text) } selectorType() 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 text on the element – You are browsing the best resource for Online Education gets printed in the console. Print Page Previous Next Advertisements ”;

Puppeteer – Attribute Selector ”; Previous Next 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. If an attribute and its value is used only one time in a tag, we can use it as an attribute selector. If there are multiple elements with the same attribute value, only the first matching element on the page shall be identified. Syntax The syntax for attribute selector is as follows − const f = await page.$(“ul[name=”val”]”) Here, ul is the tagname and val is the value set for the name attribute. In the below image, let us obtain the text – About Tutorialspoint for the highlighted element − The attribute selector expression for the above element shall be li[class=”heading”]. 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 selectorAttribute(){ //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/about/about_careers.htm”) //identify element with attribute selector const n = await page.$(“li[class=”heading”]”) //obtain text const t = await (await n.getProperty(”textContent”)).jsonValue() console.log(“Obtained text is: ” + t) } selectorAttribute() 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 text of the element – About Tutorialspoint gets printed in the console. Print Page Previous Next Advertisements ”;

Puppeteer – Id Selector ”; Previous Next 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. An id attribute is generally unique in a page and can be used as an id selector. It is a very useful locator and speeds up the execution of automation tests in comparison to all the selectors. Syntax The syntax for Id selector is as follows − const n = await page.$(“#loc”) In the below example, let us identify the highlighted element having id txtSearchText and enter text into it. The id selector expression for the above element shall be #txtSearchText. 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 selectorId(){ //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 element with id const f = await page.$(“#txtSearchText”) //enter text f.type(“Puppeteer”) //wait for sometime await page.waitForTimeout(4000) //browser close await browser.close() } selectorId() 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 Print Page Previous Next Advertisements ”;

Puppeteer – Keyboard Simulation ”; Previous Next Puppeteer can perform keyboard simulation actions like pressing a key in the keyboard, pressing the up, down keys, and so on. All these are done using the keyboard method. Keyboard Methods Some of the keyboard methods are as follows − keyboard.press() This method is used to simulate a key press. The key to be pressed is passed as a parameter to this method. The syntax is as follows − Syntax keyboard.press(”Enter”) keyboard.type() This method is used to simulate entering text from the keyboard. The text to be entered is passed as a parameter to this method. The syntax is as follows − Syntax keyboard.type(”Puppeteer”) keyboard.sendCharacter() It is same as keyboard.type(). The syntax is as follows − Syntax keyboard.sendCharacter(”Puppeteer”) keyboard.up() This method is used to simulate pressing the up arrow from the keyboard. The syntax is as follows − Syntax keyboard.up() keyboard.down() This method is used to simulate pressing the down arrow from the keyboard. The syntax is as follows − Syntax keyboard.down() 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 keyboradSimulation(){ //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 edit box with id const f = await page.$(“#gsc-i-id1”) //enter text f.type(“Puppeteer”) //wait for sometime await page.waitForTimeout(4000) //press Enter await page.keyboard.press(”Enter”) //wait for sometime await page.waitForTimeout(4000) //identify element const t = await page.$(“.gsc-result-info”) //obtain text const text = await (await t.getProperty(”textContent”)).jsonValue() console.log(“Text is: ” + text) } keyboradSimulation() 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 text obtained on pressing Enter after entering Puppeteer – About 39 results (0.15 seconds) gets printed in the console. Print Page Previous Next Advertisements ”;

Handling Edit Boxes & Checkboxes ”; Previous Next Let us understand how Puppeteer can handle edit boxes. Handling Edit Boxes Puppeteer is capable of handling edit boxes. An edit box has an HTML tag as input and its type attribute is set to the value as text. Some methods to work with edit boxes are listed below − type() This method is used to input text into an edit box and text area without replacing the already present content. Syntax The syntax for type() is as follows − const n = await page.$(“#txt”) await n.type(“Puppeteer”) We can enter text in an edit box with some delay. This is done by adding the parameter {delay:time interval}. The time interval is expressed in the milliseconds. Syntax The syntax for the same is as follows − await page.type(“[class=”loc”]”, “Tutorialspoint”, {delay:700}) To delete a text entered in an edit box, we have to perform the click event three times on the field(with the parameter clickCount) and then press backspace. It is similar to selecting all values in an edit box and then pressing backspace. Syntax The syntax is given below − const n = await page.$(“#txt”) await n.type(“Puppeteer”) await n.click({clickCount: 3}); await page.keyboard.press(”Backspace”) To get value entered in an edit box, 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) In the below image, let us input the text Puppeteer and then clear it. To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which is 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 enterText(){ //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 edit box const f = await page.$(“#gsc-i-id1”) //enter text f.type(“Puppeteer”) //clear text entered await f.click({clickCount: 3}) //wait for sometime await page.waitForTimeout(4000) await page.keyboard.press(”Backspace”) //browser close await browser.close() } enterText() 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 Handling Checkboxes We can handle checkboxes in the UI while automating a test using Puppeteer. The checkboxes are identified in the html code with the tagname as input and type as checkbox. Some methods to work with checkboxes are given below − click() It is used to check and uncheck a checkbox. This method is a part of the ElementHandle class. Syntax The syntax of click() is as follows − const n = await page.$(“#txt”) n.click() To verify if a checkbox is checked, we have to use the getProperty method and pass value as a parameter to this field. It returns a Boolean value(true if checked, false if not). const v = await (await n.getProperty(“checked”)).jsonValue() console.log(v) 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 headless 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 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 command given below − 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 the getProperty(“checked”) which returns true as the checkbox is selected. Print Page Previous Next Advertisements ”;

Puppeteer – Handling Links/Button ”; Previous Next Puppeteer is capable of handling a link/button on a page. Before clicking an element we must be able to uniquely identify it with the help of any of the locators. In Puppeteer, we can click an element only if its dimensions are greater than zero pixel. In the below image, we shall click on the below highlighted link – Subscribe to Premium Plan having tagname as h1 − 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 clickElement(){ //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 then click await page.click(”h1”); //get page title after click console.log(await page.title()) } clickElement() 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 title – Tutorials Point Paid Subscription Packages – Tutorialspoint obtained after clicking the link – Subscribe to Premium Plan gets printed in the console. Print Page Previous Next Advertisements ”;

Puppeteer – Handling Frames ”; Previous Next The frames in an html code are represented by the frames/iframe tag. Puppeteer can handle frames by switching from the main page to the frame. To work with elements inside a frame, first we have to identify the frame with the help of locators. The method contentFrame is used to access the elements inside the frame. Syntax The syntax to handle frames is as follows − const f = await page.$(“frame[name=”frame-bottom”]”) const m = await f.contentFrame() Let us see the html code of an element inside a frame and obtain the text – BOTTOM inside it. The tagname highlighted in the above image is frame and the value of its name attribute is frame-bottom. 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 frameHandle(){ //launch browser in headless mode const browser = await pt.launch() //browser new page const page = await browser.newPage() //launch URL await page.goto(”https://the-internet.herokuapp.com/nested_frames”) //identify frame const f = await page.$(“frame[name=”frame-bottom”]”) //move to frame const x = await f.contentFrame(); //identify element inside frame const n = await x.$(“body”) //get text const v = await (await n.getProperty(“textContent”)).jsonValue() console.log(v) } frameHandle() Step 4 − Execute the code with the command − node <filename> So in our example, we shall run the command − node testcase1.js After the command has been successfully executed, the text within the frame – BOTTOM gets printed in the console. Print Page Previous Next Advertisements ”;

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 ”;