我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

程序员的世界就是简单而快乐。

最近在编写，我的工程化体系课程实在太枯燥了。在编写E2E测试案例时候，无意间想到 E2E 框架可以操纵网页，是不是可以实现一键登录B栈【舞蹈区】选择行榜一小姐姐跳舞呀。

什么是E2E测试

首先先介绍一下，E2E测试框架是什么。简单来说，就是模拟真实用户使用场景进行测试，预期应用能够正常响应用户的操作，其关键点在于模拟用户使用环境，模拟用户操作。

Cypress这种成熟的E2E测试框架都会提供成熟的，模拟用户操作的API。比如：

访问网站
选择页面元素
模拟点击
模拟键盘输出

// 访问网站
cy.visit("http://127.0.0.1:8080/");

// 输入信息
cy.get("input").type(" Cypress");

// 点击按钮
cy.get("button").click();

// 获取信息并断言
cy.get("input").should("have.value", "Hello Cypress")

访问B栈【舞蹈区】榜一小姐姐

既然框架中已经包含了这些API，可以模拟浏览器中的各种行为。当然也可以通过他们编写程序自动访问 BiliBili 舞蹈区，并且选择一个视频页进行播放了。

首先安装 Cypress 框架。Cypress需要通过Npm包管理器安装。

pnpm i cypress -D

安装后启动 Cypress

npx cypress open

cypress的默认启动方式是通过界面形式。可以方便的使用UI界面添加测试用例。

Cypress 目前支持E2E测试和组件测试。这里面需要选择，E2E测试。

对于E2E测试的运行时环境也有两种选择，一种是Chrome浏览器，另外一一种是Electron。既然要播放B栈，那么应该选择Chrome浏览器。

选择后会自动打开一个Chrome，与以往的Chrome浏览器不同的是。这个浏览器是带有特别的调试参数启动的。上面有一个黑色的框表示这个Chrome是接收自动测试软件控制的。也就是说Chrome的行为可以被Cypress所控制。这也正是我们需要的效果。因为我们需要Cypress发送指令浏览B站上的指定内容。

点击【New Spec】创建新的用例

然后编写代码

首先创建一个测试单元
使用 cy.visit 访问B栈舞蹈区

describe("B栈摸鱼", () => {
  it("找到榜一小姐姐", () => {
    // 登录舞蹈区
    cy.visit("https://www.bilibili.com/v/dance/");

  });
});

点击运行用例

这个时候可以看到，Chrome的界面右侧显示部分，打开了一个Iframe。iframe直接访问的B栈的舞蹈区。也就说所在这里Cypress成功的访问了B站。

下面实现自动访问榜一功能。其实这个功能就要做两件事

选取视频列表中的第一个链接
模拟点击第一个链接

首先是选取视频列表元素，可以使用 cy.get。 get中实际是Query Selector表达式。通俗的说就是Jquery选择器。这个语法就不过多介绍了。不会的自行百度。通过 Chrome 审查元素查看视频便签，确定选择器。

然后使用 cy,click() 就可以模拟点击了。

最后为了让我们能观看一段时间，可以使用 cy.wait()。不然的话页面会自动关闭。

describe("B栈摸鱼", () => {
  it("找到榜一小姐姐", () => {
    // 登录舞蹈区
    cy.visit("https://www.bilibili.com/v/dance/");
    // 选择榜一小姐姐
    cy.get(".bili-video-card__info--tit a").first().click();
    // 摸鱼时间
    cy.wait(10 * 1000);
  });
});