testcafe utils and selector functions

testcafe-selectors.txt

import { Selector, t } from "testcafe";
import { waitUntilTrue } from "./utils";

/**
 * Build test id selector string
 */
export const byTestId = (testId: string) => {
  return `[data-testid="${testId}"],[data-test-id="${testId}"]`;
};

/**
 * Build placeholder selector string
 */
export const byPlaceholder = (placeholder: string) => {
  return `[placeholder="${placeholder}"]`;
};

/**
 * Build aria label selector string
 */
export const byAriaLabel = (label: string) => {
  return `[aria-label="${label}"]`;
};

/**
 * Build alt text selector string
 */
export const byAltText = (text: string) => {
  return `[alt="${text}"]`;
};

/**
 * Build id selector string
 */
export const byId = (id: string) => {
  return `#${id}`;
};

/**
 * Wait for element to exist with text and return selector
 */
export const getByText = async (text: string, cssSelector: string = "*") => {
  const selector = Selector(cssSelector).withExactText(text);
  await t.expect(selector.exists).ok();
  return selector;
};

/**
 * Wait for element to exist with partial text and return selector
 */
export const getByPartialText = async (
  text: string,
  cssSelector: string = "*",
) => {
  const selector = Selector(cssSelector).withText(text);
  await t.expect(selector.exists).ok();
  return selector;
};

/**
 * Wait for element to exist with label text and return selector
 */
export const getByLabelText = async (label: string) => {
  // Try and obtain it by label element first
  const labelSelector = Selector(`label`).withExactText(label);
  if (await waitUntilTrue(() => labelSelector.exists)) {
    const labelForId = await labelSelector.getAttribute("for");
    const labelledSelector = Selector(`#${labelForId}`);
    const exists = await waitUntilTrue(() => labelledSelector.exists);
    if (exists) {
      return labelledSelector;
    }
  }

  // Try by aria label
  const labelledSelector = Selector(byAriaLabel(label));
  await t.expect(labelledSelector.exists).ok();
  return labelledSelector;
};

/**
 * Wait for element to exist with test id and return selector
 */
export const getByTestId = async (testId: string) => {
  const selector = Selector(byTestId(testId));
  await t.expect(selector.exists).ok();
  return selector;
};

/**
 * Wait for element to exist with placeholder and return selector
 */
export const getByPlaceholder = async (placeholder: string) => {
  const selector = Selector(byPlaceholder(placeholder));
  await t.expect(selector.exists).ok();
  return selector;
};

/**
 * Wait for element to exist with alt text and return selector
 */
export const getByAltText = async (text: string) => {
  const selector = Selector(byAltText(text));
  await t.expect(selector.exists).ok();
  return selector;
};

/**
 * Wait for element to exist with id and return selector
 */
export const getById = async (id: string) => {
  const selector = Selector(byId(id));
  await t.expect(selector.exists).ok();
  return selector;
};

testcafe-utils.ts

import { ClientFunction, Selector, t } from "testcafe";
import { config } from "./config";

/**
 * Get current url
 */
export const getUrl = ClientFunction(() => {
  return window.location.href;
});

/**
 * Follow a link and wait for the page to load
 * @param link The link to follow
 */
export const followLink = async (link: Selector) => {
  // Need to grab url before we follow the link and move page
  const url = await link.getAttribute("href");
  await t.click(link);
  await t.expect(getUrl()).contains(url, { timeout: config.timeouts.medium });
};

/**
 * Wait until the func resolves to the value
 * @param func
 * @param value
 * @param timeout
 */
export const waitUntil = async (
  func: () => Promise<boolean>,
  value: any,
  timeout: number = config.timeouts.short,
) => {
  const attemptInterval = 200;
  let currentTime = 0;

  while (currentTime < timeout) {
    if ((await func()) === value) {
      return value;
    }

    await t.wait(attemptInterval);
    currentTime += attemptInterval;
  }

  return null;
};

/**
 * Wait until function resolves to true
 * @param func Should resolve to boolean
 * @param timeout
 */
export const waitUntilTrue = async (
  func: () => Promise<boolean>,
  timeout: number = config.timeouts.short,
) => waitUntil(func, true, timeout);

/**
 * Wait until function resolves to false
 * @param func Should resolve to boolean
 * @param timeout
 */
export const waitUntilFalse = async (
  func: () => Promise<boolean>,
  timeout: number = config.timeouts.medium,
) => waitUntil(func, false, timeout);