Import path Shortening tsconfig.json

akshayp7 · akshayp7 · commit a50673b37401 · 2022-03-20T11:46:28.000+05:30
diff --git a/README.md b/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
 
diff --git a/html-report.zip b/html-report.zip
diff --git a/lib/BaseTest.ts b/lib/BaseTest.ts
@@ -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;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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"
   }
 }
diff --git a/pageFactory/pageRepository/LoginPage.ts b/pageFactory/pageRepository/LoginPage.ts
@@ -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';
 
diff --git a/pageFactory/pageRepository/MyAccountPage.ts b/pageFactory/pageRepository/MyAccountPage.ts
@@ -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;
diff --git a/pageFactory/pageRepository/MyAddressesPage.ts b/pageFactory/pageRepository/MyAddressesPage.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;
diff --git a/pageFactory/pageRepository/MyPersonalInformationPage.ts b/pageFactory/pageRepository/MyPersonalInformationPage.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;
diff --git a/playwright.config.ts b/playwright.config.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 },
diff --git a/tests/api/GET.test.ts b/tests/api/GET.test.ts
@@ -1,4 +1,4 @@
-import { APIActions } from '../../lib/APIActions';
+import { APIActions } from '@lib/APIActions';
 import { test } from '@playwright/test';
 
 const apiActions = new APIActions();
diff --git a/tests/api/POST.test.ts b/tests/api/POST.test.ts
@@ -1,4 +1,4 @@
-import { APIActions } from '../../lib/APIActions';
+import { APIActions } from '@lib/APIActions';
 import { test } from '@playwright/test';
 
 const apiActions = new APIActions();
diff --git a/tests/db/DB.test.ts b/tests/db/DB.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 () => {
diff --git a/tests/devices/Emulation.test.ts b/tests/devices/Emulation.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 }) => {
diff --git a/tests/functional/Login.test.ts b/tests/functional/Login.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();
diff --git a/tests/functional/MyAddress.test.ts b/tests/functional/MyAddress.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
 
diff --git a/tests/functional/MyPersonalDetails.test.ts b/tests/functional/MyPersonalDetails.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();
diff --git a/tests/visualComparison/visualComparision.test.ts b/tests/visualComparison/visualComparision.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 }) => {
diff --git a/tsconfig.json b/tsconfig.json
@@ -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/*"],
+    }                                         
+  }
+}
