UserFacingLocators

Author: akshayp7

package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "test": "cross-env ENV=%ENV% npx playwright test",
-    "test:single": "cross-env ENV=%ENV% npx playwright test Login.test.ts --project=Chrome",
+    "test:single": "cross-env ENV=%ENV% npx playwright test AlertsFrameWindows.test.ts --project=Chrome",
     "test:parallel": "cross-env ENV=%ENV% npx playwright test --grep @Smoke --project=Chrome",
     "test:serial": "cross-env ENV=%ENV% npx playwright test --grep @Smoke --workers=1 --project=Chrome",
     "test:serial:ci": "npx playwright test --grep @Smoke --workers=1 --project=Chrome",

pageFactory/pageRepository/ElementsPage.ts

@@ -32,7 +32,7 @@ export class ElementsPage {
         this.SUBMIT_BUTTON = page.getByText(`Submit`);
         this.SUBMITTED_TEXT = page.getByText(`Name:AutoTest`, { exact: true }); // Matches exact text
         this.HOME_CHECK_BOX = page.getByText('Home');
-        this.HOME_SELECTED_TEXT = page.locator(`.display-result`);
+        this.HOME_SELECTED_TEXT = page.locator(`#result`);
         this.NO_RADIO_BUTTON = page.locator(`#noRadio`); // Using CSS Selector
         this.WEB_TABLES_HEADER = page.getByRole('columnheader');
         this.WEB_TABLES_EDIT_ICON = page.getByRole('row', { name: 'Cierra' }).getByTitle('Edit').locator('svg'); // Chaining Locators

pageFactory/pageRepository/LoginPage.ts

@@ -16,9 +16,9 @@ export class LoginPage {
         this.page = page;
         this.context = context;
         webActions = new WebActions(this.page, this.context);
-        this.USERNAME_EDITBOX = page.locator('#userName');
-        this.PASSWORD_EDITBOX = page.locator('#password');
-        this.LOGIN_BUTTON = page.locator('#login');
+        this.USERNAME_EDITBOX = page.getByPlaceholder('UserName');
+        this.PASSWORD_EDITBOX = page.getByPlaceholder('Password');
+        this.LOGIN_BUTTON = page.getByRole('button', { name: 'Login' });
         this.BOOKS_SEARCH_BOX = page.getByPlaceholder('Type to search');
     }
 

pageFactory/pageRepository/WidgetsPage.ts

@@ -15,7 +15,7 @@ export class WidgetsPage {
         this.context = context;
         this.AUTOCOMPLETE_EDITBOX = page.locator('#autoCompleteSingleInput');
         this.BLUE_COLOUR_TEXT = page.getByText('Blue', { exact: true }); //Used to select Blue colour from Autocomplete editbox
-        this.HOVER_BUTTON = page.locator('#toolTipButton');
+        this.HOVER_BUTTON = page.getByRole('button', { name: 'Hover me to see' });
         this.TOOL_TIP_TEXT = page.getByRole("tooltip");
         this.OLD_SELECT_MENU = page.locator('#oldSelectMenu');
         this.MULTISELECT_MENU = page.getByText('Select...');