npm 包 the-e2e 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端进行自动化测试的时候，e2e （端到端）测试是一个非常重要的环节。通过 e2e 测试，我们可以对我们的应用的实际使用场景进行测试，从而保证应用的可靠性和稳定性。

在进行 e2e 测试的时候，我们通常需要编写复杂的测试代码来模拟用户交互和场景，因此对于测试代码的质量和可维护性有很高的要求。在前端生态系统中，有很多优秀的测试工具和框架供我们使用，比如 Selenium、Cypress 等等。这些工具和框架能够有效地简化我们的测试代码和流程，提高测试的可靠性和效率。

the-e2e 是一个基于 Puppeteer 的前端 e2e 测试工具库，通过提供一组高度集成的 API，使得我们在进行 e2e 测试的时候，能够快速、简单、高效地实现测试代码的编写和维护。在本文中，我们将介绍 the-e2e 的基本使用方法，以及一些高级特性的介绍和应用。

安装和使用

我们可以通过 npm 来安装 the-e2e：

npm install the-e2e --save-dev

安装完成之后，我们需要在测试代码文件中引入库：

const { TheE2E } = require('the-e2e');

在编写测试代码之前，我们需要构造一个 TheE2E 实例。在构造过程中，我们可以指定 Puppeteer 的一些配置参数和生命周期事件的回调函数：

-- -------------------- ---- -------
-- ------------ --------- ----------
----- ------ - --- --------
  -- ------------- -----
  -- ------- -----------------------------------------------------------------------------------
  -------------- - --------- ----- ------- --- --

  -- ----------- - ----------- --------
  -- ------- --------------------------------------------------------------
  ------------ ----- ------ -- -
    ----- ------------------------------------
  --

  -- ---------- - ---------- --------
  -- ------- -------------------------------------------------------------
  ----------- ----- ------ -- -
    ----- --------------
  --

  -- --------- - --------- --------
  -- ------- ------------------------------------------------------------
  ---------- ----- ------ -- -
    ----- -------------------------
  --

  -- -------- - -------- --------
  -- ------- -----------------------------------------------------------
  --------- ----- -- -- -
    ------------------------
  --
---

在创建 TheE2E 实例之后，我们就可以通过 theE2E 对象来访问各种测试 API。下面是一些常用的测试 API 的介绍和使用方法：

基本 API

visit(url: string)

该 API 可以在测试页面中访问指定的 URL：

await theE2E.visit('http://example.com');

getElement(selector: string)

该 API 可以通过指定选择器来获取页面中的元素：

const buttonElement = await theE2E.getElement('button.submit');

clickElement(selector: string)

该 API 可以通过指定选择器找到页面中的元素，并进行点击：

await theE2E.clickElement('button.submit');

typeText(selector: string, text: string)

该 API 可以通过指定选择器找到页面中的输入框，并模拟用户的输入：

await theE2E.typeText('input[type="text"]', 'hello');

断言 API

expect(selector: string)

该 API 可以通过指定选择器来断言页面中是否存在某个元素：

await theE2E.expect('button.submit').toBeVisible(); // 断言按钮可见

expect(getter: () => any)

该 API 可以通过自定义回调函数来进行断言：

await theE2E.expect(() => window.performance.timing.loadEventEnd - window.performance.timing.navigationStart).toBeLessThan(5000); // 断言页面加载时间小于 5s

expect(getter: () => any).not

该 API 可以通过自定义回调函数来进行反向断言：

await theE2E.expect(() => window.performance.timing.loadEventEnd - window.performance.timing.navigationStart).not.toBeGreaterThan(1000); // 断言页面加载时间不大于 1s

高级用法

使用 TypeScript 智能提示

the-e2e 库对 TypeScript 友好。通过对 TheE2E 类型的定义，我们可以在 IDE 中获得智能提示。

import { TheE2E, E2EElement } from 'the-e2e';

const theE2E = new TheE2E();

const button: E2EElement = await theE2E.getElement('button.submit');

继承 TheE2E 类

通过继承 TheE2E 类，我们可以自定义测试 API 和生命周期函数。

-- -------------------- ---- -------
------ - ------ - ---- ----------

----- ----- ------- ------ -
  ----- ------- -
    -- ---------
  -
-

----- ----- - --- --------

----- --------------

----- ------ - ----- ----------------------------------

结论

通过本文对 the-e2e 库的介绍，我们了解了如何使用该库来进行前端 e2e 测试。the-e2e 库提供了一组非常简单、高效、易维护的 API，可以帮助我们大大提高测试代码的可靠性和效率。

在具体应用中，我们也可以根据业务场景进行一些深度的定制和扩展。希望本文能够对你在前端 e2e 测试方面的工作和学习有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/the-e2e