How to run Tests in Puppeteer with Firefox

Puppeteer is a NodeJS-based framework, it is Open source and maintained by Google. Puppeteer allows us to write the tests using Javascript or Typescript. 

The Chrome DevTools protocol is an API specification that allows you to interact with the Chromium and Blink-based browsers. The puppeteer uses the DevTools Protocol to provide the automation capability by using a thin wrapper around it.

Puppeteer is successful in the UI Test automation world because of its core advantages: 

• Speed: Puppeteer provides good speed for automation tests.
• Security: Puppeteer provides security over malicious pages.
• Stability: Puppeteer tests are more stable compared to any other framework, more stable also means that your tests are less flaky
• Simplicity: Puppeteer provides a thin wrapper around chrome DevTools Protocol, which makes it easy to understand, debug and use.

When compared with Selenium, Puppeteer was initially designed to perform functional testing for Chromium-based browsers with high reliability. However, Selenium is more focused on cross-browser capability. 

Due to high demand from users, Puppeteer extended its support to Firefox. However, Puppeteer Firefox support is still in the experimental stage, Puppeteer tests can be run on Firefox Nightly build.

How to run Puppeteer tests in Firefox

Pre-requisites:

• Set up basic Puppeteer Framework

Step 1: To run Puppeteer tests with Firefox, set the environment variable for Puppeteer firefox using:

Windows Command Line

set PUPPETEER_PRODUCT=firefox

Windows Powershell / Visual Studio Code Terminal

$env:PUPPETEER_PRODUCT=firefox

Mac/ Linux terminal

export PUPPETEER_PRODUCT=firefox

Step 2: After setting the environment variable, install Puppeteer again using the following command

npm i puppeteer

After executing the above command, Puppeteer should download Firefox nightly builds binaries on your local machine.

Step 3: Navigate to your project, jest-puppeteer.config.js file, and change the “product” option to firefox using the following command

// jest-puppeteer.config.js

module.exports = {

launch: {

  headless: false,

  product: 'firefox',

   defaultViewport :{width: 1700, height: 800 }

  },

  browserContext: 'default',

}

Once you make the above configuration in your jest-puppeteer.config.js file,  Puppeteer Firefox is ready to execute the tests.

Step 4: Execute your Puppeteer-Jest tests with firefox using the below command.

npx jest -c ./jest.config.js

Tests start executing and you will see the results on the command line.

Test on Real Device Cloud

Execute a Puppeteer Firefox Tests on Browserstack

To run the Puppeteer Firefox Test on real devices and browsers, SignUp on BrowserStack and follow the below steps. 

Step 1: Configure jest-puppeteer.config.js

Once tests execution on your machine are successful, you can execute the same tests on 

BrowserStack with a few additions listed below

jest-puppeteer.config.js.

In the jest-puppeteer.config.js  file add capabilities, and connect. The complete jest-puppeteer.config.js file looks like the one below.

// jest-puppeteer.config.js

const caps_firefox = {

  'browser': 'firefox',

  'browser_version': 'latest',

  'os': 'windows',

  'os_version': '10',

  'name': 'Puppeteer-jest test on Firefox',

  'build': 'puppeteer-jest-build-3',

  'browserstack.username': process.env.BROWSERSTACK_USERNAME || ' 'your_user_name',

  'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || ' your_access_key'

};


module.exports = {

  launch: {

    headless: false,

    product: 'firefox',

    defaultViewport :{width: 1700, height: 800},

    devtools:true

 },

  browserContext: 'default',

   connect: {

     browserWSEndpoint: `wss://cdp.browserstack.com/puppeteer?caps=${encodeURIComponent(JSON.stringify(caps_firefox))}`,

   }

}

Step 2: Add the test case as seen below

//demo.test.js

describe('Browserstack Demo', () => {

    jest.setTimeout(50000);

    beforeAll(async () => {

        await page.goto('https://www.browserstack.com/')

    })

    it('Verify Product Submenus', async () => {

        await page.click('#product-menu-toggle');

        const el = await page.$('ul[class="horizontal-list product-menu"] > li > div > div  > ul ');

        const text = await page.evaluate(el => el.innerText, el);

        await expect(text).toContain('Interactive cross browser testing')

        await expect(text).toContain('Percy')

        await expect(text).toContain('Automate')

        await expect(text).toContain('Percy New')

        await expect(text).toContain('Visual testing & review')

    })

})

Step 3: Execute your scripts

If you have configured a shortcut in package.json enter the test command to execute the tests.

npm run test

Alternatively, you can also specify 

npx jest -c ./jest.config.js

After completion of execution, we can see the result in the Browserstack Dashboard

Step 4: To view the Results in the Browserstack dashboard, 

Login to BrowserStack and navigate to BrowserStack Automate Dashboard >> Choose the build, and you will see the complete snapshot of your test.

Bear in mind, that Firefox support for Puppeteer is limited. Also, unlike Chrome Puppeteer tests, Firefox may not be very stable. However gradually Puppeteer is experimenting with the Firefox option and it holds potential in the future. Firefox browser support for Puppeteer opens a new world of cross-browser testing for the Puppeteer framework.

Run Puppeteer Tests on Real Devices