Modify to override page fixture instead of override browser

Author: karanshah-browserstack

playwright-test/fixtures.js

@@ -29,7 +29,7 @@ exports.BS_LOCAL_ARGS = {
 };
 
 // Patching the capabilities dynamically according to the project name.
-const patchCaps = (name) => {
+const patchCaps = (name, title) => {
   let combination = name.split(/@browserstack/)[0];
   let [browerCaps, osCaps] = combination.split(/:/);
   let [browser, browser_version] = browerCaps.split(/@/);
@@ -40,32 +40,23 @@ const patchCaps = (name) => {
   caps.browser_version = browser_version ? browser_version : 'latest';
   caps.os = os ? os : 'osx';
   caps.os_version = os_version ? os_version : 'catalina';
-  caps.name = name;
+  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({
-  browser: async ({ playwright, browser }, use, workerInfo) => {
+  page: async ({ page, playwright }, use, testInfo) => {
     // Use BrowserStack Launched Browser according to capabilities for cross-browser testing.
-    if (workerInfo.project.name.match(/browserstack/)) {
-      patchCaps(workerInfo.project.name);
+    if (testInfo.project.name.match(/browserstack/)) {
+      patchCaps(testInfo.project.name, `${testInfo.file} - ${testInfo.title}`);
       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();
+      const vPage = await vBrowser.newPage();
       await use(vPage);
       const testResult = {
         action: 'setSessionStatus',
@@ -77,6 +68,7 @@ exports.test = base.test.extend({
       await vPage.evaluate(() => {},
       `browserstack_executor: ${JSON.stringify(testResult)}`);
       await vPage.close();
+      await vBrowser.close();
     } else {
       use(page);
     }

playwright-test/tests/test_1.spec.js

@@ -1,7 +1,7 @@
 const { test } = require('../fixtures');
 const { expect } = require('@playwright/test');
 test.describe('feature foo', () => {
-  test('my test', async ({ page }) => {
+  test('test 1', async ({ page }) => {
     // Assertions use the expect API.
     await page.goto('https://www.google.com/ncr');
     const element = await page.$('[aria-label="Search"]');

playwright-test/tests/test_10.spec.js

@@ -1,7 +1,7 @@
 const { test } = require('../fixtures');
 const { expect } = require('@playwright/test');
 test.describe('feature foo', () => {
-  test('my test', async ({ page }) => {
+  test('test 10', async ({ page }) => {
     // Assertions use the expect API.
     await page.goto('https://www.duckduckgo.com');
     const element = await page.$('[name="q"]');

playwright-test/tests/test_2.spec.js

@@ -1,7 +1,7 @@
 const { test } = require('../fixtures');
 const { expect } = require('@playwright/test');
 test.describe('feature foo', () => {
-  test('my test', async ({ page }) => {
+  test('test 2', async ({ page }) => {
     // Assertions use the expect API.
     await page.goto('https://www.duckduckgo.com');
     const element = await page.$('[name="q"]');

playwright-test/tests/test_3.spec.js

@@ -1,7 +1,7 @@
 const { test } = require('../fixtures');
 const { expect } = require('@playwright/test');
 test.describe('feature foo', () => {
-  test('my test', async ({ page }) => {
+  test('test 3', async ({ page }) => {
     // Assertions use the expect API.
     await page.goto('https://www.duckduckgo.com');
     const element = await page.$('[name="q"]');

playwright-test/tests/test_4.spec.js

@@ -1,7 +1,7 @@
 const { test } = require('../fixtures');
 const { expect } = require('@playwright/test');
 test.describe('feature foo', () => {
-  test('my test', async ({ page }) => {
+  test('test 4', async ({ page }) => {
     // Assertions use the expect API.
     await page.goto('https://www.duckduckgo.com');
     const element = await page.$('[name="q"]');

playwright-test/tests/test_5.spec.js

@@ -1,7 +1,7 @@
 const { test } = require('../fixtures');
 const { expect } = require('@playwright/test');
 test.describe('feature foo', () => {
-  test('my test', async ({ page }) => {
+  test('test 5', async ({ page }) => {
     // Assertions use the expect API.
     await page.goto('https://www.duckduckgo.com');
     const element = await page.$('[name="q"]');

playwright-test/tests/test_6.spec.js

@@ -1,7 +1,7 @@
 const { test } = require('../fixtures');
 const { expect } = require('@playwright/test');
 test.describe('feature foo', () => {
-  test('my test', async ({ page }) => {
+  test('test 6', async ({ page }) => {
     // Assertions use the expect API.
     await page.goto('https://www.duckduckgo.com');
     const element = await page.$('[name="q"]');

playwright-test/tests/test_7.spec.js

@@ -1,7 +1,7 @@
 const { test } = require('../fixtures');
 const { expect } = require('@playwright/test');
 test.describe('feature foo', () => {
-  test('my test', async ({ page }) => {
+  test('test 7', async ({ page }) => {
     // Assertions use the expect API.
     await page.goto('https://www.duckduckgo.com');
     const element = await page.$('[name="q"]');

playwright-test/tests/test_8.spec.js

@@ -1,7 +1,7 @@
 const { test } = require('../fixtures');
 const { expect } = require('@playwright/test');
 test.describe('feature foo', () => {
-  test('my test', async ({ page }) => {
+  test('test 8', async ({ page }) => {
     // Assertions use the expect API.
     await page.goto('https://www.duckduckgo.com');
     const element = await page.$('[name="q"]');