Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG]browserType.connect: WebSocket error: certificate has expired when running in pipeline

See original GitHub issue

Context:

Playwright Version: 1.20.0
Operating System: [Linux Docker]
Browser: All
Extra:Only fails when running a drone.io pipeline

Code Snippet

    browserType.connect: WebSocket error: certificate has expired
    =========================== logs ===========================
    <ws connecting> wss://cdp.browserstack.com/playwright?caps=%7B%22browser%22%3A%22chrome%22%2C%22os%22%3A%22OSX%22%2C%22os_version%22%3A%22Big%20Sur%22%2C%22name%22%3A%22Authentication%3A%20Should%20go%20to%20forgot%20password%20page%20if%20link%20clicked%22%2C%22build%22%3A%22Get%20My%20Boat%20Full%20Regression%20Test%2011%2F04%2F2022%22%2C%22project%22%3A%22Get%20My%20Boat%20Web%20Tests%22%2C%22browserstack.username%22%3A%22adambethlehem_AGClxt%22%2C%22browserstack.accessKey%22%3A%22D5mRrTaKgHPzpsvhVXAL%22%2C%22browserstack.local%22%3Afalse%2C%22client.playwrightVersion%22%3A%221.20.0%22%2C%22browserstack.networkLogs%22%3Atrue%2C%22browserstack.debug%22%3Atrue%2C%22browserstack.console%22%3A%22verbose%22%2C%22browser_version%22%3A%22latest%22%7D
    <ws error> [object Object]
    <ws connect error> wss://cdp.browserstack.com/playwright?caps=%7B%22browser%22%3A%22chrome%22%2C%22os%22%3A%22OSX%22%2C%22os_version%22%3A%22Big%20Sur%22%2C%22name%22%3A%22Authentication%3A%20Should%20go%20to%20forgot%20password%20page%20if%20link%20clicked%22%2C%22build%22%3A%22Get%20My%20Boat%20Full%20Regression%20Test%2011%2F04%2F2022%22%2C%22project%22%3A%22Get%20My%20Boat%20Web%20Tests%22%2C%22browserstack.username%22%3A%22000000000%22%2C%22browserstack.accessKey%22%3A%0000000000000000%22%2C%22browserstack.local%22%3Afalse%2C%22client.playwrightVersion%22%3A%221.20.0%22%2C%22browserstack.networkLogs%22%3Atrue%2C%22browserstack.debug%22%3Atrue%2C%22browserstack.console%22%3A%22verbose%22%2C%22browser_version%22%3A%22latest%22%7D certificate has expired
    <ws disconnected> wss://cdp.browserstack.com/playwright?caps=%7B%22browser%22%3A%22chrome%22%2C%22os%22%3A%22OSX%22%2C%22os_version%22%3A%22Big%20Sur%22%2C%22name%22%3A%22Authentication%3A%20Should%20go%20to%20forgot%20password%20page%20if%20link%20clicked%22%2C%22build%22%3A%22Get%20My%20Boat%20Full%20Regression%20Test%2011%2F04%2F2022%22%2C%22project%22%3A%22Get%20My%20Boat%20Web%20Tests%22%2C%22browserstack.username%22%3A%22adambethlehem_AGClxt%22%2C%22browserstack.accessKey%22%3A%22D5mRrTaKgHPzpsvhVXAL%22%2C%22browserstack.local%22%3Afalse%2C%22client.playwrightVersion%22%3A%221.20.0%22%2C%22browserstack.networkLogs%22%3Atrue%2C%22browserstack.debug%22%3Atrue%2C%22browserstack.console%22%3A%22verbose%22%2C%22browser_version%22%3A%22latest%22%7D code=1006 reason=
    ============================================================

        at Object.page [as fn] (/drone/src/fixtures.js:64:50)`

Description The test run fine when hitting browserstack from my local machine, when running in drone, I am experiencing certificate errors

fixture.js

const base = require('@playwright/test');
const cp = require('child_process');
const clientPlaywrightVersion = cp
  .execSync('npx playwright --version')
  .toString()
  .trim()
  .split(' ')[1];
const BrowserStackLocal = require('browserstack-local');
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = dd + '/' + mm + '/' + yyyy;
// BrowserStack Specific Capabilities.
const caps = {
  browser: 'chrome',
  os: 'osx',
  os_version: 'catalina',
  name: 'My first playwright test',
  build: 'Get My Boat Full Regression Test ' + today,
  project: 'Get My Boat Web Tests',
  'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'USERNAME',
  'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'ACCESS_KEY',
  'browserstack.local': process.env.BROWSERSTACK_LOCAL || false,
  'client.playwrightVersion': clientPlaywrightVersion,
  'browserstack.networkLogs': true,
  'browserstack.debug': true,
  'browserstack.console': 'verbose'
  
};

exports.bsLocal = new BrowserStackLocal.Local();

// replace YOUR_ACCESS_KEY with your key. You can also set an environment variable - "BROWSERSTACK_ACCESS_KEY".
exports.BS_LOCAL_ARGS = {
  key: process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY',
};

// Patching the capabilities dynamically according to the project name.
const patchCaps = (name, title) => {
  let combination = name.split(/@browserstack/)[0];
  let [browserCaps, osCaps] = combination.split(/:/);
  let [browser, browser_version] = browserCaps.split(/@/);
  let osCapsSplit = osCaps.split(/ /);
  let os = osCapsSplit.shift();
  let os_version = osCapsSplit.join(' ');
  caps.browser = browser ? browser : 'chrome';
  caps.browser_version = browser_version ? browser_version : 'latest';
  caps.os = os ? os : 'osx';
  caps.os_version = os_version ? os_version : 'catalina';
  caps.name = title;
  
};

const isHash = (entity) => Boolean(entity && typeof(entity) === "object" && !Array.isArray(entity));
const nestedKeyValue = (hash, keys) => keys.reduce((hash, key) => (isHash(hash) ? hash[key] : undefined), hash);

exports.test = base.test.extend({
  page: async ({ page, playwright, context }, use, testInfo) => {
    // Use BrowserStack Launched Browser according to capabilities for cross-browser testing.
    if (testInfo.project.name.match(/browserstack/)) {
      patchCaps(testInfo.project.name, `${testInfo.title}`);
      const vBrowser = await playwright.chromium.connect({
        wsEndpoint:
          `wss://cdp.browserstack.com/playwright?caps=` +
          `${encodeURIComponent(JSON.stringify(caps))}`,
      });
        context = await vBrowser.newContext({
        storageState: "cookies/banner.json",
        viewport: {width:1900, height: 940}
    });
      const vPage = await context.newPage(testInfo.project.use);
      await vPage.goto('url');
      await use(vPage);
      const testResult = {
        action: 'setSessionStatus',
        arguments: {
          status: testInfo.status,
          reason: nestedKeyValue(testInfo, ['error', 'message'])
        },
      };
      await vPage.evaluate(() => {},
      `browserstack_executor: ${JSON.stringify(testResult)}`);
      await vPage.close();
      await vBrowser.close();
    } else {
      use(page);
    }
  },
});
exports.testOwner = base.test.extend({
  page: async ({ page, playwright, context }, use, testInfo) => {
    // Use BrowserStack Launched Browser according to capabilities for cross-browser testing.
    if (testInfo.project.name.match(/browserstack/)) {
      patchCaps(testInfo.project.name, `${testInfo.title}`);
      const vBrowser = await playwright.chromium.connect({
        wsEndpoint:
          `wss://cdp.browserstack.com/playwright?caps=` +
          `${encodeURIComponent(JSON.stringify(caps))}`,
      });
        context = await vBrowser.newContext({
        storageState: "cookies/owner_cookie.json",
        viewport: {width:1900, height: 940}
    });
      const vPage = await context.newPage(testInfo.project.use);
      await vPage.goto(url);
      await use(vPage);
      const testResult = {
        action: 'setSessionStatus',
        arguments: {
          status: testInfo.status,
          reason: nestedKeyValue(testInfo, ['error', 'message'])
        },
      };
      await vPage.evaluate(() => {},
      `browserstack_executor: ${JSON.stringify(testResult)}`);
      await vPage.close();
      await vBrowser.close();
    } else {
      use(page);
    }
  },
});

