Changing test cases and dynamic local config

Author: karanshah-browserstack

README.md

@@ -107,7 +107,7 @@ If you are using Playwright Test Runner to run your Playwright tests, you can ru
 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. Run the sample test script using `npm run test:local` and add `browserstack.local:true` in the file `fixture.js` in caps part 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?

playwright-test/fixtures.js

@@ -7,6 +7,7 @@ const clientPlaywrightVersion = cp
   .split(' ')[1];
 const BrowserStackLocal = require('browserstack-local');
 
+// BrowserStack Specific Capabilities.
 const caps = {
   browser: 'chrome',
   os: 'osx',
@@ -16,6 +17,7 @@ const caps = {
   '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,
 };
 
@@ -26,6 +28,7 @@ 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(/:/);
@@ -45,6 +48,7 @@ const nestedKeyValue = (hash, keys) => keys.reduce((hash, key) => (isHash(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({
@@ -54,10 +58,12 @@ exports.test = base.test.extend({
       });
       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);
@@ -70,6 +76,7 @@ exports.test = base.test.extend({
       };
       await vPage.evaluate(() => {},
       `browserstack_executor: ${JSON.stringify(testResult)}`);
+      await vPage.close();
     } else {
       use(page);
     }

playwright-test/global-setup.js

@@ -1,16 +1,24 @@
 // global-setup.js
 const { bsLocal, BS_LOCAL_ARGS } = require('./fixtures');
-let localStarted = false;
 const { promisify } = require('util');
 const sleep = promisify(setTimeout);
-module.exports = async (config) => {
+const redColour = '\x1b[31m';
+const whiteColour = '\x1b[0m';
+module.exports = async () => {
   console.log('Starting BrowserStackLocal ...');
   // Starts the Local instance with the required arguments
-  bsLocal.start(BS_LOCAL_ARGS, (callback) => {
-    console.log('BrowserStackLocal Started');
-    localStarted = true;
+  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 (!localStarted) {
+  while (!localResponseReceived) {
     await sleep(1000);
   }
 };

playwright-test/global-teardown.js

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

playwright-test/package.json

@@ -8,7 +8,7 @@
   "description": "Sample package to show jest playwright tests run on BrowserStack",
   "scripts": {
     "test": "npx playwright test --config=./playwright.config.js",
-    "test:local": "npx playwright test --config=./playwright-local.config.js"
+    "test:local": "BROWSERSTACK_LOCAL=true npx playwright test --config=./playwright-local.config.js"
   },
   "devDependencies": {
     "playwright": "^1.13.1",

playwright-test/playwright-local.config.js

@@ -10,6 +10,9 @@ const config = {
   globalSetup: require.resolve('./global-setup'),
   globalTeardown: require.resolve('./global-teardown'),
   timeout: 60000,
+  use:{
+    viewport: null
+  },
   projects: [
     // -- BrowserStack Projects --
     // name should be of the format browser@browser_version:os os_version@browserstack
@@ -30,24 +33,22 @@ const config = {
     {
       name: 'edge@90:Windows 10@browserstack',
       use: {
-        browserName: 'chromium',
-        viewport: { width: 1280, height: 1024 }
+        browserName: 'chromium'
       },
     },
     {
       name: 'playwright-firefox@latest:OSX Catalina@browserstack',
       use: {
         browserName: 'firefox',
-        viewport: null,
         ignoreHTTPSErrors: true
       },
     },
     {
       name: 'playwright-webkit@latest:OSX Big Sur@browserstack',
       use: {
         browserName: 'webkit',
-        ...devices['iPhone 12 Pro Max'],
-        viewport: { width: 1280, height: 1024 },
+        // Config to use playwright emulated devices.
+        // ...devices['iPhone 12 Pro Max'],
       },
     },
     // -- Local Projects --

playwright-test/playwright.config.js

@@ -7,6 +7,9 @@ const config = {
   testDir: 'tests',
   testMatch: '**/*.spec.js',
   timeout: 60000,
+  use:{
+    viewport: null
+  },
   projects: [
     // -- BrowserStack Projects --
     // name should be of the format browser@browser_version:os os_version@browserstack
@@ -27,24 +30,22 @@ const config = {
     {
       name: 'edge@90:Windows 10@browserstack',
       use: {
-        browserName: 'chromium',
-        viewport: { width: 1280, height: 1024 }
+        browserName: 'chromium'
       },
     },
     {
       name: 'playwright-firefox@latest:OSX Catalina@browserstack',
       use: {
         browserName: 'firefox',
-        viewport: null,
         ignoreHTTPSErrors: true
       },
     },
     {
       name: 'playwright-webkit@latest:OSX Big Sur@browserstack',
       use: {
         browserName: 'webkit',
-        ...devices['iPhone 12 Pro Max'],
-        viewport: { width: 1280, height: 1024 },
+        // Config to use playwright emulated devices.
+        // ...devices['iPhone 12 Pro Max'],
       },
     },
     // -- Local Projects --

playwright-test/tests/test_10.spec.js

@@ -6,10 +6,10 @@ test.describe('feature foo', () => {
     await page.goto('https://www.google.com/ncr');
     const element = await page.$('[aria-label="Search"]');
     await element.click();
-    await element.type('BrowserStack');
+    await element.type('BrowserStack Percy');
     await element.press('Enter');
     const title = await page.title('');
     console.log(title);
-    expect(title).toEqual( 'BrowserStack - Google Search', 'Expected page title is incorrect!');
+    expect(title).toEqual( 'BrowserStack Percy - Google Search', 'Expected page title is incorrect!');
   });
 });

playwright-test/tests/test_2.spec.js

@@ -6,10 +6,10 @@ test.describe('feature foo', () => {
     await page.goto('https://www.google.com/ncr');
     const element = await page.$('[aria-label="Search"]');
     await element.click();
-    await element.type('BrowserStack');
+    await element.type('BrowserStack Playwright');
     await element.press('Enter');
     const title = await page.title('');
     console.log(title);
-    expect(title).toEqual( 'BrowserStack - Google Search', 'Expected page title is incorrect!');
+    expect(title).toEqual( 'BrowserStack Playwright - Google Search', 'Expected page title is incorrect!');
   });
 });

playwright-test/tests/test_3.spec.js

@@ -6,10 +6,10 @@ test.describe('feature foo', () => {
     await page.goto('https://www.google.com/ncr');
     const element = await page.$('[aria-label="Search"]');
     await element.click();
-    await element.type('BrowserStack');
+    await element.type('BrowserStack Puppeteer');
     await element.press('Enter');
     const title = await page.title('');
     console.log(title);
-    expect(title).toEqual( 'BrowserStack - Google Search', 'Expected page title is incorrect!');
+    expect(title).toEqual( 'BrowserStack Puppeteer - Google Search', 'Expected page title is incorrect!');
   });
 });