Remove XPath selector and use other selectors like ID, CSS

for Testing Helix-UI

Author: shaleen76

test/behavioral/behavioral.ts

@@ -31,9 +31,17 @@ export function suite(browserName: string) {
     });
 
     test("nav/guides", async testExecutionObject => {
-        await util.$x(driver, "//nav//hx-disclosure", "Guides").click();
-        let guidesText = await driver.findElement(By.id("nav-Guides")).getText();
-        testExecutionObject.deepEqual(guidesText, "Getting Started");
+        const expected = [
+            "Getting Started",
+            "FAQ",
+            "React Compatibility",
+            "Polyfills"
+        ];
+        await driver.findElement(By.css("hx-disclosure")).click();
+        const reveal = await driver.findElement(By.id("nav-Guides"));
+        const links = await reveal.findElements(By.tagName('a'));
+        const text = await util.getElementsText(links);
+        testExecutionObject.deepEqual(text, expected);
     });
 
      /**
@@ -44,15 +52,15 @@ export function suite(browserName: string) {
     if (browserName === "chrome") {
         test("tabs/first", async testExecutionObject => {
             await util.go(driver, "components/tabs");
-            await tabTest(testExecutionObject, snappit, driver, "Cupcake Ipsum");
+            await tabTest(testExecutionObject, driver, "android-desserts-tab-0", "Cupcake Ipsum");
         });
 
         test("tabs/second", async testExecutionObject => {
-            await tabTest(testExecutionObject, snappit, driver, "Biscuit Marshmallow");
+            await tabTest(testExecutionObject, driver, "marshmallow", "Biscuit Marshmallow");
         });
 
         test("tabs/third", async testExecutionObject => {
-            await tabTest(testExecutionObject, snappit, driver, "Caramels Marzipan");
+            await tabTest(testExecutionObject, driver, "android-desserts-tab-2", "Caramels Marzipan");
         });
     }
 

test/behavioral/tests/tabs.ts

@@ -1,13 +1,13 @@
-import {Snappit, WebDriver, Key} from "snappit-visual-regression";
+import {WebDriver, By, Key} from "snappit-visual-regression";
 import {test, TestContext} from "ava";
 import * as util from "../../common/util";
 
 const getTab = async (
     driver: WebDriver,
-    tabName: string
+    tabID: string
 ) => {
-    const tab = await util.$x(driver, util.selectors.tab, tabName);
-    return tab;
+    const element = await driver.findElement(By.id(tabID));
+    return element;
 }
 
 const cycleLeft = async (driver: WebDriver) => {
@@ -24,11 +24,11 @@ const cycleRight = async (driver: WebDriver) => {
 
 export default async (
     t: TestContext,
-    snappit: Snappit,
     driver: WebDriver,
+    tabID: string,
     tabName: string
 ) => {
-    const tab = await getTab(driver, tabName);
+    const tab = await getTab(driver, tabID);
     await tab.click();
     t.is(await tab.getText(), tabName);
     await cycleLeft(driver);

test/common/util.ts

@@ -28,18 +28,6 @@ export async function snapshot(t: TestContext, element: WebElement) {
     t.snapshot(await element.getAttribute("outerHTML"));
 }
 
-export function $x(
-    driver: WebDriver,
-    xpath: string,
-    byText = "",
-) {
-    if (byText.length) {
-        xpath += `[contains(text(), '${byText}')]`;
-    }
-
-    return driver.findElement(By.xpath(xpath));
-}
-
 export async function getElementsText(
     elements: WebElement[]
 ) {
@@ -57,9 +45,6 @@ export async function getElementsText(
  * Once that happens, pull this out of `util.ts` and move it someplace more page-object-y.
  */
 export var selectors = {
-    nav: "#stage > #nav",
-    components: "#stage",
-    tab: "//hx-tablist/hx-tab",
-    domDiff: "*[data-dom-diff]",
+    domDiff: "*[data-dom-diff]"
 }