Merge pull request #13 from qavajs/connect-via-cdp

added capability to connect to browser via CDP

Author: AlexGalichenko

CHANGELOG.md

@@ -1,5 +1,8 @@
+## Current
+- :rocket: added capability to connect via CDP
+
 ## 0.0.6
-- fixed issue in After hook if browser is not started
-- added I save css property step
-- added I expect css property step
-- added capability to connect to playwright server
+- :beetle: fixed issue in After hook if browser is not started
+- :rocket: added I save css property step
+- :rocket: added I expect css property step
+- :rocket: added capability to connect to playwright server

README.md

@@ -3,11 +3,11 @@
 # @qavajs/steps-playwright
 Step library to work with playwright in qavajs framework
 
-## installation
+## Installation
 
 `npm install @qavajs/steps-playwright`
 
-## configuration
+## Configuration
 ```javascript
 const App = require('./page_object');
 module.exports = {
@@ -21,15 +21,37 @@ module.exports = {
                 visible: 20000    
             },
             capabilities: {
-                browserName: 'chrome'
+                browserName: 'chromium'
             }
         },
         pageObject: new App()
     }
 }
 ```
 
-## screenshot strategy
+## Connect to playwright server
+In order to connect to playwright server pass _wsEndpoint_ property in capabilities object
+```typescript
+{
+    capabilities: {
+        browserName: 'chromium',
+        wsEndpoint: 'ws://127.0.0.1:60291/2bd48ce272de2b543e4c8c533f664b83'    
+    }
+}
+```
+
+## Connect to cdp endpoint
+In order to connect to CDP endpoint pass _cdpEndpoint_ property in capabilities object 
+```typescript
+{
+    capabilities: {
+        browserName: 'chromium',
+        cdpEndpoint: 'http://localhost:9222/'    
+    }
+}
+```
+
+## Screenshot strategy
 @qavajs/steps-playwright has build-in capability to take screenshot on particular event. If you need to add 
 screenshot to your report add _screenshot_ property to profile config.
 Supported events:

src/driverProvider.ts

@@ -0,0 +1,20 @@
+import { chromium, firefox, webkit, Browser, BrowserType } from 'playwright';
+const browsers: any = { chromium, firefox, webkit };
+
+export async function driverProvider(driverConfig: any): Promise<Browser> {
+    const browserName: string = driverConfig?.capabilities?.browserName ?? 'chromium';
+    const browserType: BrowserType = browsers[browserName];
+    if (driverConfig?.capabilities?.wsEndpoint) {
+        return browserType.connect(
+            driverConfig?.capabilities?.wsEndpoint,
+            driverConfig.capabilities
+        );
+    } else if (driverConfig?.capabilities?.cdpEndpoint) {
+        return browserType.connectOverCDP(
+            driverConfig?.capabilities?.cdpEndpoint,
+            driverConfig.capabilities
+        );
+    } else {
+        return browserType.launch(driverConfig.capabilities);
+    }
+}

src/hooks.ts

@@ -1,9 +1,9 @@
 import { After, AfterStep, Before, BeforeStep, Status } from '@cucumber/cucumber';
 import defaultTimeouts from './defaultTimeouts';
-import { chromium, firefox, webkit, Browser, BrowserContext, Page, BrowserType } from 'playwright';
+import { Browser, BrowserContext, Page } from 'playwright';
 import { po } from '@qavajs/po-playwright';
 import { ScreenshotEvent } from './screenshotEvent';
-const browsers: any = { chromium, firefox, webkit };
+import { driverProvider } from './driverProvider';
 
 declare global {
     var browser: Browser;
@@ -19,16 +19,7 @@ Before(async function () {
         defaultTimeouts,
         ...driverConfig.timeout
     }
-    const browserName: string = driverConfig?.capabilities?.browserName ?? 'chromium';
-    const browserType: BrowserType = browsers[browserName];
-    if (driverConfig?.capabilities?.wsEndpoint) {
-        global.browser = await browserType.connect(
-            driverConfig?.capabilities?.wsEndpoint,
-            driverConfig.capabilities
-        )
-    } else {
-        global.browser = await browserType.launch(driverConfig.capabilities);
-    }
+    global.browser = await driverProvider(driverConfig);
     global.context = await browser.newContext();
     global.page = await browser.newPage({ viewport: null });
     global.driver = global.browser;