Category: puppeteer

Puppeteer – Usage of Google ”; Previous Next Puppeteer usages are listed below − Puppeteer can be used for scrapping contents from a webpage. The scrapping means pulling out data from a particular website. Puppeteer can be used to capture screenshots. It can be used to export web pages in the form of a PDF. Puppeteer does not require an external driver or library. It can be run on the actual browser in a headless mode. It can be used as a good alternative to other browser automation tools like Selenium or Cypress. Sometimes, puppeteer features are even better than both of them. It is super-fast in execution and can be used to execute tests in headless and headed modes. Puppeteer has a very agile community support having more than 60,000 starts in GitHub. Refer the link given herewith: https://github.com/puppeteer/puppeteer Puppeteer supports headless execution and hence it can be used in platforms like Unix, Linux, Cloud, AWS, and so on. It can be used to crawl a SPA (Single Page Application) and produce pre-rendered content. The crawling means saving a local static object of a webpage and utilising it offline in the absence of the real webpage obtained from the internet. It can be used for the automating majority of UI testing, keyboards, mouse movements, form submissions etc. Puppeteer can be used to construct a recent, automated test environment. It can run tests on the latest version Chrome by utilising the most recent features of JavaScript and browser. Puppeteer can be used to obtain the timeline trace of a web application to determine its performance. Moreover, it can be used to check the Chrome Extensions and to obtain the coverage of HTML and CSS utilized by a webpage. Print Page Previous Next Advertisements ”;

Puppeteer – Element Handling ”; 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.$$ and page.$x. These objects refer to an element or tag in a page. Puppeteer 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 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 as follows − 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 mentioned 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 class = “gsc-input”, text to the left of = is the attribute name (class) and to the right of = is the attribute value (gsc-input). 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. Print Page Previous Next Advertisements ”;