Adding playwright test documentation

README.md

@@ -97,6 +97,19 @@ If you are using Jest to run your Playwright tests, you can run all your playwri
 5. If you are trying to run your own Jest tests on BrowserStack, then you need to ensure that you have configured the `connectOptions` and `browsers` as shown in the `module.exports` of the config file.
 6. Run the sample jest script using `npm test` which runs the test `google.test.js` across 3 browsers in BrowserStack serially. Your can also configure Jest to run your tests in parallel.
 
+## Playwright with Test Runner
+
+If you are using Playwright Test Runner to run your Playwright tests, you can run all your playwright-test tests on BrowserStack as well. Follow the steps below to run the sample tests in this repository:
+
+1. Clone this repository using `git clone https://github.com/browserstack/playwright-browserstack.git` (if not already done).
+2. Go inside the directory playwright-test using `cd playwright-test`
+3. Install the dependencies using `npm install`
+4. Put in your credentials in the file `fixtures.js` in the caps part.
+5. If you are trying to run your own tests on BrowserStack, then you need to ensure that you have configured the `projects` correctly in `playwright.config.js` file.
+6. Run the sample test script using `npm test` which runs all the tests inside tests directory across 5 browsers in BrowserStack.
+7. If you want to test against localhost or other private websites, then run the sample test script using `npm run test:local` which runs all the tests inside tests directory across 5 browsers in BrowserStack.
+8. If you want to run your tests locally, you just need to configure the `projects` without name `@browserstack` in `playwright.config.js` file.
+
 ## Facing issues?
 
 If you are facing any issue with any of the above or any other issue in trying to run your Playwright tests on BrowserStack, you can [reach out to support](https://www.browserstack.com/contact#technical-support), select product as `Automate` and post your query there.

codeceptjs-example/package.json

@@ -15,6 +15,6 @@
         "@codeceptjs/examples": "^1.2.1",
         "@codeceptjs/ui": "^0.4.3",
         "codeceptjs": "^3.0.6",
-        "playwright": "1.13.1"
+        "playwright": "~1.13.1"
     }
 }

package.json

@@ -2,7 +2,10 @@
   "devDependencies": {
     "browserstack-local": "^1.4.8",
     "global-agent": "^3.0.0",
-    "playwright": "1.13.1"
+    "playwright": "~1.13.1"
+  },
+  "engines": {
+    "node": ">=12.7.0"
   },
   "dependencies": {
     "chai": "^4.3.4"

playwright-jest/package.json

@@ -11,6 +11,6 @@
   "devDependencies": {
     "jest": "^27.0.3",
     "jest-playwright-preset": "^1.6.0",
-    "playwright": "1.13.1"
+    "playwright": "~1.13.1"
   }
 }

playwright-test/fixtures.js

@@ -0,0 +1,84 @@
+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) => {
+  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 = name;
+};
+
+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({
+  browser: async ({ playwright, browser }, use, workerInfo) => {
+    // Use BrowserStack Launched Browser according to capabilities for cross-browser testing.
+    if (workerInfo.project.name.match(/browserstack/)) {
+      patchCaps(workerInfo.project.name);
+      const vBrowser = await playwright.chromium.connect({
+        wsEndpoint:
+          `wss://cdp.browserstack.com/playwright?caps=` +
+          `${encodeURIComponent(JSON.stringify(caps))}`,
+      });
+      await use(vBrowser);
+    } else {
+      // Use Local Browser for testing.
+      await use(browser);
+    }
+  },
+  page: async ({ page, browser }, use, testInfo) => {
+    // Overriding page function to mark the status on BrowserStack.
+    if (testInfo.project.name.match(/browserstack/)) {
+      const vPage = await browser.newPage();
+      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();
+    } 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);
+    }
+  }
+};