cypress-小提琴 
生成来自 HTML 和 JS 的 Cypress 测试
通过创建一个小活的HTML小提琴并运行针对它的E2E测试,对Cypress测试进行即时实验.
安装
Cypress是此模块的同级依赖. 通过运行安装当前版本的 Cypress npm i -D cypress。 。 。 .
在安装 Cypress后, 通过 npm 安装此模块 :
npm i -D @cypress/fiddle
然后通过添加以下行来加载自定义命令 cypress/support/index.js
// adds "cy.runExample()" command
import '@cypress/fiddle'
使用
创建单一测试
您可以用一个 html 包含 HTML 和 a 的属性 test 包含 Cypress 命令的属性,并运行测试.
举例来说 cypress/integration/spec.js 文件 :
// loads TypeScript definition for Cypress
// and "cy.runExample" custom command
/// <reference types="@cypress/fiddle" />
const helloTest = {
html: `
<div>Hello</div>
`,
test: `
cy.get('div').should('have.text', 'Hello')
`
}
it('tests hello', () => {
cy.runExample(helloTest)
})
产生
参数
测试对象可具有多个属性,参见 标准/指数.d.ts 为所有人.
test需要带有 Cypress 命令的 JavaScript
其余的属性是可选的
html在测试开始前作为 DOM 节点挂起name在页面上方显示的名称,否则将使用测试标题description名称下的额外测试描述,支持 Markdown 通过 安全标记commonHtml是附加到活的 HTML (如果有) 元素上的额外的 HTML 标记。 用于装入外部样式表或样式而无需对每个 HTML 块进行分解
下一个属性不被使用 cy.runExample 但用于 testExamples 函数.
skip创建跳过测试it.skiponly创建独家测试it.only
包含的脚本
您可以使用环境变量块在 cypress.json 文件
{
"env": {
"cypress-fiddle": {
"scripts": [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
]
}
}
}
样式
有时您想要将外部样式表和可能自定义样式 CSS 注入到帧中(我们已经包括了Highlight.js). 通过环境变量通过额外的 CSS 链接 urls 和自定义样式 cypress.json 配置文件 .
{
"env": {
"cypress-fiddle": {
"stylesheets": [
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
],
"style": "body { padding: 1rem; }"
}
}
}
提示 : 设置多行环境变量甚至从插件文件中装入 CSS 文件更为方便.
创建多个测试
而不是写 cy.runExample() 逐个命令,可以将所有测试定义收集到列表或套件的嵌入对象中,并自动创建测试.
例如,这里列出从数组创建的测试:
import { testExamples } from '@cypress/fiddle'
const tests = [
{
name: 'first test',
description: 'cy.wrap() example',
test: `
cy.wrap('hello').should('have.length', 5)
`
},
{
name: 'second test',
description: 'cy.wrap() + .then() example',
test: `
cy.wrap()
.then(() => {
cy.log('In .then')
})
`
}
]
testExamples(tests)
在进行测试的同时,可以跳过测试或者使其具有独家性. 例如,跳过第一个测试时添加一个 skip: true 属性.
{
name: 'first test',
description: 'cy.wrap example',
skip: true
...
}
或通过使用 only: true 属性.
{
name: 'first test',
description: 'cy.wrap example',
only: true
...
}
你可以通过有嵌入物来创建套房. 每个物体要么成为套房,要么成为测试.
import { testExamples } from '@cypress/fiddle'
const suite = {
'parent suite': {
'inner suite': [
{
name: 'a test',
html: `
<div id="name">Joe</div>
`,
test: `
cy.contains('#name', 'Joe')
`
}
],
'list test': {
html: `
<ul>
<li>Alice</li>
<li>Bob</li>
<li>Cory</li>
</ul>
`,
test: `
cy.get('li').should('have.length', 3)
.first().should('contain', 'Alice')
`
}
}
}
testExamples(suite)
查找更多实例 细胞压/整合 文件夹.
标记
这个软件包包括一个JS/CoffeeScript/Markdown预处理器,可以在其中找到并运行测试 .md 文档。 只要用这样的 HTML 注释包围测试:
<!-- fiddle Test name here -->
Add additional text if you want. HTML code block is optional.
```html
<div>Example</div>
```
Test code block that should be run as a test
```js
cy.contains('Bye').should('be.visible')
```
<!-- fiddle-end -->
参见示例 bahmutov/vuepress-cypress-测试-实例 财务报告和审定财务报表 现场现场。阅读博客文章 从 Markdown 文件运行端到端测试 财务报告和审定财务报表 自测试 JAM 页面。 。 。 .
您可以有常见的 HTML 块并分解测试到多个 JavaScript 代码块. 这对一步一步地解释试验很有用
This test has multiple parts. First, it confirms the string value
```js
cy.wrap('first').should('equal', 'first')
```
Then it checks if 42 is 42
```js
cy.wrap(42).should('equal', 42)
```
实际测试是
cy.wrap('first').should('equal', 'first')
cy.wrap(42).should('equal', 42)
仅跳过
你可以跳过小提琴,或者只运行一个类似于 it.skip 财务报告和审定财务报表 it.only
<!-- fiddle.skip this is a skipped test -->
<!-- fiddle.only this is an exclusive test -->
说明: 还有 fiddle.export 修饰相. 这些小提琴在从Markdown进行正常测试时被跳过,但在输出JavaScript specs中导出并启用.
页面标题
如果 Markdown 文件有类似页面标题行 # <some text>,用于创建顶级测试套件
describe('<some text>', () => {
// tests
})
嵌入式套房
你可以把小提琴放进套房 / 作为分隔符
<!-- fiddle Top / nested / test -->
将创建
describe('Top', () => {
describe('nested', () => {
it('test', () => {})
})
})
直播 HTML
在小提琴中可以包括"活"html块——这样的话它们就会成为测试碎片.
<!-- fiddle includes live html -->
<div id="live-block">Live Block</div>
```js
cy.contains('#live-block', 'Live Block').should('be.visible')
```
<!-- fiddle-end -->
在包含HTML源片段和活的HTML块时,活的HTML块获胜并会被作为测试片段使用.
<!-- fiddle includes both live and html block -->
```html
<div id="my-block">Block</div>
```
<div id="live-block">Live Block</div>
```js
// when including both live HTML block and
// html code block, the live HTML block wins
cy.contains('#live-block', 'Live Block').should('be.visible')
cy.contains('#my-block', 'Block').should('not.exist')
```
<!-- fiddle-end -->
常见 Live HTML
如果您要在 HTML 块前装入通用的 HTML, 但不想在 HTML 片断中显示, 请将它放入这样的评论中
<!-- fiddle-markup
<link rel="stylesheet" href="some CSS URL">
<style>
body {
padding: 2rem;
}
</style>
-->
您可以使用这种方法加载样式和外部的CDN脚本.
隐藏小提琴在Markdown
你可以"躲"在Markdown内部的小提琴 这样一页 可以测试自己。见 cypress/集成/隐藏-中小.md 实例.
标记
渲染页面
注意只显示摘要的方式
测试运行器
说明: 默认情况下,摘要元素在 HTML 中显示。 你可以完全使用小提琴
<details style="display:none">
...
</details>
安装
在您的插件文件使用中
const mdPreprocessor = require('@cypress/fiddle/src/markdown-preprocessor')
module.exports = (on, config) => {
on('file:preprocessor', mdPreprocessor)
}
进 cypress.json 文件允许 Markdown 文件
{
"testFiles": "*.md"
}
警告: 第5401号问题
从Markdown小提琴导出JS规格
# saves path/to/md.js file
npx export-fiddle <path/to/md>
# adds optional "beforeEach" hook with cy.visit(url)
npx export-fiddle <path/to/md> --before-each <url>
# adds optional "before" hook with cy.visit(url)
npx export-fiddle <path/to/md> --before <url>
调试
查看调试日志, 使用 DEBUG=@cypress/fiddle 当运行 Cypress 时.