Articles
8/9/2022
10 minutes

How To Start With Puppeteer And HTTP Tracing

Written by
Copado Team
Table of contents

 Puppeteer  is a Node library that allows a high-Level API to control Chrome over the DevTools protocol. Basically, everything you do manually in the browser can be done via Puppeteer.  For example, you can:

  • Generate screenshots and PDFs of pages.
  • Automate form submissions, UI testing, and keyboard input.
  • Create an up-to-date, automated testing environment.
  • Capture a timeline trace to help you find performance issues.
  • Test Chrome extensions.

This article will focus on a simple step-by-step approach on how to start with Puppeteer and create a short HTTP trace, which logs all the web browser interactions.

Before you start

Before we start scripting, a couple of preconditions need to be in place:

  • Code editor
  • Install NPM, Node JS, Puppeteer

To start scripting a code editor needs to be available. Otherwise, it’s not possible to script and run code. Visual Studio Code is a great option if you don’t have a code editor installed on your device. It is free and available on Linux, MacOs, and Windows.

After installing our Code Editor, it’s time to install Node Js. This is necessary because Puppeteer is a Node library. When installing Node JS, a NPM will immediately be installed on the device.

Before we install Puppeteer, create a project directory:


C:\>mkdir iovio_test


C:\>cd iovio_test

 

Install Puppeteer in this project directory with the following command:


C:\iovio_test>npm i puppeteer

 

When the installation is done, it’s time to code!

Let’s start coding

First, let’s create an empty JavaScript file. When this is done, import the Puppeteer library by adding the following line:


const puppeteer = require('puppeteer');

 

Now, you can make use of the functions Puppeteer is offering. You’ll be able to start a Chrome browser, navigate to a specific page, and close the browser again:


const puppeteer = require('puppeteer');
(async () => {

// Opening a browser with the give arg.
const browser = await puppeteer.launch({
   headless: false,
   devtools: false,
   ignoreHTTPSErrors: true,
   args: [
       '--start-fullscreen',
       '--window-size=1920,1040',
       '--no-sandbox'
   ]
});

// Opening a new page
const page = await browser.newPage();

// Set windows height en width
await page.setViewport({ width: 1600, height: 900 });

// Navigate to specific url and wait till network traffic is idle
await page.goto('https://qualibrate.com', {waitUntil: "networkidle0"});

// Close the browser
await browser.close();
})();

 

Let’s check if this works by starting the script with the following command in your terminal. Don’t forget to use the file name of the file that you created. In this case this is test.js:


C:\iovio_test>node test.js

 

If your script runs successfully, you can add some extra steps and do a bit of navigation to the blog section of this web page. Your script will then look like the following:


const puppeteer = require('puppeteer');

(async () => {

// Opening a browser with the give arg.
const browser = await puppeteer.launch({headless: false, devtools: false, ignoreHTTPSErrors: true, args: [
   '--start-fullscreen',
   '--window-size=1920,1040',
   '--no-sandbox'
   ]});

// Opening a new page
const page = await browser.newPage();

// Set windows height en width
await page.setViewport({ width: 1600, height: 900 });

// Navigate to specific url and wait till network traffic is idle
await page.goto('https://qualibrate.com', {waitUntil: "networkidle0"});

// Click on menu item Blog
const menuElement = await page.$x("//a[contains(text(), 'Blog')]");
await menuElement[0].click();

await page.waitForNavigation({waitUntil: "networkidle0"});

// Close the browser
await browser.close();
})();

 

To test your script, you can use the following command in your terminal:


C:\iovio_test>node test.js

HTTP Tracing

If your script ran successfully, it’s time for the next step: Making HTTP tracing run during the execution time of the script. The first step is to add an extra package with the name puppeteer-har via NPM by the command:


C:\iovio_test>npm i puppeteer-har

 

When the package is finished downloading, you can extend your script with the following code at the top of the script. Your first two lines of code will look like this:


const puppeteer = require('puppeteer');
const PuppeteerHar = require('puppeteer-har');

 

After this is done, place the code below between the opening of a new page and then set the height and width of the window. In these couple of lines of code, you’ll create a timestamp for a unique filename and start the tracing:


//opening a new page
const page = await browser.newPage();

// Create a timestamp
var timestamp = (Date.now() / 1000 | 0);
const har = new PuppeteerHar(page);

