checkly/puppeteer-examples – GitHub
Deprecation notice: We are moving our efforts to, a new free & open source knowledge base for Puppeteer AND Playwright. Idea is the same: practical examples and guides, by the community. We — the team at Checkly — are going to pour a lot of love & care into this new project. Feel free to contribute!
Puppeteer Headless Chrome examples for real life use cases. Clone this repo and run them directy with a simple node command.
git clone cd puppeteer-examples
npm i
node 2. \ search/
You can run these scripts in the puppeteer sandbox.
1. basics
alerts
Download file / upload file
emulate devices
get the value of common form elements
get list of links
get text value of an element
get title
hover
keyboard
location_faker
mouse
pdf
request interception
screenshots
screenshots clipped
set cookie
2. search
Amazon search
search
Duck Duck Go search
Youtube search
3. login
Github
Google Social Login
Instagram
Microsoft Live Login
4. shopping-carts
Staples shopping cart
Walmart shopping cart
5. parallel-pages
Screenshots parallel pages
Screenshots parallel pages in batches
a. mocha-tests
Alibaba product search
Amazon product search
Etsy shopping cart
Gmail signup
Google search
b. jest-tests
The very basic on getting useful info from web page. Highlights the basic Puppeteer functions.
Create an alert dialog and close it again.
1. basics/
Find an image by class selector, downloads the image, saves it to disk and read it again. Use this together with a. fileUpload() method.
Use the built in devices descriptors to emulate an Iphone 6. These are actually shortcuts for calling tUserAgent() and tViewPort().
Gets the value of commonly used HTML form elements using page. $eval()
Scrapes Hacker News for links on the home page and returns the top 10
Gets the text value of an element by using the page. $eval method
Get the title of a page and print it to the console.
The hover function is a combination of scrolling and putting the mouse into a hover state over the requested element. This example hovers the first track we find on the homepage, which should trigger the play and like buttons to be visible
types into a text editor
Fake the location for the geolocation API used by the browsers
Most of the things you can click using straight () handlers, but for some situation directly instructing the mouse might be convenient. This example load a page that plays back what mouse actions are used on the page.
Renders a PDF of the Puppeteer API spec. This is a pretty long page and will generate a nice, A4 size multi-page PDF.
Uses Puppeteer request interception, blocks images from loading, then snaps a basic screenshot of the full New York Time homepage and saves it a file.
Snaps a basic screenshot of the full New York Time homepage and saves it a file.
Grabs and clips out just the stock tickers on the Yahoo finance page
Sets the “login_email” property in a Paypal cookie so the login screen is pre-filled with an email address.
Common search input and select methods on search results.
Looks for a “nyan cat pullover” on, goes two page two clicks the third one.
2. search/
Finds accommodations in Berlin on, takes a screenshot and logs the top 10.
undefined
Looks for Fleetwood Mac’s “Dreams” video on and clicks on the third video. Waits for 5 seconds for the video to load.
Common login scenarios on popular website. Credentials mostly supplied with setting ENV variables.
Logs into Github. Provide your username and password as environment variables when running the script, i. e: GITHUB_USER=myuser GITHUB_PWD=mypassword node
3. login/
Logs into Checkly using Google social Login. e: GOOGLE_USER=myuser GOOGLE_PWD=mypassword node
Logs into Instagram with credentials. e: INSTAGRAM_USER=myuser INSTAGRAM_PWD=mypassword node
Logs into MS Live. e: linux: MSLIVE_USER=myuser MSLIVE_PWD=mypassword node Windows users: SET MSLIVE_USER=myuser SET MSLIVE_PWD=mypassword node for more info see here: 3. login/
How to handle shopping cart functions like adding and removing items.
Goes to the face paint category and adds to the shopping cart.
4. shopping-carts/
Looks for a Nintendo’s Mario Odyssey and adds it to the shopping cart.
How to handle Allow parallel processing pages.
Allow parallel processing screenshot
5. parallel-pages/
parallel screenshotting of an array of Websites with small example
A. mocha-tests
Mocha test runner scripts that use Puppeteer and the standard assert library to check specific properties and actions on a page. They can be executed like:
cd “a. mocha-tests”
npx mocha
Searches for a product and checks if the results show up
a. mocha-tests/
Goes to, creates a new sandbox and selects the template
Goes to, searches for “chrome puppeteer”, asserts the result and snaps a screenshots
Goes to, select the first knick knack and adds it to the shopping cart.
Checks the signup flow from the landing page. Clicks the
Searches for a term and checks if the first link matches. This check should fail.
Goes to and adds a some facepaint to an empty shopping cart. Validates the correct amount.
Goes to and adds a Nintendo game to an empty shopping cart. Validates the correct amount.
B. jest-tests
Jest test runner scripts that use Puppeteer to check specific properties and actions on a page. Very similar to the Mocha tests, but using the Jest expect assertions. Install Jest as a global dependency and run them as any other script
npm i -g jest
jest jest-tests/
b. jest-tests/
b. jest-tests/
Puppeteer vs Selenium: Core Differences | BrowserStack
Even though both Puppeteer and Selenium serve the same purpose of facilitating automation testing, a comparison of them is helpful for developers and testers seeking to choose the right tool for their requirements, whether project-based or long-term. This article will explore their strengths as automation test frameworks and allow readers to make an informed choice between them. Introduction to PuppeteerPuppeteer is a Node library that provides a high-level API to control headless Chrome over the DevTools Protocol. Also known as a Headless Chrome Node API, it is useful for automating the Chrome browser to run website damentally, Puppeteer is an automation tool and not a test tool. This simply means it is incredibly popular for use cases such as scraping, generating PDFs, etc. Puppeteer uses Chrome DevTools protocol and the debugger protocol for Selenium is JSONWire. Both are used to perform clicks. In the case of practice Puppeteer and Selenium, use the same code for performing ominent Features of PuppeteerThe most prominent features supported by Puppeteer are as follows:Screenshot TestingPerformance TestingWeb ScrapingEasy AutomationLimitations of PuppeteerThe complexity and automation context are changing with each passing day and hence, one tool might not be the solution for all. Puppeteer has some limitations like, it supports only Chrome browser. Puppeteer for Firefox is a work in troduction to SeleniumSelenium automates browsers. Primarily, it is for automating web applications for testing purposes but is certainly not limited to just that. It supports numerous features that are helpful for automation testing. Selenium supports multiple programming languages and platforms. It also supports testing on multiple major browsers in global, let’s understand the pros and cons of SeleniumPros of Selenium:Open source and freely availableIntegrated with CI, and AgileSupports cross-browser, a wide range of OS and programming languagesHas huge community support along with a large library and extensionsCons of Selenium:Steep learning curveDoesn’t support built-in image comparisonExplore the various features of Selenium with this Selenium WebDriver tutorial. Try Selenium Testing for FreeMarket Trends on Selenium and PuppeteerThe image below depicts that Selenium’s popularity is long-established and keeps growing. That doesn’t imply that Puppeteer is not popular. It is especially popular when it comes to automating the Chrome are unique in their own ways Selenium does take an edge over Puppeteer in terms of overall popularity and urceSetup and Test Implementation of Puppeteer and SeleniumSelenium and Puppeteer are the two automation testing tools that can be directly installed using install Selenium, type the following command in the terminal:npm install selenium-webdriverAnother way is to study and use the Selenium Installation here. Here, creating a driver and using it is easy—the syntax is verbose compared to the alternatives but still pretty straightforward:The example below located the Yahoo sign up page using the Xpath (“);
ndElement((“//input[@id=’usernamereg-firstName’]”)). sendKeys(“Your-Name”); // Will send values to First Name tab
ndElement((“//input[@id=’usernamereg-lastName’]”)). sendKeys(“Your-Last_name”); //xpath for last name box
ndElement((“//input[@id=’usernamereg-yid’]”)). sendKeys(“”); //xpath for email box
Now, on to Puppeteer. To install Puppeteer, type the command below in the terminal:npm install puppeteerNow, let’s locate the same sign-up page using the Puppeteer syntax:await (‘);
await (‘button’);
await (‘#sign-up’, ‘your_name’);
await (‘[type=email]’, ‘your_email’);People also read: How to Build and Execute Selenium ProjectsPuppeteer vs Selenium: Core DifferencesPuppeteerSeleniumPuppeteer was developed by Google and runs the script on ChromiumSelenium is the library that is used to automate Chrome. This library is open-source and provides a high-level API to control ChromeIs a libraryIs a web framework for testing web applicationsWorks only with Chrome or Chromium and does not support other browsers. Supports multiple browsers like Chrome, IE, Firefox, Safari, etc. Cross-platform support is provided across all the available browsersWas released in 2017Was released in 2004Supports only Node. jsSupports multiple languages like Python, Ruby, Javascript, Java, pports only web automationSupports web automation and mobile automationScreenshot can be taken of both PDFs and imagesScreenshot can be taken of both PDFs and images only in Selenium 4Selenium or Puppeteer: Which is the preferred one? Considering all the above factors, Puppeteer is the go-to tool if devs and testers are specifically working with Google Browser alone. But considering the fact that cross-browser testing must be conducted across platforms and using multiple programming languages, Selenium is the best fit for automation testing. It comes with library support for multiple programming languages, drivers for different browsers, and is not always about cross-browser support or platform support, sometimes other functionalities like record and playback for testing web applications matter a lot. That’s something Selenium supports. The code can be re-used, and also it is loaded with packages and test suites. It is considered to be a tool that is the best fit for Automation testing. As ease of access and configuration is pretty simple, one doesn’t have to download Selenium like a piece of software. But they might need some of its components to run tests on automated browser instances on their own get a hang of this, simply head over to Automate Documentation. Pick a language and/or framework you typically work with. Follow the steps to install the components required, and run a couple of sample tests. It is easy to acquire a functional understanding of Selenium automation testing in no to test websites on real browsers and devices? Take a look at BrowserStack Automate, which offers instant access to a cloud Selenium Grid and 2000+ browsers and real desktop and mobile running the code detailed above using Selenium. Bear in mind that Selenium tests must be run on a real device cloud to get completely accurate results. BrowserStack’s cloud Selenium grid of 2000+ real browsers and devices allows testers to automated visual UI tests in real user conditions. Simply sign up, select a device-browser-OS combination, and start running tests for free.
Headless browser – Wikipedia
A headless browser is a web browser without a graphical user interface.
Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but they are executed via a command-line interface or using network communication. They are particularly useful for testing web pages as they are able to render and understand HTML the same way a browser would, including styling elements such as page layout, colour, font selection and execution of JavaScript and Ajax which are usually not available when using other testing methods. [1]
Since version 59 of Google Chrome[2][3] and version 56[4] of Firefox, [5] there is native support for remote control of the browser. This made earlier efforts obsolete, notably PhantomJS. [6]
Use cases[edit]
The main use cases for headless browsers are:
Test automation in modern web applications (web testing)
Taking screenshots of web pages.
Running automated tests for JavaScript libraries.
Automating interaction of web pages.
Other uses[edit]
Headless browsers are also useful for web scraping. Google stated in 2009 that using a headless browser could help their search engine index content from websites that use Ajax. [7]
Headless browsers have also been misused in various ways:
Perform DDoS attacks on web sites. [8]
Increase advertisement impressions. [9]
Automate web sites in unintended ways[10] e. g. for credential stuffing. [11]
However, a study of browser traffic in 2018 found no preference by malicious actors for headless browsers. [3] There is no indication that headless browsers are used more frequently than non-headless browsers for malicious purposes, like DDoS attacks, SQL injections or cross-site scripting attacks
Usage[edit]
As several major browsers natively support headless mode through APIs, some software exists to perform browser automation through a unified interface. These include:
Selenium WebDriver – a W3C compliant implementation of WebDriver[12]
Playwright – a library to automate Chromium, Firefox and WebKit[13]
Puppeteer – a library to automate Chrome[14]
Test Automation[edit]
Some test automation software and frameworks include headless browsers as part of their testing apparati. [3]
Capybara uses headless browsing, either via WebKit or Headless Chrome to mimic user behavior in its testing protocols. [15]
Jasmine uses Selenium by default, but can use WebKit or Headless Chrome, to run browser tests. [16]
Alternatives[edit]
Another approach is to use software that provides browser APIs. For example, Deno provides browser APIs as part of its design. For, jsdom[17] is the most complete provider. While most are able to support common browser features (HTML parsing, cookies, XHR, some JavaScript, etc. ), they do not render the DOM and have limited support for DOM events. They usually perform faster than full browsers, but are unable to correctly interpret many popular websites. [18][19][20]
Another is HtmlUnit, a headless browser written in Java. HtmlUnit uses the Rhino engine to provide JavaScript and Ajax support as well as partial rendering capability. [21][22]
List of headless browsers[edit]
These are various software that provide headless browser APIs.
Splash is a headless web browser written in Python using the WebKit layout engine via Qt. It has an HTTP API, Lua scripting support and a built-in IPython (Jupyter)-based IDE. Development started at ScrapingHub in 2013; it is partially funded by DARPA. [23][24]
is a simulated browser environment for [25]
SimpleBrowser is a headless web browser written in C# supporting Standard 2. 0[26]
DotNetBrowser is a proprietary Chromium-based library that provides the off-screen rendering mode and can be used without embedding or displaying windows. [27][28]
Another noted earlier effort was envjs in 2008 from John Resig, which was a simulated browser environment written in JavaScript for the Rhino engine. [29]
See also[edit]
Headless computer
References[edit]
^ “What is a headless browser? “.
^ “Getting Started with Headless Chrome”.
^ a b c Bekerman, Dima (2018-11-28). “Headless Chrome: DevOps Love It, So Do Hackers, Here’s Why | Imperva”. Blog. Retrieved 2021-02-22.
^ “Firefox 56 release notes”.
^ “Headless mode – browser support”.
^ “Quick Start”.
^ Mueller, John (2009-10-07). “Official Google Webmaster Central Blog: A proposal for making AJAX crawlable”. Official Google Webmaster Central Blog.
^ Rawlings, Matt (2013-11-20). “Headless Browser Botnet Used in 150 hour DDoS attack”. Business 2 Community.
^ Mello Jr., John P. (2014-03-25). “Headless Web Traffic Threatens Internet Economy”.
^ Raywood, Dan (2014-04-01). “Headless browsers: legitimate software that enables attack”. ITProPortal.
^ Mueller, Neal. “Credential stuffing”.
^ Sheth, Himanshu (2020-11-17). “Selenium 4 Is Now W3C Compliant: All You Need To Know”.
^ “GitHub – Playwright”. Retrieved 2021-04-11.
^ “Github – Puppeteer”. Retrieved 2021-04-11.
^ Silva, Francisco (2019-05-29). “From capybara-webkit to Headless Chrome and ChromeDriver”. Blog | Imaginary Cloud. Retrieved 2021-02-22.
^ Bintz, John. “jasmine-headless-webkit — The fastest way to run your Jasmine specs! “. Retrieved 2021-02-22.
^ “JSDOM at GitHub – Pretending to be a visual browser”. Retrieved 2021-04-18.
^ “assaf/zombie”. GitHub.
^ “ヘルペスが口や目からうつる？感染した時の症状と病院の治療方法とは”.. Archived from the original on 2015-02-23. Retrieved 2015-03-13.
^ “JavaScriptMVC – EnvJS”.
^ Mike Bowler. “HtmlUnit – Welcome to HtmlUnit”.
^ “Platform (Vaadin 7. 3. 4 API)”. 6 November 2014.
^ “scrapinghub/splash”. GitHub.
^ “Archived copy”. Archived from the original on 2015-05-28. Retrieved 2015-05-28. CS1 maint: archived copy as title (link)
^ “Zombie”.
^ SimpleBrowserDotNet/SimpleBrowser, SimpleBrowserDotNet, 2021-02-10, retrieved 2021-02-22
^ DotNetBrowser Examples, TeamDev, 2021-03-12, retrieved 2021-03-12
^ “DotNetBrowser”. TeamDev. 2021-05-05.
^ Resig, John (2008-10-12). “env-js: A pure-JavaScript browser environment” – via GitHub.
Frequently Asked Questions about puppeteer examples
What is puppeteer?
Puppeteer is a Node library that provides a high-level API to control headless Chrome over the DevTools Protocol. Also known as a Headless Chrome Node API, it is useful for automating the Chrome browser to run website tests. Fundamentally, Puppeteer is an automation tool and not a test tool.Mar 26, 2021
What is headless browser example?
For example, Deno provides browser APIs as part of its design. … Another is HtmlUnit, a headless browser written in Java. HtmlUnit uses the Rhino engine to provide JavaScript and Ajax support as well as partial rendering capability.
How do I find a puppeteer?
Click inside the search input field, type the keyword we want to search and press enter on our keyboard. You can install Puppeteer recorder Chrome extension to easily get the HTML selectors instead of getting it manually.