如何将Selector与Utility功能结合起来？

Question

在使用TestCafe编写测试时,我正在创建实用程序函数,但在任何函数中使用Selector('')方法时似乎存在问题.

Selector('')方法在测试文件中以及从另一个文件(utility_selectors.js)导入时都可以正常工作.我想我需要在函数中包含一些东西,但我卡住了,似乎无法找到解决方案.

我的目标是创建一个选择鼠标点击坐标的功能.

---

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 + "}"
}

或(两者都不起作用)

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

Testfile.js(实用功能在起作用)

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

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

执行时,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.

---

长话短说,我想在实用程序函数中包含TestCafe的Selector('')方法.

提前致谢!

Answer 1

由于您尝试将字符串连接到生成的函数,因此您提供的代码将无法工作.该字符串应该是作为click函数的第二个参数传递的Object.

如果你总是使用相同的选择器,我可以想象你想要创建一个像clickPoint(t, 100,200).

这可以通过以下实用功能来实现.

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

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

你的testfile看起来像这样:

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

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