Cross Browser Testing in Puppeteer: Tutorial

Puppeteer was initially turn only with functional testing and Chromium-based browsers in head. However, as the requirement increased, Puppeteer started to support many other browsers and their versions.

This article discusses in detail about puppeteer supported browser, extend the list of browsers and browser versions, how to apply cross-browser tests, and more.

What is Puppeteer?

Puppeteer is a NodeJS-based test Automation tool that supports JavaScript and TypeScript. It is a all open-source tool, managed by Google Team and active contributor.

High Level Architecture of Puppeteer

Puppeteer is primarily utilise for browser automation, web scraping, performance examination, and UI examination. Here are the components of Puppeteer architecture that facilitate its capabilities:

• Test script:Puppeteer Test Script needs to be pen in Java. The examination script mainly contains, calling Puppeteer bidding or API map, and the asseveration. In Puppeteer, you can use assertion libraries such as Jest, Mocha, Chai, etc.
• Puppeteer:Puppeteer in the above diagram is but a node package, which is installed by the QA. Puppeteernpmmodule provides various wrapper functions.
• Chrome DevTool Protocol: Chrome DevTools Protocolalso known as CDP in short, allow former instrument to instrument, debug and inspect Chromium-based browsers.
• Browser and Application:Browser renders the Application Under Test. Puppeteer so communicates to the browser over CDP protocol and fulfill the activity, events, etc. The process continues throughout the test script code.

Key Features of Puppeteer in the Browsers

Puppeteer supports several robust features for automation and testing while running in a browser. Here are the key lineament:

• WebSocket Connections: You can use WebSockets to connect to an be browser instance. However, direct browser launching or downloading may not be possible since it relies on Node.js APIs.
• Script Evaluation: Executes JavaScript code within the browser & # 8217; s context. This helps in page ingredient interaction, data descent, or dynamic content modification.
• Document Manipulation: This feature produces PDFs and screenshots of full web pages or specific sections for corroboration or reports.
• Page Management: Supports the creation, opening/closing, and management of multiple pages within a session, along with the navigation between page and pop-up handling.
• Cookie Handling: Enables inspecting, alter and grapple cooky within the browser session. It can likewise be levergaed for certification testing and session management.
• Network Control: Facilitates real-time monitoring of network activity and traffic. Intercepts and modifies network petition to model diverse conditions.

Puppeteer Supported Browsers

Puppeteer Supports Chromium-Based Browsers and Firefox. Below are the supported browsers.

• Chromium
• Google Chrome
• Microsoft Edge
• Firefox

Supported browser version list

For the complete lean of supported browser versions, you can concern to Puppeteer & # 8217; sofficial documentation.

What is Cross Browser Testing?

too called as Multi-Browser Testing, ensures that the set of functionality will be tested across multiple browsers. The primary advantage of cross-browser testing is, that it guarantee the Application works seamlessly across the browsers without any bug.

How to execute Cross Browser Testing habituate Puppeteer?

Puppeteer supports cross-browser testing. The same tests can be executed in Chromium, Chrome, Edge, and Firefox. In this article, we are excuse how to perform cross-browser testing using.

Pre-Requisite:

Let & # 8217; s consider Simple Testcase

1. Navigate to the Browsestack Home page
2. Click on Pricing Menu
3. Verify All the Plans are listed

Create a new Javascript file and write puppeteer code to verify the above scenario

//demo.test.js describe ('Browserstack Demo ', () = & gt; {jest.setTimeout (50000); beforeAll (async () = & gt; {await page.goto ('https: //www.browserstack.com/ ')}) it ('Verify Product Plans Pricing ', async () = & gt; {expect page.waitForTimeout (1000); await page.waitForSelector (' a [href= '' /pricing ''] '); await page.click (' a [href= '' /pricing ''] '); await page.waitForXPath ('//div [@ id= '' live-plans ''] /div/div [@ data-mobile-view= '' false ''] /div/div/div [@ class= '' plan-name ''] '); const planList = await page. $ x ('//div [@ id= '' live-plans ''] /div/div [@ data-mobile-view= '' false ''] /div/div/div [@ class= '' plan-name ''] '); let plan1 = await page.evaluate (el = & gt; el.textContent, planList [0]) let plan2 = await page.evaluate (el = & gt; el.textContent, planList [1]) let plan3 = await page.evaluate (el = & gt; el.textContent, planList [2]) expect (plan1.trim ()) .toBe ('Desktop ') expect (plan2.trim ()) .toBe ('Desktop & amp; Mobile ') expect (plan3.trim ()) .toBe ('Team ')})})

In this tutorial we are action the above test causa, in multiple browsers without modify the test script, precisely modify the config file

Puppeteer Tests on Chromium Browser

Once you install the Puppeteer npm packet, with the above-mentioned framework set up link the puppeteer by default installs the chromium binaries.

Navigate tojest-puppeteer.config.js

Mention the product gens as chrome

// jest-puppeteer.config.js module.exports = {launch: {headless: false, production: 'chrome ', args: [' -- start-maximized '], defaultViewport: {breadth: 1800, height: 1000},},}

Execute your exam

Execute your tryout with the below command

npx jest -c ./jest.config.js
For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Once you Enter the above bidding, the examination begin accomplish in Chromium Browser

How to Execute Puppeteer Test in Microsoft Edge

As Microsoft Edge is establish with Chromium Engine, the Puppeteer back accomplish tests in Microsoft Edge

To execute the Puppeteer tryout in Microsoft Edge, you need to specify the absolute path.

To Execute the puppeteer test in Microsoft Edge, you need to alterjest-puppeteer.config.js.

Add the executable remove theproduct and addexecutablePath.Specify the rank way of Microsoft Edge as below

