Import path Shortening tsconfig.json

Author: akshayp7

README.md

@@ -176,6 +176,11 @@ npm run allureReport
 npx playwright show-trace trace.zip
 ```
 19. You can change the Logging Message at Test Case/Test Step Level in CustomReporterConfig.ts file
+20. In `tsconfig.json` file in `paths` section we can re-assign the long path imports like '../../' to a variable which starts with '@' and then we can use it to shorten our import statements in respective file.
+In the below example wherever '../../pageFactory/pageRepository/' import statement is used we can replace it with '@pages'
+```JS
+"@pages/*":["pageFactory/pageRepository/*"]
+```
 
 ## Reports
 

html-report.zip

@@ -1,8 +1,8 @@
 import { test as baseTest } from '@playwright/test';
-import { LoginPage } from '../pageFactory/pageRepository/LoginPage';
-import { MyAccountPage } from '../pageFactory/pageRepository/MyAccountPage';
-import { MyAddressesPage } from '../pageFactory/pageRepository/MyAddressesPage'
-import { MyPersonalInformationPage } from '../pageFactory/pageRepository/MyPersonalInformationPage';
+import { LoginPage } from '@pages/LoginPage';
+import { MyAccountPage } from '@pages/MyAccountPage';
+import { MyAddressesPage } from '@pages/MyAddressesPage'
+import { MyPersonalInformationPage } from '@pages/MyPersonalInformationPage';
 
 const test = baseTest.extend<{
     loginPage: LoginPage;

lib/BaseTest.ts

@@ -22,20 +22,20 @@
   "author": "Akshay Pai",
   "license": "MIT",
   "dependencies": {
-    "@playwright/test": "^1.19.0",
+    "@playwright/test": "^1.20.0",
     "@types/adm-zip": "^0.4.34",
     "@types/crypto-js": "^4.1.0",
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "adm-zip": "^0.5.9",
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
-    "eslint": "^8.9.0",
+    "eslint": "^8.11.0",
     "eslint-plugin-import": "^2.25.4",
     "exceljs": "^4.3.0",
     "experimental-allure-playwright": "0.0.3",
     "pg": "^8.7.3",
-    "playwright": "^1.19.0",
-    "typescript": "^4.5.5"
+    "playwright": "^1.20.0",
+    "typescript": "^4.6.2"
   }
 }

package-lock.json

@@ -1,5 +1,5 @@
-import { LoginPageObjects } from "../objectRepository/LoginPageObjects";
-import { WebActions } from "../../lib/WebActions";
+import { LoginPageObjects } from "@objects/LoginPageObjects";
+import { WebActions } from "@lib/WebActions";
 import type { Page } from 'playwright';
 import {testConfig} from '../../testConfig';
 

package.json

@@ -1,5 +1,5 @@
-import { MyAccountPageObjects } from "../objectRepository/MyAccountPageObjects";
-import { WebActions } from "../../lib/WebActions";
+import { MyAccountPageObjects } from "@objects/MyAccountPageObjects";
+import { WebActions } from "@lib/WebActions";
 import type { Page } from 'playwright';
 
 let webActions: WebActions;

pageFactory/pageRepository/LoginPage.ts

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

pageFactory/pageRepository/MyAccountPage.ts

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

pageFactory/pageRepository/MyAddressesPage.ts

@@ -39,7 +39,7 @@ const config: PlaywrightTestConfig = {
         baseURL: testConfig[process.env.ENV],
 
         //Browser Mode
-        headless: true,
+        headless: false,
 
         //Browser height and width
         viewport: { width: 1500, height: 730 },

pageFactory/pageRepository/MyPersonalInformationPage.ts

@@ -1,4 +1,4 @@
-import { APIActions } from '../../lib/APIActions';
+import { APIActions } from '@lib/APIActions';
 import { test } from '@playwright/test';
 
 const apiActions = new APIActions();

playwright.config.ts

@@ -1,4 +1,4 @@
-import { APIActions } from '../../lib/APIActions';
+import { APIActions } from '@lib/APIActions';
 import { test } from '@playwright/test';
 
 const apiActions = new APIActions();

tests/api/GET.test.ts

@@ -1,5 +1,5 @@
 import { testConfig } from '../../testConfig';
-import { DBActions } from '../../lib/DBActions';
+import { DBActions } from '@lib/DBActions';
 import { test } from '@playwright/test'
 
 test('Connect to Postgres DB', async () => {

tests/api/POST.test.ts

@@ -1,5 +1,5 @@
-import { LoginPage } from "../../pageFactory/pageRepository/LoginPage";
-import { MyAccountPage } from "../../pageFactory/pageRepository/MyAccountPage";
+import { LoginPage } from "@pages/LoginPage";
+import { MyAccountPage } from "@pages/MyAccountPage";
 import { test } from '@playwright/test';
 
 test(`Verify My Personal Information.`, async ({ page }) => {

tests/db/DB.test.ts

@@ -1,4 +1,4 @@
-import test from '../../lib/BaseTest';
+import test from '@lib/BaseTest';
 
 test(`Login to PHP travels.`, async ({ loginPage, myAccountPage }) => {
     await loginPage.navigateToURL();

tests/devices/Emulation.test.ts

@@ -1,4 +1,4 @@
-import test from '../../lib/BaseTest';
+import test from '@lib/BaseTest';
 
 // We can use Steps like in Cucmber format as shown below
 

tests/functional/Login.test.ts

@@ -1,4 +1,4 @@
-import test from '../../lib/BaseTest';
+import test from '@lib/BaseTest';
 
 test(`@Smoke Verify My Personal Information.`, async ({ loginPage, myAccountPage, myPersonalInformationPage }) => {
     await loginPage.navigateToURL();

tests/functional/MyAddress.test.ts

@@ -1,5 +1,5 @@
-import { LoginPage } from "../../pageFactory/pageRepository/LoginPage";
-import { MyAccountPage } from "../../pageFactory/pageRepository/MyAccountPage";
+import { LoginPage } from "@pages/LoginPage";
+import { MyAccountPage } from "@pages/MyAccountPage";
 import { expect, test } from '@playwright/test';
 
 test(`Verify User Login.`, async ({ page }) => {

tests/functional/MyPersonalDetails.test.ts

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",                                      /* Specify the base directory to resolve non-relative module names. */
+    "paths": {                                           /* Specify a set of entries that re-map imports to additional lookup locations. */
+      "@pages/*":["pageFactory/pageRepository/*"],
+      "@objects/*":["pageFactory/objectRepository/*"],
+      "@lib/*":["lib/*"],
+    }                                         
+  }
+}