exports.testRenter = base.test.extend({
  page: async ({ page, playwright, context }, use, testInfo) => {
    // Use BrowserStack Launched Browser according to capabilities for cross-browser testing.
    if (testInfo.project.name.match(/browserstack/)) {
      patchCaps(testInfo.project.name, `${testInfo.title}`);
      const vBrowser = await playwright.chromium.connect({
        wsEndpoint:
          `wss://cdp.browserstack.com/playwright?caps=` +
          `${encodeURIComponent(JSON.stringify(caps))}`,
      });
        context = await vBrowser.newContext({
        storageState: "cookies/renter_cookie.json",
        viewport: {width:1900, height: 940}
    });
      const vPage = await context.newPage(testInfo.project.use);
      await vPage.goto(url);
      await use(vPage);
      const testResult = {
        action: 'setSessionStatus',
        arguments: {
          status: testInfo.status,
          reason: nestedKeyValue(testInfo, ['error', 'message'])
        },
      };
      await vPage.evaluate(() => {},
      `browserstack_executor: ${JSON.stringify(testResult)}`);
      await vPage.close();
      await vBrowser.close();
    } else {
      use(page);
    }
  },
});`


CONFIG
`// playwright.config.js
// @ts-check
const { devices } = require('@playwright/test');

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  testDir: 'test',
  testMatch: '**/*.test.ts',
  timeout: 120000, //Playwright Test enforces a timeout for each testP
  actionTimeout: 5000,
  navigationTimeout: 5000,
  expect: {timeout:5000},
  workers:1,
  globalSetup: require.resolve('./global-setup-staging'),
  use:{
    extraHTTPHeaders: { 
      "User-Agent": "'AGENT'"
     },
    baseURL: url,
    ignoreHTTPSErrors: false,
    httpCredentials: { username: 'username', password: 'password', }
  },
  projects: [
    // -- BrowserStack Projects --
    // name should be of the format browser@browser_version:os os_version@browserstack
    {
      name: 'chrome@latest:Windows 10@browserstack',
      use: {
        browserName: 'chromium',
        channel: 'chrome',
      },
    },
    // {
    //   name: 'chrome@latest:Windows 10@browserstack',
    //   use: {
    //     browserName: 'chromium',
    //     channel: 'chrome',
    //   },
    // },
    {
      name: 'chrome@latest:OSX Big Sur@browserstack',
      use: {
        browserName: 'chromium',
        channel: 'chrome',
      },
    },
};
module.exports = config;

Add any other details about the problem here.