Category: puppeteer

Puppeteer – Xpath Functions ”; 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 there are duplicate attributes or no attribute for an element, then the function text() is used to identify an element. In order to use the text() function, it is mandatory that the element should have a text visible on the page. Syntax The syntax for the use of text() function is as follows − //tagname[text()=”visible text on element”] If the value of an element or the text is partially dynamic in nature or very lengthy, we can use the contains() function. In order to use the contains() function, it is mandatory that the element should either have an attribute value or a text. Syntax The syntax for the use of contains() function is as follows − //tagname[contains(@attribute,”value”)] //tagname[contains(text(),”visible text on element”)] If the text of an element begins with a particular text, we can use the starts-with() function to it. Syntax The syntax for the use of starts-with() function is as follows − //tagname[starts-with(text(),”visible text on element”) In all the above functions, tagname is optional. Instead of tagname, we can use the symbol *. In the below image, let us identify the element – Library with the help of its displayed text and then click on it. The xpath for the element shall be //*[text()=”Library”]. 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 – 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 selectorFunTextXpath(){ //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 function – text() then click const b = (await page.$x(“//*[text()=”Library”]”))[0] b.click() //wait for sometime await page.waitForTimeout(4000) //obtain URL after click console.log(await page.url()) } selectorFunTextXpath() 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 element Library – https://www.tutorialspoint.com/tutorialslibrary.htm gets printed in the console. Print Page Previous Next Advertisements ”;

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