无法将选择器提供给 ClientFunction

Question

请看下面的结构。
有什么方法可以让 'Example 1' 正常工作吗？这个想法是为了避免在 'test' class.

中存储 'css selector string'

MyAccount.js

    import { Selector} from "testcafe";

    export class MyAccount {
      constructor() { 
        this.box = {
          item_1: Selector("#item01");
          item_2: Selector("#item02");
        }
      }
    }

clientFunctions.js

    import { ClientFunction } from 'testcafe';

    export const scrollInto = ClientFunction((selector) => {
        var element = window.document.querySelector(selector);    
        element.scrollIntoView();
    });

示例 1.（失败）

    import { MyAccount } from "../MyAccount";
    import { scrollInto } from "../clientFunctions";

    const myAccount = new MyAccount();

    fixture("Feature A").page(process.env.url);

    test("Test 01", async t => {

      await scrollInto(myAccount.box.item_1);

    });

示例 2。（已通过）

    import { MyAccount } from "../MyAccount";
    import { scrollInto } from "../clientFunctions";

    const myAccount = new MyAccount();

    fixture("Feature A").page(process.env.url);

    test("Test 01", async t => {

      await scrollInto("#item01");

    });

Answer 1

问题是浏览器的querySelector method doesn't work with the TestCafe SelectorAPI。请按以下方式更改 MyAccount class 以使您的示例工作：

export class MyAccount {
    constructor() { 
        this.box = {
            item_1: "#item01",
            item_2: "#item02"
        }
    }
}

Answer 2

您可以通过 dependencies option and override it later by calling with 方法将 Selector 传递给 ClientFunction。