Merge pull request #5 from browserstack/TM-1928

playwright

Author: bipul21

playwright-test/README.md

@@ -0,0 +1,41 @@
+# Testing with playwright-browserstack in Test Runner
+
+[Playwright](https://playwright.dev/) Integration with BrowserStack.
+
+![BrowserStack Logo](https://d98b8t1nnulk5.cloudfront.net/production/images/layout/logo-header.png?1469004780)
+
+## Setup
+
+* Clone the repo and run `cd playwright-test`
+* Run `npm install`
+
+## Running your tests
+
+- To run a single test, run `npm test`
+
+  ### Run sample test on privately hosted websites
+
+    **Using Command-line Interface**
+    1. You have to download the BrowserStack Local binary from the links below (depending on your environment):
+        * [OS X (10.7 and above)](https://www.browserstack.com/browserstack-local/BrowserStackLocal-darwin-x64.zip)
+        * [Linux 32-bit](https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-ia32.zip)
+        * [Linux 64-bit](https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip)
+        * [Windows (XP and above)](https://www.browserstack.com/browserstack-local/BrowserStackLocal-win32.zip)
+    2. Once you have downloaded and unzipped the file, you can initiate the binary by running the command: `./BrowserStackLocal --key YOUR_ACCESS_KEY`
+    3. Once you see the terminal say "[SUCCESS]" You can now access your local server(s) in our remote browser”, your local testing connection is considered established.
+    4. You can then run the sample Local test using `npm run test:local`
+    5. To generate JUnit-XML report, run the sample Local test using - `npm run test:report`
+    6. Direct Command to generate JUnit-XML report, run the sample Local test using - PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --config=./playwright-local.config.js --reporter=junit
+    7. results.xml is the name of the Junit-XML which will be geenrated
+
+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)
+
+## Additional Resources
+* [Documentation for writing Automate test scripts with BrowserStack](https://www.browserstack.com/docs/automate/playwright)
+
+## To Generate Report
+* [Documentation for writing Automate test scripts with BrowserStack](https://www.browserstack.com/docs/automate/playwright)

playwright-test/browserstack.err

@@ -0,0 +1 @@
+[object Object]

playwright-test/fixtures.js

@@ -0,0 +1,90 @@
+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');
+
+// BrowserStack Specific Capabilities.
+const caps = {
+  browser: 'chrome',
+  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',
+  'browserstack.local': process.env.BROWSERSTACK_LOCAL || false,
+  '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 || 'YOUR_ACCESS_KEY',
+};
+
+// 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.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);
+const isUndefined = val => (val === undefined || val === null || val === '');
+const evaluateSessionStatus = (status) => {
+  if (!isUndefined(status)) {
+    status = status.toLowerCase();
+  }
+  if (status === "passed") {
+    return "passed";
+  } else if (status === "failed" || status === "timedout") {
+    return "failed";
+  } else {
+    return "";
+  }
+}
+
+exports.test = base.test.extend({
+  page: async ({ page, playwright }, 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))}`,
+      });
+      const vContext = await vBrowser.newContext(testInfo.project.use);
+      const vPage = await vContext.newPage();
+      await use(vPage);
+      const testResult = {
+        action: 'setSessionStatus',
+        arguments: {
+          status: evaluateSessionStatus(testInfo.status),
+          reason: nestedKeyValue(testInfo, ['error', 'message'])
+        },
+      };
+      await vPage.evaluate(() => {},
+      `browserstack_executor: ${JSON.stringify(testResult)}`);
+      await vPage.close();
+      await vBrowser.close();
+    } else {
+      use(page);
+    }
+  },
+});

playwright-test/global-setup.js

@@ -0,0 +1,24 @@
+// global-setup.js
+const { bsLocal, BS_LOCAL_ARGS } = require('./fixtures');
+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);
+  }
+};

playwright-test/global-teardown.js

@@ -0,0 +1,18 @@
+// global-teardown.js
+const { bsLocal } = require('./fixtures');
+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);
+    }
+  }
+};

playwright-test/local.log

@@ -0,0 +1 @@
+