Merge pull request #1 from pratik-thakur/main

Playwright typescript

Author: agrawalsaurabhs

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+playwright-report

README.md

@@ -1,2 +1,25 @@
 # typescript-playwright-browserstack
 Creating a sample repo for different Playwright languages and runners
+
+[Playwright](https://playwright.dev/docs/intro) Integration with BrowserStack.
+
+![BrowserStack Logo](https://d98b8t1nnulk5.cloudfront.net/production/images/layout/logo-header.png?1469004780)
+
+## Setup
+
+* Clone the repo and run `cd typescript-playwright-browserstack`
+* Set `BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY` as environment variables with your [BrowserStack Username and Access Key](https://www.browserstack.com/accounts/settings)
+* Run `npm i`
+
+## Running your tests
+
+- To run a sample test, run `npm run sample-test`
+
+## Run tests on locally hosted websites
+* Run a website on http://localhost:5500
+* Run `npm run sample-local-test`
+
+ Understand how many parallel sessions you need by using our [Parallel Test Calculator](https://www.browserstack.com/automate/parallel-calculator?ref=github)
+
+## Notes
+* You can view your test results on the [BrowserStack Automate dashboard](https://www.browserstack.com/automate)

browserstack.config.ts

@@ -0,0 +1,52 @@
+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');
+const util = require('util');
+
+// BrowserStack Specific Capabilities.
+// Set 'browserstack.local:true For Local testing
+const caps = {
+  browser: 'chrome',
+  os: 'osx',
+  os_version: 'catalina',
+  name: 'My first playwright test',
+  build: 'playwright-build',
+  'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'USERNAME',
+  'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'ACCESSKEY',
+  'browserstack.local': process.env.BROWSERSTACK_LOCAL || true, 
+  'client.playwrightVersion': clientPlaywrightVersion,
+};
+
+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 || 'ACCESSKEY',
+};
+
+// Patching the capabilities dynamically according to the project name.
+const patchCaps = (name, title) => {
+  let combination = name.split(/@browserstack/)[0];
+  let [browerCaps, osCaps] = combination.split(/:/);
+  let [browser, browser_version] = browerCaps.split(/@/);
+  let osCapsSplit = osCaps.split(/ /);
+  let os = osCapsSplit.shift();
+  let os_version = osCapsSplit.join(' ');
+  caps.browser = browser ? browser : 'chrome';
+  caps.os_version = browser_version ? browser_version : 'latest';
+  caps.os = os ? os : 'osx';
+  caps.os_version = os_version ? os_version : 'catalina';
+  caps.name = title;
+};
+
+exports.getCdpEndpoint = (name, title) => {
+    patchCaps(name, title)    
+    const cdpUrl = `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`
+    console.log(`--> ${cdpUrl}`)
+    return cdpUrl;
+}

global-setup.ts

@@ -0,0 +1,24 @@
+// global-setup.js
+const { bsLocal, BS_LOCAL_ARGS } = require('./browserstack.config');
+const { promisify } = require('util');
+const sleep = promisify(setTimeout);
+const redColour = '\x1b[31m';
+const whiteColour = '\x1b[0m';
+module.exports = async () => {
+  console.log('Starting BrowserStackLocal ...');
+  // Starts the Local instance with the required arguments
+  let localResponseReceived = false;
+  bsLocal.start(BS_LOCAL_ARGS, (err) => {
+    if (err) {
+      console.error(
+        `${redColour}Error starting BrowserStackLocal${whiteColour}`
+      );
+    } else {
+      console.log('BrowserStackLocal Started');
+    }
+    localResponseReceived = true;
+  });
+  while (!localResponseReceived) {
+    await sleep(1000);
+  }
+};

global-teardown.ts

@@ -0,0 +1,18 @@
+// global-teardown.js
+const { bsLocal } = require('./browserstack.config');
+const { promisify } = require('util');
+const sleep = promisify(setTimeout);
+module.exports = async () => {
+  // Stop the Local instance after your test run is completed, i.e after driver.quit
+  let localStopped = false;
+
+  if (bsLocal && bsLocal.isRunning()) {
+    bsLocal.stop(() => {
+      localStopped = true;
+      console.log('Stopped BrowserStackLocal');
+    });
+    while (!localStopped) {
+      await sleep(1000);
+    }
+  }
+}