Puppeteer, a Node.js library for browser automation, supports Firefox alongside Chrome, enabling cross-browser testing. It provides developers with tools to automate tasks like UI testing, performance monitoring, and web scraping. Integrating Firefox with Puppeteer allows you to expand your test coverage and ensure compatibility for a wider range of users.
This guide explains how to set up Puppeteer with Firefox and run automated tests to ensure seamless functionality across browsers.
What is Puppeteer?
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.
Read More: Cross Browser Testing in Selenium: Tutorial
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.
Why Use Puppeteer with Firefox?
Firefox, being one of the most widely used browsers, ensures that web applications function seamlessly for a broader user base.
Using Puppeteer with Firefox has many benefits, some of them are:
- Enhanced Cross-Browser Testing: Using Puppeteer with Firefox enables effortless cross-browser testing, ensuring web applications work seamlessly for a wider audience.
- Early Detection of Issues: Integration helps identify browser-specific issues early, improving application reliability.
- Consistent API: Puppeteer’s Firefox support offers a consistent API similar to Chrome, allowing developers to reuse scripts with minimal changes.
- Time and Effort Savings: Reusing existing Puppeteer scripts reduces development effort and speeds up the testing process.
- Streamlined Testing: Combining Puppeteer and Firefox ensures efficient and accurate testing across multiple browsers.
Also Read: Cross Browser Testing in Puppeteer: Tutorial
How to run Puppeteer tests in Firefox
Running Puppeteer tests in Firefox allows developers to expand their testing capabilities to one of the most widely used browsers. With Puppeteer’s built-in support for Firefox, you can write and execute automated scripts seamlessly.
Prerequisites for Puppeteer tests in Firefox
To get started, ensure you have a basic Puppeteer framework set up in your project. This involves installing Puppeteer via Node.js and verifying that your Puppeteer version supports Firefox.
Steps to run Puppeteer tests in Firefox
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=firefoxStep 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.
Note: If npm install puppeteer doesn’t install the firefox binaries, then delete your node_modules folder and run the npm install puppeteer command again.
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.
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))}`,
}
}Note: Copy ‘browserstack.username’ and ‘browserstack.accessKey’ from BrowserStack Account page. Github Page Documents all different sets of capability options.
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
Read More: How to start with Puppeteer Debugging
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.
Best Practices for Testing with Puppeteer and Firefox
Here are some key best practices for testing with Puppeter and Firefox:
- Keep Puppeteer and Firefox Updated: Use the latest versions to ensure compatibility and access new features.
- Enable Debugging: Use debugging tools to identify and resolve test issues effectively.
- Handle Firefox-Specific Quirks: Be aware of differences in Firefox’s behavior and adapt your scripts accordingly.
- Use Modular Test Design: Write reusable and maintainable test functions to simplify script updates.
- Monitor Network Requests: Track and validate all API calls and static file loads to catch errors early.
Useful Resources for Puppeteer
Understanding Puppeteer:
- Puppeteer Framework Tutorial: Basics and Setup
- How to start with Puppeteer Debugging
- How to install and setup Puppeteer with npm (NodeJS)
- Puppeteer Type Command: How to type a text in input box in Puppeteer
- Cross Browser Testing in Puppeteer: Tutorial
- Understanding Puppeteer Headless
- How to run UI Automation Testing using Puppeteer
- How to capture Lazy Loading Images for Visual Regression Testing in Puppeteer
- How to use Proxy in Puppeteer?
- How to run Tests in Puppeteer with Firefox
- How to Perform Visual Regression Puppeteer
- Handling Alerts and Popups in Puppeteer
- Pyppeteer Tutorial: Guide to Puppeteer in Python (with Examples)
Tools Comparisons:
- Puppeteer vs Selenium: Core Differences
- Cypress vs Selenium vs Playwright vs Puppeteer: Core Differences
- Cypress vs Puppeteer: Core Differences
- Playwright vs Puppeteer: Which to choose in 2024?
- Top 10 Puppeteer Alternatives
Conclusion
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.
Featured Article
