Cypress Testing Library(Cypress 测试库)

简单而完整的自定义Cypress命令和实用程序,鼓励良好的测试实践。「? Simple and complete custom Cypress commands and utilities that encourage good testing practices.」

Github星跟踪图

Cypress 测试库

简单而完整的自定义Cypress命令和实用程序,鼓励良好的测试实践。

文档

阅读文档 | 编辑文档

问题

你想在你的 Cypress 测试中使用 DOM 测试库 方法。

本解决方案

这允许你在测试中使用所有有用的 DOM 测试库 方法。

安装

这个模块是通过 npm 发布的,npm 与 node 捆绑在一起,应该作为你的项目的 devDependencies 之一来安装。

npm install --save-dev @testing-library/cypress

使用 TypeScript

Typings 在 @types/testing-library__cypress 的 DefinitelyTyped 中定义,并应在 tsconfig.json 中添加如下内容。

{
  "compilerOptions": {
    "types": ["cypress", "@types/testing-library__cypress"]
  }
}

VS Code JavaScript 智能感知

如果你没有使用 TypeScript,而是使用 VS Code,并且想用这个库中的方法来完成代码,只需在你的项目的根级(root-level)jsconfig.json 文件中添加以下一行。

{
  "include": ["node_modules/cypress", "./cypress/**/*.js"]
}

使用方法

Cypress 测试库扩展了 Cypress 的 cy 命令。

将这行添加到你的项目的 cypress/support/commands.js 中。

import '@testing-library/cypress/add-commands'

你现在可以使用所有 DOM 测试库的 findBy 和 findAllBy 命令。请参阅 DOM 测试库 文档以获得参考

你可以在这里找到所有库的定义

要配置 DOM 测试库,请使用以下自定义命令。

cy.configureCypressTestingLibrary(config)

展示一些简单的例子(来自 cypress/integration/find.spec.js)。

cy.findAllByText('Button Text').should('exist')
cy.findAllByText('Non-existing Button Text').should('not.exist')
cy.findAllByLabelText('Label text', {timeout: 7000}).should('exist')
cy.findAllByText('Jackie Chan').click()

// findAllByText _inside_ a form element
cy.get('form')
  .findAllByText('Button Text')
  .should('exist')

与 DOM 测试库的区别

Cypress 测试库同时支持 jQuery 元素和 DOM 节点。这是必要的,因为 Cypress 使用 jQuery 元素,而 DOM Testing Library 则期望使用 DOM 节点。当你链式查询时,它会从集合的主题中获取第一个 DOM 节点,并将其作为 DOM 测试库函数的容器参数。

get* 和 query* 查询被禁用,find* 查询不使用 DOM Testing Library 的 Promise API,而是转发到 get* 查询,并使用 Cypress 内置的重试性,使用 get* API 的错误信息作为错误信息转发,如果查询失败。

findAll* 可以选择多个元素,在功能上更接近于 Cypress 内置命令的工作方式,如果找到多个符合标准的元素,find* 命令就会失败,这不是 Cypress 内置命令的工作方式,而是为了更接近于其他测试库的兼容性而提供的。

当只找到一个元素时,Cypress 会处理动作。例如,下面的操作将不需要限制在只有一个返回元素的情况下工作。如果 findAllByText 返回的元素超过 1 个,cy.click 将自动失败。

cy.findAllByText('Some Text').click()

如果你打算执行一个选择器只返回 1 个元素,那么如果发现一个以上的元素,下面的例子都会失败。

cy.findAllByText('Some Text').should('have.length', 1)
cy.findByText('Some Text').should('exist')

配置 testIdAttribute

如果你想把默认的 testId 从 data-testId 改为 data-test-id,请添加到你的项目的 cypress/support/index.js 中。

import {configure} from '@testing-library/cypress'
configure({testIdAttribute: 'data-test-id'})

它接受 DOM 测试库 中列出的所有配置。

其他解决方案

我不知道有什么,如果有的话,请在这里提出拉取请求并添加到这里

许可证

MIT


(The first version translated by vz on 2020.08.30)

主要指标

概览
名称与所有者testing-library/cypress-testing-library
主编程语言JavaScript
编程语言JavaScript (语言数: 3)
平台Linux, Mac, Windows
许可证MIT License
所有者活动
创建于2018-04-06 14:31:43
推送于2025-01-21 14:24:52
最后一次提交
发布数66
最新版本名称v10.0.3 (发布于 )
第一版名称v1.0.0 (发布于 )
用户参与
星数1.8k
关注者数30
派生数157
提交数190
已启用问题?
问题数116
打开的问题数37
拉请求数138
打开的拉请求数5
关闭的拉请求数25
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?