Run Playwright test from behind proxies
A guide to running Playwright 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 playwright script would not be able to reach the CDP endpoint of BrowserStack which is invoked from within the playwright.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 Playwright 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 Playwright 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):
const expect = require('chai').expect
const { chromium } = require('playwright');
const cp = require('child_process');
const clientPlaywrightVersion = cp.execSync('npx playwright --version').toString().trim().split(' ')[1];
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', // allowed browsers are `chrome`, `edge`, `playwright-chromium`, `playwright-firefox` and `playwright-webkit`
'os': 'osx',
'os_version': 'catalina',
'name': 'My first playwright test',
'build': 'playwright-build-1',
'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY',
'client.playwrightVersion': clientPlaywrightVersion // Playwright version being used on your local project needs to be passed in this capability for BrowserStack to be able to map request and responses correctly
};
const browser = await chromium.connect({
wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`,
});
const page = await browser.newPage();
await page.goto('https://www.google.com/ncr');
const element = await page.$('[aria-label="Search"]');
await element.click();
await element.type('BrowserStack');
await element.press('Enter');
const title = await page.title('');
console.log(title);
try {
expect(title).to.equal("BrowserStack - Google Search", '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
Is this page helping you?
Yes
No
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!
