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;
        })();
    }
}

When I trying move to Factory Page it doesn't work.

我想那是因为您只导出了 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);
    }
}

Testcafe如何在Factory页面声明ClientFunction

Testcafe how to declare ClientFunction in Factory page

javascript

testing

automated-tests

e2e-testing

testcafe