changed UX selectors to id and name for e2e tests (#7260)

Moving all their UX identifiers from id to class names. This PR addresses this change for our e2e tests to identify UX elements by ids as well as class names where applicable.
AzureAD · Aug 30, 2024 · 90d4f6f · 90d4f6f
1 parent 59cf46d
commit 90d4f6f
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 81 deletions.
diff --git a/samples/e2eTestUtils/src/Constants.ts b/samples/e2eTestUtils/src/Constants.ts
@@ -84,3 +84,29 @@ export const GuestHomedIn = {
     HOSTAZUREAD: "hostazuread",
     ONPREM: "onprem",
 };
+
+export const HtmlSelectors = {
+    BUTTON9SELECTOR: "#idSIButton9, input[name='idSIButton9']",
+    USERNAME_INPUT: "#i0116, input[name='i0116']",
+    AAD_TITLE: "#aadTile, input[name='aadTile']",
+    B2C_LOCAL_ACCOUNT_USERNAME:
+        "#logonIdentifier, input[name='logonIdentifier']",
+    B2C_LOCAL_ACCOUNT_PASSWORD: "#password, input[name='password']",
+    NEXT_BUTTON: "#next, input[name='next']",
+    B2C_AAD_MSIDLAB4_SIGNIN_PAGE:
+        "#MSIDLAB4_AzureAD, input[name='MSIDLAB4_AzureAD']",
+    B2C_MSA_SIGNIN_PAGE:
+        "#MicrosoftAccountExchange, input[name='MicrosoftAccountExchange']",
+    FORGOT_PASSWORD_LINK:
+        "#idA_PWD_ForgotPassword, input[name='idA_PWD_ForgotPassword']",
+    PASSWORD_INPUT_TEXTBOX: "#i0118, input[name='i0118']",
+    KMSI_PAGE: "#kmsiTitle, input[name='kmsiTitle']",
+    STAY_SIGNEDIN_BUTTON: "#acceptButton, input[name='acceptButton']",
+    REMOTE_LOCATION_DESCRPITION:
+        "#remoteConnectDescription, input[name='remoteConnectDescription']",
+    REMOTE_LOCATION_SUBMIT_BUTTON:
+        "#remoteConnectSubmit, input[name='remoteConnectSubmit']",
+    PASSWORD_INPUT_SELECTOR: "#passwordInput, input[name='passwordInput']",
+    CREDENTIALS_SUBMIT_BUTTON: "#submitButton, input[name='submitButton']",
+    DEVICE_OTC_INPUT_SELECTOR: "#otc, input[name='otc']",
+};
diff --git a/samples/e2eTestUtils/src/ElectronPlaywrightTestUtils.ts b/samples/e2eTestUtils/src/ElectronPlaywrightTestUtils.ts
@@ -1,90 +1,107 @@
 import { ElectronApplication, Page } from "playwright-core";
 import * as fs from "fs";
-
-export async function enterCredentials(page: Page, screenshot: Screenshot, username: string, accountPwd: string): Promise<void> {
+import { HtmlSelectors } from "./Constants";
+
+export async function enterCredentials(
+    page: Page,
+    screenshot: Screenshot,
+    username: string,
+    accountPwd: string
+): Promise<void> {
     await Promise.all([
-        page.waitForSelector("#i0116"),
-        page.waitForSelector("#idSIButton9")
+        page.waitForSelector(HtmlSelectors.USERNAME_INPUT),
+        page.waitForSelector(HtmlSelectors.BUTTON9SELECTOR),
     ]).catch(async (e) => {
-        await screenshot.takeScreenshot(page, "errorPage").catch(() => { });
+        await screenshot.takeScreenshot(page, "errorPage").catch(() => {});
         throw e;
     });
 
     await screenshot.takeScreenshot(page, "loginPage");
-    await page.type("#i0116", username);
-    await screenshot.takeScreenshot(page, "loginPageUsernameFilled")
+    await page.type(HtmlSelectors.USERNAME_INPUT, username);
+    await screenshot.takeScreenshot(page, "loginPageUsernameFilled");
 
     await Promise.all([
         page.waitForNavigation({ waitUntil: "load" }),
         page.waitForNavigation({ waitUntil: "domcontentloaded" }),
-        page.waitForNavigation({ waitUntil: "networkidle" }).catch(() => { }),  // Wait for navigation but don't throw due to timeout
-        page.click("#idSIButton9")
+        page.waitForNavigation({ waitUntil: "networkidle" }).catch(() => {}), // Wait for navigation but don't throw due to timeout
+        page.click(HtmlSelectors.BUTTON9SELECTOR),
     ]).catch(async (e) => {
-        await screenshot.takeScreenshot(page, "errorPage").catch(() => { });
+        await screenshot.takeScreenshot(page, "errorPage").catch(() => {});
         throw e;
     });
 
-    await page.waitForSelector("#idA_PWD_ForgotPassword");
-    await page.waitForSelector("#i0118");
-    await page.waitForSelector("#idSIButton9");
+    await page.waitForSelector(HtmlSelectors.FORGOT_PASSWORD_LINK);
+    await page.waitForSelector(HtmlSelectors.PASSWORD_INPUT_TEXTBOX);
+    await page.waitForSelector(HtmlSelectors.BUTTON9SELECTOR);
     await screenshot.takeScreenshot(page, "pwdInputPage");
-    await page.type("#i0118", accountPwd);
+    await page.type(HtmlSelectors.PASSWORD_INPUT_TEXTBOX, accountPwd);
     await screenshot.takeScreenshot(page, "loginPagePasswordFilled");
-    await page.click("#idSIButton9", { noWaitAfter: true });
+    await page.click(HtmlSelectors.BUTTON9SELECTOR, { noWaitAfter: true });
 }
 
-export async function enterCredentialsADFS(page: Page, screenshot: Screenshot, username: string, accountPwd: string): Promise<void> {
+export async function enterCredentialsADFS(
+    page: Page,
+    screenshot: Screenshot,
+    username: string,
+    accountPwd: string
+): Promise<void> {
     await Promise.all([
-        page.waitForSelector("#i0116"),
-        page.waitForSelector("#idSIButton9")
+        page.waitForSelector(HtmlSelectors.USERNAME_INPUT),
+        page.waitForSelector(HtmlSelectors.BUTTON9SELECTOR),
     ]).catch(async (e) => {
-        await screenshot.takeScreenshot(page, "errorPage").catch(() => { });
+        await screenshot.takeScreenshot(page, "errorPage").catch(() => {});
         throw e;
     });
 
     await screenshot.takeScreenshot(page, "loginPageADFS");
-    await page.type("#i0116", username);
+    await page.type(HtmlSelectors.USERNAME_INPUT, username);
     await screenshot.takeScreenshot(page, "loginPageUsernameFilled");
 
     await Promise.all([
         page.waitForNavigation({ waitUntil: "load" }),
         page.waitForNavigation({ waitUntil: "domcontentloaded" }),
-        page.waitForNavigation({ waitUntil: "networkidle" }).catch(() => { }),  // Wait for navigation but don't throw due to timeout
-        page.click("#idSIButton9")
+        page.waitForNavigation({ waitUntil: "networkidle" }).catch(() => {}), // Wait for navigation but don't throw due to timeout
+        page.click(HtmlSelectors.BUTTON9SELECTOR),
     ]).catch(async (e) => {
-        await screenshot.takeScreenshot(page, "errorPage").catch(() => { });
+        await screenshot.takeScreenshot(page, "errorPage").catch(() => {});
         throw e;
     });
 
-    await page.waitForSelector("#passwordInput");
-    await page.waitForSelector("#submitButton");
-    await page.type("#passwordInput", accountPwd);
+    await page.waitForSelector(HtmlSelectors.PASSWORD_INPUT_SELECTOR);
+    await page.waitForSelector(HtmlSelectors.CREDENTIALS_SUBMIT_BUTTON);
+    await page.type(HtmlSelectors.PASSWORD_INPUT_SELECTOR, accountPwd);
     await screenshot.takeScreenshot(page, "passwordEntered");
 
     await Promise.all([
         page.waitForNavigation({ waitUntil: "load" }),
         page.waitForNavigation({ waitUntil: "domcontentloaded" }),
-        page.waitForNavigation({ waitUntil: "networkidle" }).catch(() => { }),  // Wait for navigation but don't throw due to timeout
-        page.click("#submitButton")
+        page.waitForNavigation({ waitUntil: "networkidle" }).catch(() => {}), // Wait for navigation but don't throw due to timeout
+        page.click(HtmlSelectors.CREDENTIALS_SUBMIT_BUTTON),
     ]).catch(async (e) => {
-        await screenshot.takeScreenshot(page, "errorPage").catch(() => { });
+        await screenshot.takeScreenshot(page, "errorPage").catch(() => {});
         throw e;
     });
 }
 
-export async function clickSignIn(electronApp: ElectronApplication, page: Page, screenshot: Screenshot): Promise<Page> {
-    await page.waitForSelector("#SignIn")
+export async function clickSignIn(
+    electronApp: ElectronApplication,
+    page: Page,
+    screenshot: Screenshot
+): Promise<Page> {
+    await page.waitForSelector("#SignIn");
     await screenshot.takeScreenshot(page, "samplePageInit");
 
     page.click("#SignIn");
-    const popupPage = await electronApp.waitForEvent('window');
+    const popupPage = await electronApp.waitForEvent("window");
 
     await Promise.all([
         popupPage.waitForNavigation({ waitUntil: "load" }),
         popupPage.waitForNavigation({ waitUntil: "domcontentloaded" }),
-        popupPage.waitForNavigation({ waitUntil: "networkidle" }).catch(() => { }), // Wait for navigation but don't throw due to timeout
+        popupPage
+            .waitForNavigation({ waitUntil: "networkidle" })
+            .catch(() => {}), // Wait for navigation but don't throw due to timeout
     ]).catch(async (e) => {
-        await screenshot.takeScreenshot(page, "errorPage").catch(() => { });
+        await screenshot.takeScreenshot(page, "errorPage").catch(() => {});
         throw e;
     });
 
@@ -103,7 +120,10 @@ export class Screenshot {
     }
 
     async takeScreenshot(page: Page, screenshotName: string): Promise<void> {
-        await page.screenshot({ path: `${this.folderName}/${++this.screenshotNum}_${screenshotName}.png` });
+        await page.screenshot({
+            path: `${this.folderName}/${++this
+                .screenshotNum}_${screenshotName}.png`,
+        });
     }
 }
 
@@ -113,7 +133,9 @@ export function createFolder(foldername: string) {
     }
 }
 
-export async function retrieveAuthCodeUrlFromBrowserContext(page: Page): Promise<string> {
+export async function retrieveAuthCodeUrlFromBrowserContext(
+    page: Page
+): Promise<string> {
     const msgPromise = await page.waitForEvent("console", {
         predicate: async (message) => {
             const text = message.text();
@@ -124,4 +146,4 @@ export async function retrieveAuthCodeUrlFromBrowserContext(page: Page): Promise
         },
     });
     return msgPromise.text();
-}
+}