用 Cypress 和 Siri 在 B 站看视频

2023-12-27 12:11:15

大家好，我是[您的名字]，一名技术博客创作专家。今天，我想和大家分享一个有趣的话题：如何用 Cypress 和 Siri 在 B 站上用语音控制视频播放。

前言

最近在编写我的工程化体系课程时，我发现它实在太枯燥了。在编写 E2E 测试案例时，我无意间想到 E2E 框架可以操纵网页元素。于是，我开始思考能否用 Cypress 和 Siri 来控制 B 站的视频播放。经过一番尝试，我成功了！现在，我可以通过语音控制来播放、暂停、快进、快退和调整音量。

如何实现

1. 安装 Cypress

首先，我们需要安装 Cypress。Cypress 是一个流行的 E2E 测试框架，它可以轻松地操纵网页元素。我们可以通过以下命令来安装 Cypress：

npm install cypress --save-dev

2. 创建 Cypress 测试项目

安装完成后，我们需要创建一个 Cypress 测试项目。我们可以通过以下命令来创建项目：

npx cypress init

3. 编写 Cypress 测试脚本

接下来，我们需要编写 Cypress 测试脚本来控制 B 站的视频播放。我们可以创建一个名为 b站视频控制.spec.js 的文件，并添加以下代码：

describe('B站视频控制', () => {
  it('播放视频', () => {
    cy.visit('https://www.bilibili.com/video/BV14R4y167o8');
    cy.get('.bilibili-player-video-btn-play').click();
    cy.wait(1000);
  });

  it('暂停视频', () => {
    cy.get('.bilibili-player-video-btn-pause').click();
    cy.wait(1000);
  });

  it('快进视频', () => {
    cy.get('.bilibili-player-video-btn-forward').click();
    cy.wait(1000);
  });

  it('快退视频', () => {
    cy.get('.bilibili-player-video-btn-backward').click();
    cy.wait(1000);
  });

  it('调整音量', () => {
    cy.get('.bilibili-player-video-volume-slider').trigger('mousemove', { clientX: 100, clientY: 100 });
    cy.wait(1000);
  });
});