设置视频当前时间的 Testcafe ClientFunction 属性

Question

我正在尝试使用 Testcafe 获取视频属性以 play()、pause()、获取当前播放时间并设置当前时间。

问题是我对设置时间进行了硬编码，理想情况下我希望它成为一个函数，我可以传递任何我想要的 time 值。

我写了下面的简单测试：

import { ClientFunction } from 'testcafe';

const URL = 'https://www.youtube.com/watch?v=RWQtB6Xv01Q';

fixture `Portal Experience playback`
  .page `${URL}`;

function sleep (ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

test('Testing YouTube', async t => {
  const play = ClientFunction(() => document.querySelector('.video-stream').play());
  const pause = ClientFunction(() => document.querySelector('.video-stream').pause());
  const currentTime = ClientFunction(() => document.querySelector('.video-stream').currentTime);
  const setTime = await t.eval(() => document.querySelector('.video-stream').currentTime = 5);

  await setTime;
  console.info(`Video time is ${await currentTime()}`);
  await play;
  await sleep(5000);
  console.info(`Video time is ${await currentTime()}`);
  await pause;

});

play、pause 和 currentTime 我可以复制并粘贴到页面模型中的 class。

页面模型为：

export class Player {
  constructor () {
    this.play = ClientFunction(() => document.querySelector('.video-stream').play());
    this.pause = ClientFunction(() => document.querySelector('.video-stream').pause());
    this.currentTime = ClientFunction(() => document.querySelector('.video-stream').currentTime);
  }

  // a function to set video time

}

如何将 setTime 变成页面模型中的函数？

Answer 1

您需要在 setTime 客户端函数中指定 time 参数：

ClientFunction((time) => document.querySelector('.video-stream').currentTime = time);

修改后的测试：

test('Testing YouTube', async t => {
    const play        = ClientFunction(() => document.querySelector('.video-stream').play());
    const pause       = ClientFunction(() => document.querySelector('.video-stream').pause());
    const currentTime = ClientFunction(() => document.querySelector('.video-stream').currentTime);
    const setTime     = ClientFunction((time) => document.querySelector('.video-stream').currentTime = time);

    await pause();

    await setTime(60);
    console.info(`Video time is ${await currentTime()}`);

    await play();

    await t.wait(10000);
    console.info(`Video time is ${await currentTime()}`);
});

我们计划 add the --autoplay-policy=no-user-gesture-required flag to the default Chrome flags. At present, you should run your test in the following way:

testcafe "chrome --autoplay-policy=no-user-gesture-required" test.js

结果：

 Running tests in:
 - Chrome 73.0.3683 / Windows 7.0.0

 Portal Experience playback
 Video time is 60
 Video time is 70.130405
  √ Testing YouTube


  1 passed (22s)

设置视频当前时间的 Testcafe ClientFunction 属性

Testcafe ClientFunction to set video currentTime property

javascript

youtube

testing

e2e-testing

testcafe