// jest-puppeteer.config.js module.exports = {launching: {headless: false, executablePath: ' & lt; path_to_edge & gt; ', args: [' -- start-maximized '], defaultViewport: {breadth: 1800, tiptop: 1000},},} //Example Absolute Path // executablePath: ' C: \\Program Files (x86) \\Microsoft\\Edge\\Application\\msedge.exe '

Step 2: Execute your Puppeteer test using the below command

npx jest -c ./jest.config.js

How to Execute Puppeteer Test in Google Chrome Browser

As mentioned originally Puppeteer supports chromium-based browsers so it do support Google Chrome too. Here ’ s how you can run Puppeteer test in Google Chrome:

Step 1: Open thejest-puppeteer.config.js

Step 2: Remove theproductoption and add the new valuechannel: chromeas discussed below.

// jest-puppeteer.config.js module.exports = {launch: {headless: false, groove: 'chrome ', args: [' -- start-maximized '], defaultViewport: {width: 1800, height: 1000},},} 

Alternate Method to Execute Puppeteer Test in Chrome

In the above-mentioned method, we are append the channel gens as chrome. However, instead, you can just mention the executable route the same way as you mentioned for Microsoft edge.

// jest-puppeteer.config.js module.exports = {launch: {headless: false, executablePath: ' C: \\Program Files\\Google\\Chrome\\Application\\chrome.exe ', args: [' -- start-maximized '], defaultViewport: {breadth: 1800, pinnacle: 1000},},

Step 3: Execute your Puppeteer exam using the below command

npx jest -c ./jest.config.js

How to Run Puppeteer tryout in Firefox browser

Puppeteer also supports running tests in the Firefox browser. Puppeteer bestow firefox support as an experimental feature. Since it & # 8217; s notwithstanding an data-based state the test might not carry as look.

However, you can run the Puppeteer ctest with Firefox or Firefox Nightly build expend the steps below:

Run Puppeteer Test with Firefox Nightly build

Change thejest-puppeteer.config.jsconfiguration as described below

// jest-puppeteer.config.js module.exports = {launching: {headless: false, ware: 'firefox ', args: [' -- kiosk '], defaultViewport: {width: 1800, height: 1000},},}

Run Puppeteer Test with Firefox

Method 1:

Change thejest-puppeteer.config.jsconformation as described below

// jest-puppeteer.config.js module.exports = {launch: {headless: false, ware: 'firefox ', args: [' -- kiosk '], defaultViewport: {width: 1800, height: 1000},},}

Run Puppeteer Test with Firefox

Method 1:

Change thejest-puppeteer.config.jsconfiguration as described below

// jest-puppeteer.config.js module.exports = {launching: {headless: false, groove: 'firefox ', args: [' -- kiosk '], defaultViewport: {width: 1800, top: 1000},},}

Method 2:

Instead of the channel, you can also specify the Executable absolute localisation just like how you have execute for Microsoft edge. Like below

// jest-puppeteer.config.js module.exports = {launching: {headless: false, executablePath: ' C: \\Program Files\\Mozilla Firefox\\firefox.exe ', args: [' -- kiosk '], defaultViewport: {width: 1800, height: 1000},},}

Execute your Puppeteer exam
Use the below command to run Puppeteer test

npx jest -c ./jest.config.js

Puppeteer Cross Browser Testing Using BrowserStack

BrowserStack provides entree to 3500+ for testing, so that you can perform Puppeteer Cross Browser testing under existent user weather and get best truth in exam result.

To run Puppeteer tests on BrowserStack, you just need to modify yourjest-puppeteer.config.jsusing the below stairs:

Step 1: Get your AccessKey and Usernamefrom BrowserStack Accounts Page.

Step 2: Construct Configuration for BrowserStack

Open jest-puppeteer.config.js, Mention the details as described below

// jest-puppeteer.config.js const detonator = {'browser ': 'edge ', // Change the browser name chrome, firefox 'browser_version ': 'latest ', // Specify browser version 'os ': 'windows ', // Operating System os x, windows 'os_version ': '10 ', // os adaptation 10, 11 etc. (For windows), big sur, catalina etc. for Mac 'name ': 'Puppeteer-jest ', 'build ': 'puppeteer-jest-build-8 ', 'browserstack.username ': process.env.BROWSERSTACK_USERNAME || 'your_username ', 'browserstack.accessKey ': process.env.BROWSERSTACK_ACCESS_KEY || 'your_accesskey'}; module.exports = {launch: {headless: false, defaultViewport: {breadth: 1800, height: 1000},}, browserContext: 'default ', connect: {browserWSEndpoint: ` wss: //cdp.browserstack.com/puppeteer? caps= $ {encodeURIComponent (JSON.stringify (caps))} `,}}

Finally, Execute your Puppeteer test with the below command

npx jest -c ./jest.config.js

Note:If you hold configure thepackage.jsonshortcut, you can likewise usenpm run examination

Once Test execution is complete you can navigate to Dashboard, it will present you the detailed result.

Talk to an Expert

Conclusion

is crucial for any organisation as it ensure that the application act seamlessly across different browsers and operating system combinations. Testing summons of a web application is uncompleted without performing cross-browser testing. One can & # 8217; t deny the fact that cross browser and mark platform test motive high-cost infrastructure when built-in house. Hence, the squad has to make a choice between by analyzing the for the project.

While building an in-house browser farm is really expensive and it yet requires a lot of maintenance, actor like can be helpful as you can buy a subscription to access its with 3500+ devices and browsers.

BrowserStack provides the cloud-based testing substructure that facilitate the challenges related to cost and set up clip. You can easily integrate your existing Puppeteer tests and run them under for more accurate test results.

Utilitarian Resources for Puppeteer

Understanding Puppeteer:

Tools Comparisons:

Related Guides