How do i combine Selector with my Utility function?

Question

While writing tests with TestCafe i'm creating utility functions, but there seems to be a problem when using the Selector('') method inside any function.

The Selector('') method works fine inside test files and also when importing from another file (utility_selectors.js). I think I need to include something inside the function, but I'm stuck and can't seem to find the solution.

My goal is to create a function to select mouse click coordinates.

Utility_selectors.js

import { Selector } from 'testcafe';

export const viewport = Selector('.viewport').find('canvas');

Utility_functions.js

import * as s from './selectors.js';

export const selectPoint = (x,y) => {
  return s.viewport + ",{ offsetX :" + x + ", offsetY :" + y + "}"
}

OR (both don't work)

export function selectPoint(x,y){
  return s.viewport + ",{ offsetX :" + x + ", offsetY :" + y + "}"
}

Testfile.js (utility function in action)

import { selectPoint } from '../utilities/functions.js';

test('example utility function', async (t) => {
  await t.click(selectPoint(100,200));
});

When executing, the following error occurs in cmd:

  SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'function
  __$$clientFunction$$() {
  const testRun = builder._getTestRun();
  const callsite = (0, _getCallsite.getCallsiteForMethod)(builder.callsiteNames.execution);
  const args = [];

  // OPTIMIZATION: don't leak `arguments` object.
  for (let i = 0; i < arguments.length; i++) args.push(arguments[i]);

  return builder._executeCommand(args, testRun, callsite);
  },{ offsetX :100, offsetY :200}' is not a valid selector.

So long story short, I want to include the TestCafe's Selector('') method inside a utility function.

Thanks in advance!

Wouldn't you just need `t.click(s.viewport, {offsetX: 100, offsetY: 200})`? — Chris, Jan 09 '19 at 09:39
That is true, the original code is relatively short, but for this particular project i need a lot of coordinates and that makes it a bit shorter and easier to use. I'm also interested to know if there is a solution to this problem for future functions. — D.Rooij, Jan 09 '19 at 09:44

Chris · Accepted Answer · 2019-01-09T12:26:46.620

Your provided code will not work since you are trying to concatenate a string to a generated function. This string should be an Object passed as the second argument to the click function.

If you always use the same selector, I can imagine you would want to create a utility like clickPoint(t, 100,200).

This can be achieved by the following utility function.

import * as s from './selectors.js';

export const clickPoint = (t, x, y) => {
  return t.click(s.viewport, { offsetX : x, offsetY: y });
};

Your testfile would look like this:

import { clickPoint } from '../utilities/functions.js';

test('example utility function', async (t) => {
  await clickPoint(t, 100, 200);
});

score 0 · Answer 2 · answered Jan 21 '19 at 09:53

Edit: If anyone else want to use my code, I have made it a bit cleaner.

utility_functions_js

import { t } from 'testcafe';

export const clickPoint = (x, y) => {
  return t.doubleClick(s.viewport, { offsetX : x, offsetY: y });
};

Now you can write:

await clickPoint(x,y)

instead of

await clickPoint(t,x,y)

Cheers :)

How do i combine Selector with my Utility function?

2 Answers2