Puppeteer with Firefox

Table of content

Puppeteer with Firefox
Choosing Chrome or Firefox on Run time in Puppeteer script

Puppeteer with Firefox

Yes, it is possible to work with puppeteer with firefox, but we need to use a different node package to work work with firefox.

Puppeteer support for Firefox is still in experimental stage

Puppeteer is developed by Google's team, but in the current situation, Firefox also has a majority share of users along with chrome. All the supported API's can be found at is puppeteer firefox ready
webbrowser-trend-firefox-puppeteer

I am also shocked by seeing the above trend, I was thinking that Firefox has about 25% of share but in actual it has only 6.1%.

Anyways, let's not stop this tutorial just because of the trend. Will learn about installing puppeteer for firefox.

Install the puppeteer for firefox
```
npm install puppeteer-firefox
```
installation might take a few seconds to minutes based on your internet speed.

Write this sample firefox puppeteer code into your file and save it.

const puppeteerFirefox = require('puppeteer-firefox');
(async () => {
  const browser = await puppeteerFirefox.launch({headless:false});
  const page = await browser.newPage();
  await page.goto('https://chercher.tech');
  await page.screenshot({path: 'chercher-tech.png'});
  await browser.close();
})();

Run the puppeteer code using node command with the filename

node filename.js
//in our case, we saved file as sample-firefox.js
node sample-firefox.js

firefox-puppeteer

Please be aware, puppeteer firefox comes with its own Firefox browser, which means that puppeteer will not use the Firefox browser present in your machine.

Emulate Mobile with Puppeteer

Choosing Chrome or Firefox on Run time in Puppeteer script

In testing, we perform the same testing in a different browser and devices for devices we can use the emulator but for using a different browser we might need to switch between the browser based on the arguments that we pass.

These ways of choosing the browser are important to run because we want to run the same tests on different browsers based on the parameter we pass. More technical people will call this a Factory pattern.

Node arguments:

Node arguments are nothing but the command that we are using to run the code, not only that command but also the parameters that we mention along with it.

For Example, consider the below code, which used to run puppeteer from the node.

node sample-firefox.js

node is the command to mention where to run the app.
sample-firefox.js is the file name

Process the Node arguments [Using process.argv]:

In the above, we have seen what is node parameter but it will not enough for us for this tutorial, we have to know how to parse or get those node arguments in our program.

The simplest way of retrieving arguments in Node.js is via the process.argv array. This is a global object that you can use without importing any additional libraries to use it. You simply need to pass arguments to a Node.js application, just like we showed earlier, and these arguments can be accessed within the application via the process.argv array.

The first element of the process.argv array will always be a file system path pointing to the node executable. The second element is the name of the JavaScript file that is being executed. And the third element is the first argument that was actually passed by the user.

Now let's write a simple Node script that prints all of the command line arguments passed to the application, along with their index. Copy and paste the following code to a file named sample-firefox.js

for (let j = 0; j < process.argv.length; j++) {  
    console.log(j + ' -> ' + (process.argv[j]));
}

read-node-parameters-puppeteer If you notice param 2 in the output of the above images, I have passed browser=firefox, the same kind of method we will be using for choosing the browser.

Code for opening the browser based on the parameter passed.

const puppeteer = require('puppeteer');
const puppeteerFirefox = require('puppeteer-firefox');
var browserName = process.argv.join(" ").split("browser")[1].split(" ")[0].replace("=","")
async function chooseBrowser(){
  if(browserName.toLowerCase() == "chrome"){
    return await puppeteer.launch({headless:false})
  }else if(browserName.toLowerCase() == "firefox"){
    return await puppeteerFirefox.launch({headless:false})
  }
}
async function run(){
    const browser = await chooseBrowser()
    const page = await browser.newPage();
    await page.goto('https://chercher.tech');
    await browser.close();
}
run()

I hope you are able to understand the above program. But anyway let me give a brief explanation for it.

chooseBrowser() : this method chooses which browser to open
const browser : We make the browser constant so that any programmer will not be able to change the browser during the execution. If we declare a browser without using chooseBrowser() then we might need to assign the browser after making a decision of browser, this is the primary reason why I have used a separate method to decide the browser.
I hope the remaining code you can follow along.

Browser Commands in Puppeteer

Puppeteer with Firefox