javascript - 如何测试当前是否正在播放声音？

Question

我一直在尝试覆盖 <audio>通过自动化测试标记，首先只是确认它正在播放。

我使用的是常用的 Angular Testing 套件、karma 和 Protractor 。

"devDependencies": {
    "karma": "~0.10",
    "protractor": "~0.20.1",
    "http-server": "^0.6.1",
    "bower": "^1.3.1",
    "shelljs": "^0.2.6",
    "karma-junit-reporter": "^0.2.2",
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-watch": "~0.4.3"
}

在 Karma 方面，问题是我无法找到一种方法来添加可能在测试中使用的资源，因此没有文件可以在其中播放。如果有办法指向要播放的文件，那应该不是问题，因为我可以简单地检查 paused元素的属性。

在 2e2 方面有一个完美运行的演示应用程序，测试可以很好地加载它并且单击其中一个按钮不会产生任何错误(如果您手动尝试它会触发声音)。然而，在 Protractor API 中，我找不到任何可以让我确保声音实际播放或允许我访问元素的东西，甚至是 document。和 angular此处不可用(作为 2e2 测试有意义)或只是用于检查元素属性的 API。

beforeEach(function() {
    browser.get("index.html")
});

it("Ensure the player is playing", function () {

    $$("button").first().click();

    // what to do?

});

我考虑过可能模拟音频 API 并简单地伪造正在更新的属性，但我仍在测试我的代码和 currentTime当我的最终目标是测试音频 Sprite 上的声音是否按预期开始和停止时，将很难准确模拟。

理想情况下，我想在单元测试中涵盖它，它应该在哪里，所以能够使用工作资源将是理想的。这样一个简单的expect(!element[0].paused).toEqual(true);足以知道它正在播放。

如何在我的单元测试中提供一个文件作为音频源？

Answer 1

假设您使用 HTML5 播放声音 <audio />在引擎盖下，您可以执行以下操作 - 基本上使用 browser.executeScript访问 pause就像你想要的那样。你需要有一种方法来导航到你的 <audio />标签;在这种情况下，它是第一个。这在我的沙箱中有效。 注意:我不隶属于 angular-media-player - 这只是 Google 上我可以使用 Protractor 的第一个结果 - 我尽可能重复使用。

describe('angularjs homepage', function() {
  it('should have a title', function() {
    browser.get('http://mrgamer.github.io/angular-media-player/interactive.html');

    // add a song to the playlist
    element(by.repeater('song in prefabPlaylist')).click();

    // hook into the browser
    var isPaused = function () {
        return browser.executeScript(function () {
            return document.getElementsByTagName('audio')[0].paused;
        });
    };

    // make sure it's not playing
    expect(isPaused()).toBe(true);

    // start playing
    element(by.css('div[ng-click="mediaPlayer.playPause()"]')).click();

    // for some reason these were needed for me; maybe it's the way the directive is implemented?
    browser.waitForAngular();
    browser.waitForAngular();
    browser.waitForAngular();

    // make sure it's playing
    expect(isPaused()).toBe(false);

    // pause
    element(by.css('div[ng-click="mediaPlayer.playPause()"]')).click();

    // make sure it's paused
    expect(isPaused()).toBe(true);
  });
});

您也可以使用其他人的指令，例如本网站(或任何其他网站)，而不必担心单元测试(他们可能已经为您完成了)，只需评估其对象的范围并确保您正在设置它的属性在您的 E2E 测试中正确，如果您不喜欢，甚至不测试声音 executeScript .