[Feature] Add BrowserType.connect support in @playwright/test

[archlichking]

I'm trying to follow up https://www.browserstack.com/docs/automate/playwright, is there a way to setup wsEndpoint as a configuration in config file or in fixtures?

---

Edit: from the Playwright Team:

import base, { chromium } from '@playwright/test';

// caps is copied from browserstack guide
const caps = {
  browser: 'chrome',
  os: 'osx',
  os_version: 'catalina',
  name: 'My first playwright test',
  build: 'playwright-build-1',
  'browserstack.username': process.env.BROWSERSTACK_USERNAME
  'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY,
  'client.playwrightVersion': '1.13.1',
};

export const visitorTestFixture = base.extend<{}>({
  browser: async ({ browser }, use, workerInfo) => {
    const vBrowser = await chromium.connect({
      wsEndpoint:
        `wss://cdp.browserstack.com/playwright?caps=` +
        `${encodeURIComponent(JSON.stringify(caps))}`,
    });
    await use(vBrowser);
    await vBrowser.close();
  },
});

[JoelEinbinder]

You can override the browser fixture to connect via browserless, but we do not currently have simple way to configure a remote browser.

[archlichking]

Good to know, can you provide me an example?

[unlikelyzero]

@JoelEinbinder @mxschmitt given the number of browser-hosting providers out there AND the number of teams migrating from selenium-based frameworks, I think this feature / functionality would be critical for widespread adoption of playwright-test.

https://aerokube.com/moon/
https://www.browserless.io/
https://www.browserstack.com/
https://saucelabs.com/
https://crossbrowsertesting.com/
https://headlesstesting.com/
etc.

[unlikelyzero]

@archlichking I used the following config without playwright-test:

const pw = require('playwright');

const browser = await pw.chromium.connectOverCDP({
    endpointURL: 'wss:/<target_chrome_cdp>'
});

[unlikelyzero]

Note: linking #8432

[mxschmitt]

(archlichking the comment was deleted because it contained credentials)

[archlichking]

(@mxschmitt thanks for the check up). Here is the sanitized code

import base, { chromium } from '@playwright/test';

// caps is copied from browserstack guide
const caps = {
  browser: 'chrome',
  os: 'osx',
  os_version: 'catalina',
  name: 'My first playwright test',
  build: 'playwright-build-1',
  'browserstack.username': process.env.BROWSERSTACK_USERNAME
  'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY,
  'client.playwrightVersion': '1.13.1',
};

export const visitorTestFixture = base.extend<{}>({
  browser: async ({ browser }, use, workerInfo) => {
    const vBrowser = await chromium.connect({
      wsEndpoint:
        `wss://cdp.browserstack.com/playwright?caps=` +
        `${encodeURIComponent(JSON.stringify(caps))}`,
    });
    await use(vBrowser);
    await vBrowser.close();
  },
});

[karanshah-browserstack]

@mxschmitt Any timelines on when this would be picked up?

[AndreyMelnichenko]

When I am using page fixture with browser into Moon

import { BrowserContext, BrowserContextOptions, chromium, devices, Page, test as base } from '@playwright/test';
import { MainPage } from '../../../src/pages/MainPage';

let customCfg: BrowserContextOptions = {
    viewport: { width: 1905, height: 977 },
    locale: 'en-US',
};
let context: BrowserContext;
let page: Page;

export const test = base.extend<{ mainPage: MainPage }>({
    mainPage: async ({ browser, browserName }, use, testInfo) => {
        browser = await chromium.connect(
            `ws://192.168.49.2:4444/playwright/${browserName}/playwright-1.15.0?headless=false&name=${testInfo.title}`,
            {
                timeout: 30000,
            },
        );
        if (!testInfo.project.name.includes('Desktop')) {
            customCfg = {
                ...customCfg,
                ...devices['iPhone 12'],
                viewport: { width: 390, height: 669 },
            };
            context = await browser.newContext(customCfg);
        } else {
            context = await browser.newContext();
        }

        page = await context.newPage();
        await page.goto(testInfo.project.use.baseURL);
        const mainPage = new MainPage(page);
        await mainPage.pageLoaded();
        await use(mainPage);
        await browser.close();
    },
});

and have spec with test which runs one by one,
if one of middle of list would filed then all others marked as skipped.
I've tried execute them with test.describe.parallel but it crushed too.
Can you help me to resolve it?

[CruelAddict]

This issue also seems to be the reason for some actions, such as goto, click and type, absent from a playwright report when using a remote browser.

import { test as base, expect, chromium } from '@playwright/test';

const test = base.extend({
  browser: async ({ }, use) => use(await chromium.connect(
    `wss://aerokube-moon.somewhere-locally/playwright/chromium/playwright-1.19.2`
  ))
  // Works fine with a local browser:
  // browser: async ({ }, use) => use(await chromium.launch())
})

test.describe('Debug', () => {
  test('should show me steps in the report', async ({ page }) => {
    await page.goto('https://google.com');
    await page.locator('body').click();
    await expect(page.locator('body')).toBeVisible();
  });
});

Here's the actual report for the snippet above:

And the expected report I receive when using a local browser:

[lo1tuma]

Hasn’t this been solved already? If I understand the documentation there is a connectOptions config property where the wsEndpoint can be set.

[unlikelyzero]

Hasn’t this been solved already? If I understand the documentation there is a connectOptions config property where the wsEndpoint can be set.

It's only possible if you override and extend the base class in a separate fixture. It becomes quite complicated when you have multiple setups using playwright test

[mxschmitt]

This is implemented now via use: { connectOptions: { wsEndpoint: "..." } } which you can set inside the config see here.

For further questions please file new issues.