Testcafe如何在Factory页面声明ClientFunction

Question

我试图在工厂页面上声明一个 ClientFunction，然后在测试页面上调用它。但我做错了什么，它不起作用。我有两个页面，一个是工厂页面，第二个是测试页面。 在测试页面中，我有 ClientFunction，它工作正常。当我尝试移至工厂页面时，它不起作用。

import {Selector, ClientFunction} from "testcafe";
import videoPage from "../pages/video_player_page";

const videoElement = Selector("#bod-video-player_html5_api");

const currentTime = ClientFunction(() => {
  return videoElement().currentTime;
}, {dependencies: {videoElement}});

test
    .page(`some video page url`)
    ("Verify video functionality in LO State ", async (t) => {
     let m1 = currentTime();
           console.log("m1 = " + m1);
      await t
          .click(videoPage.fwdButton)
          .expect(videoPage.videoPlayer.hasClass("vjs-seeking")).notOk();
          let m2 = currentTime();
          console.log("m2 = " + m2);
      await t.expect(m2).gt(m1+25, "fwd button not working");
});

在我的工厂页面中

import {Selector, t, ClientFunction} from "testcafe";
import {selectors} from "../constants/video_player_page_constants";
import {errorMessages} from "../constants/error_messages/video_player_page_messages";

class VideoPlayerPage {
  constructor() {
    this.skipAd = Selector(`${selectors.skipAdLocator}`, {timeout: 50000});
    this.waiverModal = Selector(`${selectors.warningModalInVideoLocator}`);
    this.videoPlayer = Selector(`${selectors.videoPlayerLocator}`);
    this.videoPlaying = selectors.videoPlaying;
    this.videoPaused = selectors.videoPaused;
    this.waiverModalCheckbox = Selector(`${selectors.warningModalCheckbox}`);
    this.waiverModalCheckboxCss = selectors.warningModalCheckbox;
    this.acceptButton = Selector(`${selectors.warningModalAcceptButton}`);
    this.playPauseButton = Selector(`${selectors.playPauseButtonLocator}`);
    this.fwdButton = Selector(`${selectors.fwdButtonLocator}`);
    this.bwdButton = Selector(`${selectors.bwdButtonLocator}`);
    this.videoElement = Selector("#bod-video-player_html5_api");
  }


  async acceptWaiver() {
    await t
        .expect(this.waiverModal.exists).ok(errorMessages.warningModalNotExist)
        .hover(this.waiverModalCheckboxCss)
        .click(this.waiverModalCheckbox)
        .click(this.acceptButton);
  }

  async skipAdd() {
    if (await this.skipAd.visible) {
      await t.click(this.skipAd);
    }
  }

} export default new VideoPlayerPage();

如何在Factory页面声明ClientFunction，感谢帮助。

Answer 1

你可以这样做：

import { ClientFunction } from 'testcafe';

class VideoPlayerPage {
    currentTime () {
        return ClientFunction(() => {
            const videoEl = document.querySelector('#bod-video-player_html5_api');
            return videoEl.currentTime;
        })();
    }
}

当我尝试移动到工厂页面时，它不起作用。

我猜那是因为您只导出了 VideoPlayerPage 的一个实例，所以如果您只是复制并粘贴您的 ClientFunction 代码，那么它首先不会被导出，因此您无法在测试文件中使用它。

编辑：

如果您想将选择器作为参数发送给 ClientFunction，可以这样做：

import { ClientFunction } from 'testcafe';

class VideoPlayerPage {
    constructor () {
        this.videoSelector = '#bod-video-player_html5_api';
    }

    currentTime () {
        return ClientFunction(selector => {
            const videoEl = document.querySelector(selector);
            return videoEl.currentTime;
        })(this.videoSelector);
    }
}