Merge pull request #46 from germanbisogno/develop

Develop

Author: germanbisogno

.DS_Store

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.5.1] - 2024-02-17
+
+### Added
+
+- Adding new dependency chrome-har-capturer to use fromLog API to export to HAR format in Network tracing.
+- Including websocket events to observe and include in Har file.
+
 ## [1.5.0] - 2023-03-16
 
 ### Added

CHANGELOG.md

@@ -22,6 +22,7 @@
             ]
         }
     },
+    "url": "http://localhost:3000",
     "cdpPort": 9222,
     "maxTimeout": 50000
 }

config/cdp.config.json

@@ -10,7 +10,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
-    "test": "mocha --require ts-node/register --parallel",
+    "test": "mocha --require ts-node/register --exit --parallel",
     "format": "prettier --write src/**/*.ts",
     "prebuild": "npm run lint && npm run format",
     "lint": "eslint --fix ./src/**/*.ts",
@@ -33,6 +33,7 @@
     "@compodoc/compodoc": "^1.1.16",
     "@types/chai": "^4.3.4",
     "@types/chrome-remote-interface": "0.31.9",
+    "@types/express": "^4.17.21",
     "@types/mocha": "^10.0.1",
     "@types/selenium-webdriver": "^4.0.16",
     "@types/sinon": "^10.0.13",
@@ -46,13 +47,15 @@
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "express": "^4.18.2",
     "mocha": "^10.2.0",
     "prettier": "^2.4.1",
     "selenium-webdriver": "^4.8.1",
     "sinon": "^15.0.2",
     "ts-node": "^10.9.1",
     "typed-query-selector": "^2.6.1",
