HAR Testing

Author: akshayp7

README.md

@@ -184,6 +184,22 @@ In the below example wherever '../../pageFactory/pageRepository/' import stateme
 ```JS
 "@pages/*":["pageFactory/pageRepository/*"]
 ```
+21. Network Replay : 
+For using this featre in Playwright we use HAR file. 
+HAR (HTTP Archive) is a file format used by several HTTP session tools to export the captured data. This can be highly useful in troubleshooting complex issues by obtaining additional information about the network requests that are generated in the browser while an issue occurs.
+
+To generate HAR file navigate to `HAR.test.ts` inside functional folder, in that use the below line
+```JS
+await page.routeFromHAR('har/personalInfo.har',{update:true});
+```
+ where `update:true` means to record a new har file and store it in the location provided by first parameter `har/personalInfo.har`, this generates and links all the required subfiles for `personalInfor.har` and stores it in `har` directory
+
+Once HAR file is recorded comment the line `await page.routeFromHAR('har/personalInfo.har',{update:true});` and uncomment below line
+```JS
+await page.routeFromHAR('har/personalInfo.har',{update:false});
+```
+where `update:false` means to use the existing HAR from from the path given in first paraeter `har/personalInfo.har`, to see this in action you can turn off your internet and run the script, complete webpage is mocked up along with assertions on the browser of your choice this is done using the Network Replay feature and by using our recorded HAR file.
+We can use this feature when webpage is down for some reason and we want to test some scenarios. 
 
 ## Reports
 

lib/WebActions.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import * as CryptoJS from 'crypto-js';
-import type { Page } from 'playwright';
+import type { Page } from '@playwright/test';
 import { BrowserContext, expect } from '@playwright/test';
 import { Workbook } from 'exceljs';
 import { testConfig } from '../testConfig';

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "playwright-typescipt-playwright-test",
-  "version": "1.0.0",
+  "version": "0.18.0",
   "description": "Playwright Framework with Typescript",
   "main": "index.js",
   "scripts": {
     "test": "npx playwright test",
-    "test:single": "npx playwright test FollowUsMultipleWindow.test.ts --project=Chrome",
+    "test:single": "npx playwright test HAR.test.ts --project=Chrome",
     "test:parallel": "npx playwright test --grep @Smoke --project=Chrome",
     "test:serial": "npx playwright test --grep @Smoke --workers=1 --project=Chrome",
     "test:api": "npx playwright test --grep @API --workers=1 --project=Chrome",
@@ -23,11 +23,11 @@
   "author": "Akshay Pai",
   "license": "MIT",
   "dependencies": {
-    "@playwright/test": "^1.23.1",
+    "@playwright/test": "^1.23.2",
     "@types/adm-zip": "^0.5.0",
     "@types/crypto-js": "^4.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.30.3",
-    "@typescript-eslint/parser": "^5.30.3",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
     "adm-zip": "^0.5.9",
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
@@ -37,7 +37,6 @@
     "experimental-allure-playwright": "0.0.3",
     "lighthouse": "^9.6.3",
     "pg": "^8.7.3",
-    "playwright": "^1.23.1",
     "typescript": "^4.7.4"
   }
 }

package.json

@@ -1,6 +1,6 @@
 import { LoginPageObjects } from "@objects/LoginPageObjects";
 import { WebActions } from "@lib/WebActions";
-import type { Page } from 'playwright';
+import type { Page } from '@playwright/test';
 import {testConfig} from '../../testConfig';
 
 let webActions: WebActions;

pageFactory/pageRepository/LoginPage.ts

@@ -1,6 +1,6 @@
 import { MyAccountPageObjects } from "@objects/MyAccountPageObjects";
 import { WebActions } from "@lib/WebActions";
-import type { BrowserContext, Page } from 'playwright';
+import type { BrowserContext, Page } from '@playwright/test';
 
 let webActions: WebActions;
 

pageFactory/pageRepository/MyAccountPage.ts

@@ -1,6 +1,6 @@
 import { MyAddressesPageObjects } from "@objects/MyAddressesPageObjects";
 import { WebActions } from "@lib/WebActions";
-import type { Page } from 'playwright';
+import type { Page } from '@playwright/test';
 
 let webActions: WebActions;
 

pageFactory/pageRepository/MyAddressesPage.ts

@@ -1,6 +1,6 @@
 import { MyPersonalInformationPageObjects } from '@objects/MyPersonalInformationPageObjects'
 import { WebActions } from "@lib/WebActions";
-import type { Page } from 'playwright';
+import type { Page } from '@playwright/test';
 
 let webActions: WebActions;
 

pageFactory/pageRepository/MyPersonalInformationPage.ts

@@ -1,4 +1,4 @@
-import { devices } from 'playwright';
+import { devices } from '@playwright/test';
 import { PlaywrightTestConfig } from '@playwright/test';
 import { testConfig } from './testConfig';
 const ENV = process.env.ENV;

playwright.config.ts

@@ -0,0 +1,17 @@
+import test from '@lib/BaseTest';
+
+test(`Generate and verify HAR file for Personal Information.`, async ({ page, loginPage, myAccountPage, myPersonalInformationPage }) => {
+    // To record HAR file use below line where "update:true"
+    // This line creates a directory named har and stores all the har related files in it.
+    await page.routeFromHAR('har/personalInfo.har',{update:true});
+
+    // Once you record the har file you can uncomment the below line for Network Replay with update:false
+    //The below line uses the har file from the recoded directory.
+    // await page.routeFromHAR('har/personalInfo.har',{update:false});
+    await loginPage.navigateToURL();
+    await loginPage.loginToApplication();   
+    await myAccountPage.verifyMyAccountHeader();
+    await myAccountPage.clickOnMyAccountLinks(`My personal information`);
+    await myPersonalInformationPage.verifyMyPersonalInfoHeader();
+    await myPersonalInformationPage.verifyFirstName(`Demo`);
+});