Run Puppeteer test from behind proxies
A guide to running Puppeteer tests on BrowserStack from behind a proxy
What is the use case?
If you are behind a corporate proxy then it is likely that your puppeteer script would not be able to reach the CDP endpoint of BrowserStack which is invoked from within the puppeteer.connect method. To make it work, you’d need to make some additional configuration settings at your end and that is exactly what is explained in this document.
If the website that you want to test is also behind a proxy then you would need to set up BrowserStack Local with additional config parameters in addition to following the instructions as mentioned in this document.
Configuration to enable Puppeteer testing on BrowserStack from behind a proxy
We would be using the global-agent npm package for the configuration. You have to ensure that the package is installed as a dev-dependency by running:
npm i --save-dev global-agent
The next step is to set the following environment variable in your system with the relevant proxy-host, proxy-port and proxy credential (if any):
export GLOBAL_AGENT_HTTP_PROXY=http://someuser:test123@127.0.0.1:3128
In the above example proxy-host is 127.0.0.1, proxy-port is 3128, proxy-username is someuser and proxy-password is test123. Please ensure that you set this environment variable with the correct values as relevant for your system, before starting the tests.
Running the Puppeteer test on BrowserStack using the proxy config
The following sample script makes use of the global0-agent npm package and calls bootstrap() which takes care of proxy and ensures that the test runs without any hurdles (you can also find this sample script in this GitHub repository):
'use strict';
const { strict } = require('once');
const puppeteer = require('puppeteer');
const expect = require('chai').expect;
const { bootstrap } = require('global-agent');
// Have to set this environment variable with required data before executing this script
// export GLOBAL_AGENT_HTTP_PROXY=http://someuser:test123@127.0.0.1:3128
bootstrap();
(async () => {
const caps = {
'browser': 'chrome',
'browser_version': 'latest',
'os': 'os x',
'os_version': 'big sur',
'build': 'puppeteer-build-1',
'name': 'My first Puppeteer test',
'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY'
};
const browser = await puppeteer.connect({
browserWSEndpoint:
`wss://cdp.browserstack.com/puppeteer?caps=${encodeURIComponent(JSON.stringify(caps))}`,
});
/*
* BrowserStack specific code ends here
*/
const page = await browser.newPage();
await page.goto('https://www.duckduckgo.com');
const element = await page.$('[name="q"]');
await element.click();
await element.type('BrowserStack\n');
await element.press('Enter');
await page.waitForNavigation();
const title = await page.title('');
console.log(title);
try {
expect(title).to.equal("BrowserStack at DuckDuckGo", 'Expected page title is incorrect!');
// following line of code is responsible for marking the status of the test on BrowserStack as 'passed'. You can use this code in your after hook after each test
await page.evaluate(_ => {}, `browserstack_executor: ${JSON.stringify({action: 'setSessionStatus',arguments: {status: 'passed',reason: 'Title matched'}})}`);
} catch {
await page.evaluate(_ => {}, `browserstack_executor: ${JSON.stringify({action: 'setSessionStatus',arguments: {status: 'failed',reason: 'Title did not match'}})}`);
}
await browser.close();
})();
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!