// Start the HTTP Tracing
await har.start({ path: './'+timestamp+'results.har' });
console.log(`Har file started and profiling`);

// Set windows hight en width
await page.setViewport({ width: 1600, height: 900 });

 

To stop the HTTP tracing, add an extra line of code at the end of the script:


// Stop the HTTP Tracing
await har.stop();
console.log(`Stop Har file and save`);

await browser.close();

HAR Analyzer

After you run your script, a Har file is created. The format of the file is basically a JSON object with a particular field distribution. This example will use an online HAR Analyzer, but be careful. A Har file contains sensitive data, like all submitted information. For this example, we can use the HAR Analyzer from google.

Choose your file and open it. All the requests that happen during your recording will be visible in this analysis.

 

G Suite Toolbox

Summary

After following the steps above you are able to

  1. Setup your environment;
  2. Install the prerequisites to start with coding:
  3. Create a simple script that is opening a page in a browser and performs a navigation step.
  4. Starting a HTTP tracing which can be checked by a Har Analyzer.

 

Book a demo

About The Author

#1 DevOps Platform for Salesforce

We Build Unstoppable Teams By Equipping DevOps Professionals With The Platform, Tools And Training They Need To Make Release Days Obsolete. Work Smarter, Not Longer.

Making DevOps Easier and Faster with AI
Chapter 5: Automated Testing
Reimagining Salesforce Development with Copado's AI-Powered Platform
Planning User Acceptance Testing (UAT): Tips and Tricks for a Smooth and Enjoyable UAT
What is DevOps for Business Applications
Copado Integrates Powerful AI Solutions into Its Community as It Surpasses the 100,000 Member Milestone
Testing End-to-End Salesforce Flows: Web and Mobile Applications
How to get non-technical users onboard with Salesforce UAT testing
DevOps Excellence within Salesforce Ecosystem
Best Practices for AI in Salesforce Testing
6 testing metrics that’ll speed up your Salesforce release velocity (and how to track them)
Chapter 4: Manual Testing Overview
AI Driven Testing for Salesforce
AI-powered Planning for Salesforce Development
Chapter 3: Testing Fun-damentals
Salesforce Deployment: Avoid Common Pitfalls with AI-Powered Release Management
Exploring DevOps for Different Types of Salesforce Clouds
Copado Launches Suite of AI Agents to Transform Business Application Delivery
What’s Special About Testing Salesforce? - Chapter 2
Why Test Salesforce? - Chapter 1
Continuous Integration for Salesforce Development
Comparing Top AI Testing Tools for Salesforce
Avoid Deployment Conflicts with Copado’s Selective Commit Feature: A New Way to Handle Overlapping Changes
From Learner to Leader: Journey to Copado Champion of the Year
Enhancing Salesforce Security with AppOmni and Copado Integration: Insights, Uses and Best Practices
The Future of Salesforce DevOps: Leveraging AI for Efficient Conflict Management
A Guide to Using AI for Salesforce Development Issues
How to Sync Salesforce Environments with Back Promotions
Copado and Wipro Team Up to Transform Salesforce DevOps
DevOps Needs for Operations in China: Salesforce on Alibaba Cloud
What is Salesforce Deployment Automation? How to Use Salesforce Automation Tools
Maximizing Copado's Cooperation with Essential Salesforce Instruments
Future Trends in Salesforce DevOps: What Architects Need to Know
From Chaos to Clarity: Managing Salesforce Environment Merges and Consolidations
Enhancing Customer Service with CopadoGPT Technology
What is Efficient Low Code Deployment?
Copado Launches Test Copilot to Deliver AI-powered Rapid Test Creation
Cloud-Native Testing Automation: A Comprehensive Guide
A Guide to Effective Change Management in Salesforce for DevOps Teams
Building a Scalable Governance Framework for Sustainable Value
Copado Launches Copado Explorer to Simplify and Streamline Testing on Salesforce
Exploring Top Cloud Automation Testing Tools
Master Salesforce DevOps with Copado Robotic Testing
Exploratory Testing vs. Automated Testing: Finding the Right Balance
A Guide to Salesforce Source Control
A Guide to DevOps Branching Strategies
Family Time vs. Mobile App Release Days: Can Test Automation Help Us Have Both?
How to Resolve Salesforce Merge Conflicts: A Guide
Copado Expands Beta Access to CopadoGPT for All Customers, Revolutionizing SaaS DevOps with AI
Is Mobile Test Automation Unnecessarily Hard? A Guide to Simplify Mobile Test Automation
From Silos to Streamlined Development: Tarun’s Tale of DevOps Success
Simplified Scaling: 10 Ways to Grow Your Salesforce Development Practice
What is Salesforce Incident Management?
What Is Automated Salesforce Testing? Choosing the Right Automation Tool for Salesforce
Copado Appoints Seasoned Sales Executive Bob Grewal to Chief Revenue Officer
Business Benefits of DevOps: A Guide
Copado Brings Generative AI to Its DevOps Platform to Improve Software Development for Enterprise SaaS
Celebrating 10 Years of Copado: A Decade of DevOps Evolution and Growth
Copado Celebrates 10 Years of DevOps for Enterprise SaaS Solutions
5 Reasons Why Copado = Less Divorces for Developers
What is DevOps? Build a Successful DevOps Ecosystem with Copado’s Best Practices
Scaling App Development While Meeting Security Standards
5 Data Deploy Features You Don’t Want to Miss
Top 5 Reasons I Choose Copado for Salesforce Development
How to Elevate Customer Experiences with Automated Testing
Getting Started With Value Stream Maps
Copado and nCino Partner to Provide Proven DevOps Tools for Financial Institutions
Unlocking Success with Copado: Mission-Critical Tools for Developers
How Automated Testing Enables DevOps Efficiency
How to Keep Salesforce Sandboxes in Sync
How to Switch from Manual to Automated Testing with Robotic Testing
Best Practices to Prevent Merge Conflicts with Copado 1 Platform
Software Bugs: The Three Causes of Programming Errors
How Does Copado Solve Release Readiness Roadblocks?
Why I Choose Copado Robotic Testing for my Test Automation
How to schedule a Function and Job Template in DevOps: A Step-by-Step Guide
Delivering Quality nCino Experiences with Automated Deployments and Testing
Best Practices Matter for Accelerated Salesforce Release Management
Maximize Your Code Quality, Security and performance with Copado Salesforce Code Analyzer
Upgrade Your Test Automation Game: The Benefits of Switching from Selenium to a More Advanced Platform
Three Takeaways From Copa Community Day
Cloud Native Applications: 5 Characteristics to Look for in the Right Tools
Using Salesforce nCino Architecture for Best Testing Results
How To Develop A Salesforce Testing Strategy For Your Enterprise
What Is Multi Cloud: Key Use Cases and Benefits for Enterprise Settings
5 Steps to Building a Salesforce Center of Excellence for Government Agencies
Salesforce UI testing: Benefits to Staying on Top of Updates
Benefits of UI Test Automation and Why You Should Care
Types of Salesforce Testing and When To Use Them
Copado + DataColada: Enabling CI/CD for Developers Across APAC
What is Salesforce API Testing and It Why Should Be Automated
Machine Learning Models: Adapting Data Patterns With Copado For AI Test Automation
Automated Testing Benefits: The Case For As Little Manual Testing As Possible
Beyond Selenium: Low Code Testing To Maximize Speed and Quality
UI Testing Best Practices: From Implementation to Automation
How Agile Test Automation Helps You Develop Better and Faster
Salesforce Test Cases: Knowing When to Test
DevOps Quality Assurance: Major Pitfalls and Challenges
11 Characteristics of Advanced Persistent Threats (APTs) That Set Them Apart
7 Key Compliance Regulations Relating to Data Storage
Go back to resources
There is no previous posts
Go back to resources
There is no next posts

Explore more about

Salesforce Testing
Articles
December 6, 2024
Making DevOps Easier and Faster with AI
Articles
November 19, 2024
Chapter 5: Automated Testing
Articles
November 18, 2024
Reimagining Salesforce Development with Copado's AI-Powered Platform
Articles
November 8, 2024
Planning User Acceptance Testing (UAT): Tips and Tricks for a Smooth and Enjoyable UAT

Activate AI — Accelerate DevOps

Release Faster, Eliminate Risk, and Enjoy Your Work.
Try Copado Devops.

Resources

Level up your Salesforce DevOps skills with our resource library.

Upcoming Events & Webinars

Learn More

E-Books and Whitepapers

Learn More

Support and Documentation

Learn More

Demo Library

Learn More