-    "typescript": "^4.4.4"
+    "typescript": "^4.4.4",
+    "ws": "^8.16.0"
   },
   "dependencies": {
     "@influxdata/influxdb-client": "^1.33.2",
@@ -61,6 +64,7 @@
     "@types/node": "^17.0.14",
     "axios": "^1.6.0",
     "chrome-har": "^0.12.0",
+    "chrome-har-capturer": "^0.14.0",
     "chrome-remote-interface": "^0.33.0",
     "devtools-protocol": "0.0.1055124",
     "lighthouse": "10.0.2",

package.json

@@ -1,12 +1,44 @@
 import { Builder } from 'selenium-webdriver';
 import * as chrome from 'selenium-webdriver/chrome';
 import 'chromedriver';
-import { GooglePage } from '../pages/googlePage';
 import { Network } from '../network';
 import { CDPClient } from '../cdpClient';
 import { getFreePort } from 'endpoint-utils';
 import { Har } from 'har-format';
 import { expect } from 'chai';
+import { WebSocketPage } from '../pages/webSocketPage';
+import express, { Express } from "express";
+import { WebSocketServer } from 'ws';
+
+let server;
+
+before(function(){
+  const app: Express = express();
+  server = app.use((req, res) =>
+      res.sendFile('./websocket-client.html', { root: "./src/__tests__/server" })
+  ).listen(3000, () => console.log(`Listening on ${3000}`))
+
+    const sockserver = new WebSocketServer({ port: 443 })
+    sockserver.on('connection', ws => {
+    console.log('New client connected!')
+    ws.send('connection established')
+    ws.on('close', () => console.log('Client has disconnected!'))
+    ws.on('message', data => {
+      sockserver.clients.forEach(client => {
+        console.log(`distributing message: ${data}`)
+        client.send(`${data}`)
+      })
+    })
+    ws.onerror = function () {
+      console.log('websocket error')
+    }
+  })
+});
+
+after(async () => {
+  await server.close();
+});
+
 
 it('Test Network', async () => {
   const port = await getFreePort();
@@ -19,17 +51,17 @@ it('Test Network', async () => {
     .setChromeOptions(options)
     .build();
 
-  const googlePage = new GooglePage(driver);
+  const webSocketPage = new WebSocketPage(driver);
   const cdpClient = new CDPClient();
   await cdpClient.init(port);
 
   const network = new Network(cdpClient, 'network.har');
 
   await network.startTrace();
 
-  await driver.get('https://www.google.com');
+  await driver.get('http://localhost:3000');
 
-  await googlePage.search('test');
+  await webSocketPage.sendMessage('test');
 
   const networkResults: Har = await network.stopTrace();
   expect(networkResults.log.entries.length).greaterThan(0);

src/__tests__/network.test.ts

@@ -5,6 +5,7 @@ export interface CDPConfig {
   tracing: Protocol.Tracing.StartRequest;
   cdpPort: number;
   maxTimeout: number;
+  url: string;
 }
 
 export const cdpConfig: CDPConfig = JSON.parse(

src/config/cdpConfig.ts

@@ -1,18 +1,16 @@
 import * as LH from 'lighthouse';
 import { FlowResult, startFlow, UserFlow } from 'lighthouse';
-import { TraceOperations } from './traceOperations';
 import * as fs from 'fs';
 import puppeteer from 'puppeteer';
 import axios from 'axios';
 
-export class Lighthouse extends TraceOperations {
+export class Lighthouse {
   private _flow: UserFlow;
   private _report: string;
   private _port: number;
   private _browser: puppeteer.Browser | undefined;
 
   constructor(port: number) {
-    super();
     this._port = port;
   }
 

src/lighthouse.ts

@@ -1,19 +1,20 @@
 import * as fs from 'fs';
-import { harFromMessages } from 'chrome-har';
 import { TraceOperations } from './traceOperations';
 import { logger } from './utils/logger';
 import { NetworkConditions } from './interfaces/networkConditions';
 import { Har } from 'har-format';
 import { CDPClient } from './cdpClient';
-import CDP from 'chrome-remote-interface';
 import Protocol from 'devtools-protocol';
+import { fromLog } from 'chrome-har-capturer';
+import { cdpConfig } from './config/cdpConfig';
 
 // event types to observe
 const observe = [
   'Page.loadEventFired',
   'Page.domContentEventFired',
+  'Page.navigatedWithinDocument',
   'Page.frameStartedLoading',
-  'Page.frameAttached',
+  'Page.frameAttached',  
   'Network.requestWillBeSent',
   'Network.requestServedFromCache',
   'Network.dataReceived',
@@ -22,6 +23,13 @@ const observe = [
   'Network.loadingFinished',
   'Network.loadingFailed',
   'Network.requestFinished',
+  'Network.webSocketFrameReceived',
+  'Network.webSocketFrameSent',
+  'Network.getResponseBody',
+  'Network.webSocketWillSendHandshakeRequest',
+  'Network.webSocketHandshakeResponseReceived',
+  'Network.webSocketClosed',
+  'Network.resourceChangedPriority'
 ];
 
 export const NETWORK_PRESETS = {
@@ -78,11 +86,9 @@ export const NETWORK_PRESETS = {
 export class Network extends TraceOperations {
   private _traceFileName: string;
   protected _events: { method: string; params: object }[] = [];
-  private _client: CDP.Client;
 
   constructor(cdpClient: CDPClient, traceFileName = '') {
-    super();
-    this._client = cdpClient.get();
+    super(cdpClient);
     this._traceFileName = traceFileName;
   }
 
@@ -113,9 +119,7 @@ export class Network extends TraceOperations {
    */
   public async stopTrace(): Promise<Har> {
     try {
-      const har = await harFromMessages(this._events, {
-        includeTextFromResponseBody: true,
-      });
+      const har = await fromLog(cdpConfig.url, this._events);
       if (this._traceFileName) {
         fs.writeFileSync(this._traceFileName, JSON.stringify(har));
       }

src/network.ts

@@ -0,0 +1,21 @@
+import { By, WebDriver, Key } from 'selenium-webdriver';
+import { elementLocated } from 'selenium-webdriver/lib/until';
+import { cdpConfig } from '../config/cdpConfig';
+
+export class WebSocketPage {
+  private _driver: WebDriver;
+  private message: By = By.name('message');
+
+  constructor(driver: WebDriver) {
+    this._driver = driver;
+  }
+
+  async sendMessage(message: string): Promise<void> {
+    const el = await this._driver.wait(
+      elementLocated(this.message),
+      cdpConfig.maxTimeout
+    );
+    await el.sendKeys(message);
+    await el.sendKeys(Key.RETURN);
+  }
+}

src/pages/webSocketPage.ts

@@ -3,19 +3,17 @@ import { logger } from './utils/logger';
 import { Protocol } from 'devtools-protocol';
 import * as fs from 'fs';
 import { CDPClient } from './cdpClient';
-import CDP from 'chrome-remote-interface';
 
 export class Performance extends TraceOperations {
   private _startTraceFileName: string;
   private _endTraceFileName: string;
-  private _client: CDP.Client;
 
   constructor(
     cdpClient: CDPClient,
     startTraceFileName = '',
     endTraceFileName = ''
   ) {
-    super();
+    super(cdpClient);
     this._client = cdpClient.get();
     this._startTraceFileName = startTraceFileName;
     this._endTraceFileName = endTraceFileName;