puppeteer_tests: Add helper to correctly test @class in an XPath query.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

frontend_tests/puppeteer_lib/common.ts

@@ -186,6 +186,10 @@ export async function check_form_contents(
     }
 }
 
+export function has_class_x(class_name: string): string {
+    return `contains(concat(" ", @class, " "), " ${class_name} ")`;
+}
+
 export async function get_element_text(element: ElementHandle<Element>): Promise<string> {
     const text = await (await element.getProperty("innerText"))!.jsonValue();
     assert.ok(typeof text === "string");
@@ -507,7 +511,9 @@ export async function select_item_via_typeahead(
     console.log(`Looking in ${field_selector} to select ${str}, ${item}`);
     await clear_and_type(page, field_selector, str);
     const entry = await page.waitForSelector(
-        `xpath///*[@class="typeahead dropdown-menu" and contains(@style, "display: block")]//li[contains(normalize-space(), "${item}")]//a`,
+        `xpath///*[${has_class_x(
+            "typeahead",
+        )} and contains(@style, "display: block")]//li[contains(normalize-space(), "${item}")]//a`,
         {visible: true},
     );
     assert.ok(entry);

frontend_tests/puppeteer_tests/admin.ts

@@ -43,7 +43,9 @@ async function test_change_new_stream_notifications_setting(page: Page): Promise
     );
 
     const rome_in_dropdown = await page.waitForSelector(
-        'xpath///*[@id="realm_notifications_stream_id_widget"]//*[@class="dropdown-list-body"]/li[1]',
+        `xpath///*[@id="realm_notifications_stream_id_widget"]//*[${common.has_class_x(
+            "dropdown-list-body",
+        )}]/li[1]`,
         {visible: true},
     );
     assert.ok(rome_in_dropdown);

frontend_tests/puppeteer_tests/mention.ts

@@ -30,7 +30,9 @@ async function test_mention(page: Page): Promise<void> {
     await page.click("#compose-send-button");
 
     await page.waitForSelector(
-        'xpath///*[@class="compose-all-everyone-msg" and contains(text(), "Are you sure you want to mention all")]',
+        `xpath///*[${common.has_class_x(
+            "compose-all-everyone-msg",
+        )} and contains(text(), "Are you sure you want to mention all")]`,
     );
     await page.click(".compose-all-everyone-confirm");
     await page.waitForSelector(".compose-all-everyone-msg", {hidden: true});

frontend_tests/puppeteer_tests/navigation.ts

@@ -109,7 +109,9 @@ async function navigation_tests(page: Page): Promise<void> {
 
     // Verify that we're narrowed to the target stream
     await page.waitForSelector(
-        'xpath///*[@id="message_view_header"]//*[@class="stream" and normalize-space()="Verona"]',
+        `xpath///*[@id="message_view_header"]//*[${common.has_class_x(
+            "stream",
+        )} and normalize-space()="Verona"]`,
     );
 }
 

frontend_tests/puppeteer_tests/settings.ts

@@ -178,7 +178,11 @@ async function test_edit_bot_form(page: Page): Promise<void> {
     await page.waitForSelector("#edit_bot_modal", {hidden: true});
 
     await page.waitForSelector(
-        `xpath///*[@class="btn open_edit_bot_form" and @data-email="${bot1_email}"]/ancestor::*[@class="details"]/*[@class="name" and text()="Bot one"]`,
+        `xpath///*[${common.has_class_x(
+            "open_edit_bot_form",
+        )} and @data-email="${bot1_email}"]/ancestor::*[${common.has_class_x(
+            "details",
+        )}]/*[${common.has_class_x("name")} and text()="Bot one"]`,
     );
 
     await common.wait_for_micromodal_to_close(page);
@@ -222,7 +226,11 @@ async function test_invalid_edit_bot_form(page: Page): Promise<void> {
     );
     await page.click(cancel_button_selector);
     await page.waitForSelector(
-        `xpath///*[@class="btn open_edit_bot_form" and @data-email="${bot1_email}"]/ancestor::*[@class="details"]/*[@class="name" and text()="Bot one"]`,
+        `xpath///*[${common.has_class_x(
+            "open_edit_bot_form",
+        )} and @data-email="${bot1_email}"]/ancestor::*[${common.has_class_x(
+            "details",
+        )}]/*[${common.has_class_x("name")} and text()="Bot one"]`,
     );
 
     await common.wait_for_micromodal_to_close(page);