Material Design 是 Google 推出的一种设计风格，旨在提供一种则能够兼具美观和实用的设计语言，它的应用已经深入到所有的 Google 产品中。

随着 Material Design 的流行，越来越多的前端应用开始采用它，但是随之而来的问题也是丛生的，我们需要对这些应用进行自动化测试，以保证应用的质量和稳定性。而 Cypress 作为一个非常好的自动化测试框架，在与 Material Design 库集成后，可以帮助我们完成更加高效的自动化测试。

本文将介绍 Cypress 与 Material Design 集成的方法，以及如何通过 Cypress 完成自动化测试，并在最后通过一个简单的示例来演示这些概念。

设置 Cypress

在开始这个过程之前，你需要先安装 Cypress，并且在你的项目中设置 Cypress。

设置 Cypress 非常容易。你可以在你的项目中通过 npm 进行安装，安装 Cypress 也只需要一行代码：

npm install cypress

一旦安装完成，你需要使用 npm run scripts 的形式启动 Cypress。它会自动寻找你项目中的配置文件，然后通过它来启动你的测试用例。你可以手动编写这个配置文件，或者通过简单地回答一些问题来生成它。

创建测试用例

下面我们需要编写测试用例。我们首先需要在 Cypress 中编写测试用例，并使用 Material Design 库中的元素来测试应用的功能。

在 Cypress 中，每个测试用例都是通过一个 it 语句来定义的。例如，以下代码片段定义了一个简单的测试用例，用于测试一个 Material Design 库中的输入框：

it('should input a string', () => {
  cy.get('input[aria-label="Input Label"]').type('Hello World')
})

在这个例子中，我们使用一个 CSS 选择器来获取输入框，然后用 type 命令来键入 “Hello World” 字符串。

以上代码是一个很好的起点，但这种方式测试是基于”文本比较”来测试的，我们无法判断其它的 UI 行为是否如预期的工作。

使用 Cypress Testing Library

为了让测试更加贴近用户操作，我们可以使用 Cypress Testing Library（https://testing-library.com/docs/cypress-testing-library/intro）库来检测应用程序是否按预期工作。

Testing Library 是一个 JavaScript 库，它提供了一些可以帮助你进行测试的工具，这些工具基于许多最佳实践和类似于自然语言的 API。它的目标是减少测试用例和应用程序之间的耦合，从而更好地模拟用户的操作。使用以下命令安装Testing Library：

npm install -D @testing-library/cypress

安装完成后，您就可以使用 Testing Library 的命令来编写测试用例。

在以下示例中，我们将编写一个测试用例，用于确保材料设计库中的抽屉组件能成功打开。

首先，我们需要获取元素：

import { getB />yTestId } from '@testing-library/cypress'

it('toggle drawer', () => {
  cy.visit('/')

  getByTestId('drawer-toggle').click()
})

在上面的例子中，我们使用了 getB />yTestId 命令和 Testing Library 一起使用，用于获取通过data-testid属性指定的元素。然后，我们对它进行操作，确保它能成功打开。

Validating the Drawer Hide functionality with additional assertions, which includes CSS style matching that props to the menu being open or hidden.

现在，我们需要编写两个新的测试用例来测试抽屉隐藏的功能，以确保代码的质量和应用的可用性。内容如下：

测试抽屉是否被正确关闭:

// javascriptcn.com 代码示例
import { getByTestId } from '@testing-library/cypress'


it('Drawer Hide', () => {
  cy.visit('/')

  cy.get('nav').should('have.css', 'visibility', 'visible')

  getByTestId('drawer-toggle').click()

  cy.get('nav').should('not.be.visible')
})

测试导航栏组件是否存在:

import { getByTestId } from '@testing-library/cypress'


it('has Header', () => {
  cy.visit('/')

  getByTestId('header').should('be.visible')
})

创建测试文件

现在，我们需要为测试用例创建一个测试文件。 Cypress 安装后会自动在项目中生成一个目录。我们可以在该目录下创建一个名为 integration/ 的目录，然后在其中创建一个名为 app.spec.js 的文件。在该文件中，我们加载我们所定义的测试用例并运行他们：

describe('Material Design Tests', () => {
  require('../unit/cypress-tests');
})

在这个例子中，我们使用了 Cypress 的 describe 命令来创建一个测试套件，然后通过 require 命令将测试用例加载到该套件中。这个例子仅仅使用了一个测试用例，如果您有多个测试用例，那么您可以再文件中加载他们，然后一起运行。

执行测试用例

我们可以使用以下命令来运行测试：

npm run cypress:open

此命令将 Cypress 启动到 GUI。然后，您可以选择一个测试文件和一个测试用例，并在浏览器中看到测试的运行情况。然而，整个过程还可以通过命令行完成，而不使用 GUI：

npm run cypress:run

这将使用 Cypress 运行所有的测试用例，然后将结果保存到命令行中，其中包括每个测试用例的状态。

总结

Cypress 是一个强大的自动化测试框架，它与 Material Design 库集成可以帮助您更好地测试 Material Design 应用程序。在本文中，我们介绍了 Cypress 的使用，并展示了如何通过 Cypress Testing Library 编写更好的测试用例。通过这些知识，您现在可以使用 Cypress 来测试您的 Material Design 应用程序，并通过自动化测试框架来确保它们的质量和可用性。

示例代码

以下是一个基于 Material Design 库的示例代码，您可以按照上面的步骤进行安装和运行:

import { getByTestId } from '@testing-library/cypress

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/654645817d4982a6eb022b79) ，转载请注明来源
本文地址：[https://www.javascriptcn.com/post/654645817d4982a6eb022b79](https://www.javascriptcn.com/post/654645817d4982a6eb022b79)

Cypress 与 Material Design 集成指南：让你轻松实现 Material Design 应用的自动化测试