How to use the testcafe.ClientFunction function in testcafe

import { ClientFunction } from 'testcafe';

fixture `gh-1057 - fixed by hidden parent`
    .page `http://localhost:3000/fixtures/regression/gh-1057/pages/hiddenByFixedParent.html`;

const targetsClicked = ClientFunction(() => window.target1Clicked && window.target2Clicked);

test('gh-1057', async t => {
    // NOTE: scrolling has issues in iOS Simulator https://github.com/DevExpress/testcafe/issues/1237
    await t
        .click('#target2')
        .click('#target1')
        .expect(targetsClicked()).ok();
});

test('gh-1057 with custom offsets', async t => {
    // NOTE: scrolling has issues in iOS Simulator https://github.com/DevExpress/testcafe/issues/1237
    await t
        .click('#target2', { offsetX: -1, offsetY: -1 })
        .click('#target1', { offsetX: 1, offsetY: 1 })
        .expect(targetsClicked()).ok();
});

'Access-Control-Allow-Origin' : '*'
                });
                var readStream = fs.createReadStream('./tests/index.html');
                // We replaced all the event handlers with a simple call to readStream.pipe()
                readStream.pipe(response);
            }).listen(port);
            resolve();
        });
    },
    sleep (timing=100, param) {
        return new Promise((resolve) => {
            setTimeout(_ => resolve(param), timing);
        });
    },

    waitTestsToFinish: ClientFunction(() => {
        return new Promise((resolve, reject)=>{
            fullTestsList.then(result=>{
                resolve(result);
            });
        });
    })
};


export default helpers;

async focusSaveButton() {
    // testcafe does not support actions for focus yet
    const focus = ClientFunction(() => {
      document.querySelector('.o-form-button-bar input[data-type="save"]').focus();
    });
    await focus();
  }

test(`check html elements`, async t => {
    const getImageExistance = ClientFunction(
      () =>
        !!document.querySelector(
          'table img[src="https://surveyjs.io/Content/Images/examples/26178-20160417.jpg"]'
        )
    );
    const getBoldExistance = ClientFunction(
      () => !!document.querySelector("table b")
    );
    const getLinkExistance = ClientFunction(
      () =>
        !!document.querySelector(
          'table a[href="https://surveyjs.io/Editor/Editor/"]'
        )
    );

    assert(await getImageExistance());
    assert(await getBoldExistance());
    assert(await getLinkExistance());
  });

test(`set custom navigation`, async t => {
    const getPrevDsplay = ClientFunction(
      () => document.querySelector("#surveyPrev").style.display
    );
    const getNextDsplay = ClientFunction(
      () => document.querySelector("#surveyNext").style.display
    );
    const getCompleteDsplay = ClientFunction(
      () => document.querySelector("#surveyComplete").style.display
    );
    const getProgressBarDsplay = ClientFunction(
      () => document.querySelector("#surveyProgress").style.display
    );
    const getProgressText = ClientFunction(
      () => document.querySelector("#surveyProgress").innerHTML
    );
    let surveyResult;

    await setCustomNavigation();

    assert.equal(await getPrevDsplay(), "none");
    assert.notEqual(await getNextDsplay(), "none");
    assert.equal(await getCompleteDsplay(), "none");
    assert.notEqual(await getProgressBarDsplay(), "none");
    assert.equal(await getProgressText(), "Page 1 of 3.");

    await t.click(`input[type=checkbox]`).click(`#surveyNext`);

    assert.notEqual(await getPrevDsplay(), "none");
    assert.notEqual(await getNextDsplay(), "none");

test('DOM node return value', async() => {
    const getSomeNodes = ClientFunction(() => {
        const answer = document.querySelector('.answer');

        return [answer ? answer.childNodes[0] : null, document];
    });

    await getSomeNodes();
});

test(`set custom navigation`, async t => {
    const getPrevDsplay = ClientFunction(
      () => document.querySelector("#surveyPrev").style.display
    );
    const getNextDsplay = ClientFunction(
      () => document.querySelector("#surveyNext").style.display
    );
    const getCompleteDsplay = ClientFunction(
      () => document.querySelector("#surveyComplete").style.display
    );
    const getProgressBarDsplay = ClientFunction(
      () => document.querySelector("#surveyProgress").style.display
    );
    const getProgressText = ClientFunction(
      () => document.querySelector("#surveyProgress").innerHTML
    );
    let surveyResult;

    await setCustomNavigation();

    assert.equal(await getPrevDsplay(), "none");
    assert.notEqual(await getNextDsplay(), "none");
    assert.equal(await getCompleteDsplay(), "none");
    assert.notEqual(await getProgressBarDsplay(), "none");
    assert.equal(await getProgressText(), "Page 1 of 3.");

    await t.click(`input[type=checkbox]`).click(`#surveyNext`);

test(`choose empty`, async t => {
    const getPosition = ClientFunction(() =>
      document.documentElement.innerHTML.indexOf("Please answer the question")
    );
    let position;
    let surveyResult;

    await t.click(`input[value=Complete]`);

    position = await getPosition();
    assert.notEqual(position, -1);

    surveyResult = await getSurveyResult();
    assert.equal(typeof surveyResult, `undefined`);
  });

const add_value_changed_listener = ClientFunction(() => {
  survey.onValueChanged.add(function(sender, options) {
    document.documentElement.appendChild(
      document.createTextNode(options.value)
    );
  });
});

const set_values = ClientFunction(() => {
  survey.setValue("name", "Wombat");
  survey.setValue("email", "wo@mbat.com");
  survey.setValue("car", ["BMW", "Ford"]);
});

const get_value = ClientFunction(() => {
  document.documentElement.appendChild(
    document.createTextNode(survey.getValue("car"))
  );
});

const json = {
  questions: [
    { type: "text", name: "name", title: "Your name:" },
    { type: "text", name: "email", title: "Your e-mail" },
    {
      type: "checkbox",
      name: "car",
      title: "What car are you driving?",
      isRequired: true,
      colCount: 4,
      choices: [

import { Selector, ClientFunction } from 'testcafe'

export const getLocation = ClientFunction(() => document.location.pathname)
export const setToken = ClientFunction(token => {
  window.localStorage.setItem('token', token)
  location.reload(true)
})

export const getToken = ClientFunction(() =>
  window.localStorage.getItem('token')
)

export const clearLocalStorage = ClientFunction(() =>
  window.localStorage.clear()
)

export const dataQaSelector = dataQa => Selector(`[data-qa="${dataQa}"]`)
export const dataQaExists = dataQa => dataQaSelector(dataQa).exists

export const randomString = () =>