无法将选择器提供给ClientFunction

Question

请看下面的结构。有什么办法可以使“示例1”正常工作？这样做的目的是避免在“测试”类中存储“ css选择器字符串”。

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方法不适用于TestCafequerySelectorAPI。请通过以下方式更改Selector类，以使您的示例生效：

Selector