Added locator example

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+logs/info.log

README.md

@@ -4,7 +4,7 @@
 
 Playwright-Framework-Template - This project is based on Microsoft Playwright, Appium, Artillery which enables reliable end-to-end testing, Web testing, API testing, Mobile testing, load testing.
 
-_☝ If you like the project, please give a ⭐ on [GitHub](https://github.com/abhaybharti/playwright-framework-template). It will motivate me to add more such project._
+_☝ If you liked the project, please give a ⭐ on [GitHub](https://github.com/abhaybharti/playwright-framework-template). It will motivate me to add more such project._
 
 ## Features
 
@@ -40,6 +40,7 @@ _☝ If you like the project, please give a ⭐ on [GitHub](https://github.com/a
 
 - `nodejs`: Download and install Node JS from
   > `https://nodejs.org/en/download`
+- `Visual Studio Code/Aqua/IntelliJ`: Download and install code editor
 
 ### Installation
 
@@ -52,8 +53,13 @@ _☝ If you like the project, please give a ⭐ on [GitHub](https://github.com/a
   > `npm install`
 
 - For first time installation use below command to download required browsers:
+
   > `npx playwright install`
 
+- In case you want to do fresh setup of playwright
+  - Create a folder & run command `npm init playwright@latest`
+  - select `TypeScript` & select default for other options
+
 ## Usage
 
 - For browser configuration, change required parameters in playwright.config.ts
@@ -75,6 +81,10 @@ _☝ If you like the project, please give a ⭐ on [GitHub](https://github.com/a
 
 Pls go through different `\*.ts` file, which has tests example for different purpose.
 
+#### Locator Example
+
+> Note: Refer to [sample-web-test](https://github.com/abhaybharti/playwright-framework-template/tree/master/src/tests/web/example/locator.spec.ts)
+
 ### Sample Web Load Test
 
 ### Sample Api Test

playwright.config.ts

@@ -21,7 +21,8 @@ switch (process.env.NODE_ENV) {
     break;
 }
 export default defineConfig({
-  testDir: "./src",
+  testDir: "./src/tests",
+  testMatch: ["**/*.ts", "**/*.js"],
   timeout: 180 * 1000,
   expect: { timeout: 180 * 1000 },
   /* Run tests in files in parallel */
@@ -86,18 +87,18 @@ export default defineConfig({
         viewport: { width: 1920, height: 1080 },
       },
     },
-    {
-      name: "Chrome",
-      use: {
-        ...devices["Desktop Chrome"],
-        channel: "chrome",
-        screenshot: "on",
-        trace: "on",
-        video: "on",
-        headless: false,
-        viewport: { width: 1920, height: 1080 },
-      },
-    },
+    // {
+    //   name: "Chrome",
+    //   use: {
+    //     ...devices["Desktop Chrome"],
+    //     channel: "chrome",
+    //     screenshot: "on",
+    //     trace: "on",
+    //     video: "on",
+    //     headless: false,
+    //     viewport: { width: 1920, height: 1080 },
+    //   },
+    // },
   ],
 
   /* Run your local dev server before starting the tests */

src/tests/web/example/locator.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from "@playwright/test";
+
+/*  playwright built in locators
+ example code is run on website -> https://opensource-demo.orangehrmlive.com/web/index.php/auth/login
+ In case you want to read more about role refer -> https://www.w3.org/TR/wai-aria-1.2/#role_definitions*/
+
+test("test locator getByRole() @locator", async ({ page: page }) => {
+  /*supported role in playwright: 
+  "alert"|"alertdialog"|"application"|"article"|"banner"|"blockquote"|"button"|
+  "caption"|"cell"|"checkbox"|"code"|"columnheader"|"combobox"|"complementary"|"contentinfo"|"definition"|
+  "deletion"|"dialog"|"directory"|"document"|"emphasis"|"feed"|"figure"|"form"|"generic"|"grid"|"gridcell"|
+  "group"|"heading"|"img"|"insertion"|"link"|"list"|"listbox"|"listitem"|"log"|"main"|"marquee"|"math"|"meter"|
+  "menu"|"menubar"|"menuitem"|"menuitemcheckbox"|"menuitemradio"|"navigation"|"none"|"note"|"option"|"paragraph"|
+  "presentation"|"progressbar"|"radio"|"radiogroup"|"region"|"row"|"rowgroup"|"rowheader"|"scrollbar"|"search"|"
+  "searchbox"|"separator"|"slider"|"spinbutton"|"status"|"strong"|"subscript"|"superscript"|"switch"|"tab"|"table"|
+  "tablist"|"tabpanel"|"term"|"textbox"|"time"|"timer"|"toolbar"|"tooltip"|"tree"|"treegrid"|"treeitem"
+  */
+
+  await page.goto(
+    "https://opensource-demo.orangehrmlive.com/web/index.php/auth/login"
+  );
+  await page.getByRole("textbox", { name: "username" }).fill("Admin");
+  await page.getByRole("textbox", { name: "password" }).fill("admin123");
+  await page.getByRole("button", { name: "Login" }).click({
+    button: "left",
+  });
+});
+
+test("test locator getByPlaceholder() @locator", async ({ page }) => {
+  await page.goto(
+    "https://opensource-demo.orangehrmlive.com/web/index.php/auth/login"
+  );
+  await page.getByPlaceholder("Username").fill("Adminplaceholder");
+  await page.getByPlaceholder("Password").fill("admin123");
+
+  await page.getByPlaceholder(/Username/).fill("Adminregexp");
+  await page.getByPlaceholder(/Password/).fill("admin123");
+
+  await page.getByPlaceholder(/username/i).fill("Admin_reg_ex_ignorecase");
+  await page.getByPlaceholder(/Password/i).fill("admin123");
+
+  await page.getByRole("button", { name: "Login" }).click({
+    button: "left",
+  });
+
+  await page.getByText("Invalid credentials").click();
+  expect(await page.getByText("Invalid credentials").count()).toBe(1);
+});
+
+test("test locator getByText() @locator", async ({ page }) => {});
+test("test locator getByLabel() @locator", async ({ page }) => {});
+
+test("test locator getByAltText() @locator", async ({ page }) => {});
+test("test locator getByTitle() @locator", async ({ page }) => {});
+test("test locator getByTestId() @locator", async ({ page }) => {});

src/utils/report/CustomReporterConfig.ts

@@ -50,7 +50,7 @@ export default class CustomReporterConfig implements Reporter {
   }
 
   onError(error: TestError): void {
-    logger.error(error.message);
+    logger.error("TestError : ", error.message);
   }
 
   onEnd(