自动化测试框架[Cypress自定义测试报告详解]
前提
- 已经熟练掌握了Cypress的基本知识，请参考自动化测试框架[Cypress概述]和自动化测试框架[各自动化测试框架比较]
- 已经熟练掌握Cypress环境配置，请参考自动化测试框架[Cypress环境搭建与配置详解]
和自动化测试框架[Cypress测试实例凸显其优势]
- 已经熟练掌握Cypress框架结构，请参考自动化测试框架[Cypress框架拆解]
和自动化测试框架[Cypress重试机制]
- 已经熟练掌握Cypress内置测试报告，请参考自动化测试框架[Cypress自定义测试报告详解]
自定义测试报告
Machawesome是与JavaScript测试框架Mocha一起使用的自定义报告，运行在Node.js8以上，并与mochawesome-report-generator结合使用从而生成独立的HTML/CSS报告
安装Mocha和Mochawesome
命令行执行npm install [email protected]和npm install --save-dev mochawesome
C:\Users\Administrator>npm install --save-dev [email protected]
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN Administrator No description
npm WARN Administrator No repository field.
npm WARN Administrator No README data
npm WARN Administrator No license field.
+ [email protected]
added 13 packages from 435 contributors and audited 380 packages in 7.501s
12 packages are looking for funding
run `npm fund` for details
found 5 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
C:\Users\Administrator>npm install --save-dev mochawesome
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN [email protected] requires a peer of mocha@>=7 but none is installed. You must install peer dependencies yourself.
npm WARN Administrator No description
npm WARN Administrator No repository field.
npm WARN Administrator No README data
npm WARN Administrator No license field.
+ [email protected]
added 61 packages from 29 contributors and audited 441 packages in 14.105s
13 packages are looking for funding
run `npm fund` for details
found 5 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
执行测试生成报告
使用yarn执行测试生成mochawesome报告
首先在cypress.json文件中有如下配置
{
"reporter": "junit",
"reporterOptions": {
"mochaFile": "results/test_report_[hash].xml",
"toConsole": true
}
}
在命令函执行命令yarn cypress:run --reporter=mochawesome
D:\Cypress>yarn cypress:run --reporter=mochawesome
yarn run v1.22.10
$ cypress run --reporter=mochawesome
====================================================================================================
(Run Starting)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Cypress: 6.2.0 │
│ Browser: Electron 87 (headless) │
│ Specs: 1 found (examples\actions.spec.js) │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\actions.spec.js (1 of 1)
Actions
√ .type() - type into a DOM element (27538ms)
√ .focus() - focus on a DOM element (20193ms)
√ .blur() - blur off a DOM element (853ms)
√ .clear() - clears an input or textarea element (1918ms)
√ .submit() - submit a form (684ms)
√ .click() - click on a DOM element (3405ms)
√ .dblclick() - double click on a DOM element (946ms)
√ .rightclick() - right click on a DOM element (472ms)
√ .check() - check a checkbox or radio element (1618ms)
√ .uncheck() - uncheck a checkbox element (1593ms)
√ .select() - select an option in a <select> element (1304ms)
√ .scrollIntoView() - scroll an element into view (1123ms)
√ .trigger() - trigger an event on a DOM element (452ms)
√ cy.scrollTo() - scroll the window or element to a position (2549ms)
14 passing (1m)
[mochawesome] Report JSON saved to D:\Cypress\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to D:\Cypress\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 14 │
│ Passing: 14 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 1 minute, 8 seconds │
│ Spec Ran: examples\actions.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
Compression progress: 63%
- Finished processing: D:\Cypress\cypress\videos\examples\actions.spec.js.mp4 (17 seconds)
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ √ examples\actions.spec.js 01:08 14 14 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
√ All specs passed! 01:08 14 14 - - -
Done in 106.32s.
执行结果中已经打印出[mochawesome] Report JSON saved to D:\Cypress\mochawesome-report\mochawesome.json和[mochawesome] Report HTML saved to D:\Cypress\mochawesome-report\mochawesome.html
![自动化测试框架[Cypress自定义测试报告详解]_第1张图片](http://img.e-com-net.com/image/info8/3edb458135d7487caa66b8d306d130cc.jpg)
使用Cypress执行测试生成mochawesome报告
执行命令cypress run --reporter=mochawesome,结果如下
C:\Users\Administrator\node_modules\.bin>cypress run --reporter=mochawesome
====================================================================================================
(Run Starting)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Cypress: 6.1.0 │
│ Browser: Electron 87 (headless) │
│ Specs: 20 found (examples\actions.spec.js, examples\aliasing.spec.js, examples\assertions │
│ .spec.js, examples\connectors.spec.js, examples\cookies.spec.js, examples\cypress_ │
│ api.spec.js, examples\files.spec.js, examples\local_storage.spec.js, examples\loca │
│ tion.spec.j...) │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\actions.spec.js (1 of 20)
Actions
√ .type() - type into a DOM element (6374ms)
√ .focus() - focus on a DOM element (920ms)
√ .blur() - blur off a DOM element (706ms)
√ .clear() - clears an input or textarea element (901ms)
√ .submit() - submit a form (883ms)
√ .click() - click on a DOM element (2353ms)
√ .dblclick() - double click on a DOM element (628ms)
√ .rightclick() - right click on a DOM element (747ms)
√ .check() - check a checkbox or radio element (1422ms)
√ .uncheck() - uncheck a checkbox element (1473ms)
√ .select() - select an option in a <select> element (1144ms)
√ .scrollIntoView() - scroll an element into view (565ms)
√ .trigger() - trigger an event on a DOM element (513ms)
√ cy.scrollTo() - scroll the window or element to a position (2511ms)
14 passing (24s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 14 │
│ Passing: 14 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 24 seconds │
│ Spec Ran: examples\actions.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (5 seconds)
mples\actions.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\aliasing.spec.js (2 of 20)
Aliasing
√ .as() - alias a DOM element for later use (1511ms)
√ .as() - alias a route for later use (1827ms)
2 passing (5s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 2 │
│ Passing: 2 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 4 seconds │
│ Spec Ran: examples\aliasing.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\aliasing.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\assertions.spec.js (3 of 20)
Assertions
Implicit Assertions
√ .should() - make an assertion about the current subject (1565ms)
√ .and() - chain multiple assertions together (297ms)
Explicit Assertions
√ expect - make an assertion about a specified subject (306ms)
√ pass your own callback function to should() (279ms)
√ finds element by class name regex (290ms)
√ can throw any error (264ms)
√ matches unknown text between two elements (293ms)
√ assert - assert shape of an object (298ms)
√ retries the should callback until assertions pass (1829ms)
9 passing (8s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 9 │
│ Passing: 9 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 7 seconds │
│ Spec Ran: examples\assertions.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (2 seconds)
mples\assertions.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\connectors.spec.js (4 of 20)
Connectors
√ .each() - iterate over an array of elements (1467ms)
√ .its() - get properties on the current subject (299ms)
√ .invoke() - invoke a function on the current subject (267ms)
√ .spread() - spread an array as individual args to callback function (236ms)
.then()
√ invokes a callback function with the current subject (315ms)
√ yields the returned value to the next command (284ms)
√ yields the original subject without return (270ms)
√ yields the value yielded by the last Cypress command inside (253ms)
8 passing (5s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 8 │
│ Passing: 8 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 5 seconds │
│ Spec Ran: examples\connectors.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\connectors.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\cookies.spec.js (5 of 20)
Cookies
√ cy.getCookie() - get a browser cookie (1889ms)
√ cy.getCookies() - get browser cookies (407ms)
√ cy.setCookie() - set a browser cookie (292ms)
√ cy.clearCookie() - clear a browser cookie (398ms)
√ cy.clearCookies() - clear browser cookies (366ms)
5 passing (5s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 5 │
│ Passing: 5 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 5 seconds │
│ Spec Ran: examples\cookies.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\cookies.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\cypress_api.spec.js (6 of 20)
Cypress.Commands
√ .add() - create a custom command (1881ms)
Cypress.Cookies
√ .debug() - enable or disable debugging (475ms)
√ .preserveOnce() - preserve cookies by key (476ms)
√ .defaults() - set defaults for all cookies (297ms)
Cypress.arch
√ Get CPU architecture name of underlying OS (306ms)
Cypress.config()
√ Get and set configuration options (296ms)
Cypress.dom
√ .isHidden() - determine if a DOM element is hidden (280ms)
Cypress.env()
√ Get environment variables (264ms)
Cypress.log
√ Control what is printed to the Command Log (316ms)
Cypress.platform
√ Get underlying OS name (244ms)
Cypress.version
√ Get current version of Cypress being run (253ms)
Cypress.spec
√ Get current spec information (275ms)
12 passing (7s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 12 │
│ Passing: 12 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 6 seconds │
│ Spec Ran: examples\cypress_api.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\cypress_api.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\files.spec.js (7 of 20)
Files
√ cy.fixture() - load a fixture (1773ms)
√ cy.fixture() or require - load a fixture (263ms)
√ cy.readFile() - read file contents (290ms)
√ cy.writeFile() - write to a file (1042ms)
4 passing (5s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 4 │
│ Passing: 4 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 5 seconds │
│ Spec Ran: examples\files.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\files.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\local_storage.spec.js (8 of 20)
Local Storage
√ cy.clearLocalStorage() - clear all data in local storage (2526ms)
1 passing (4s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 1 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 4 seconds │
│ Spec Ran: examples\local_storage.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\local_storage.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\location.spec.js (9 of 20)
Location
√ cy.hash() - get the current URL hash (2272ms)
√ cy.location() - get window.location (269ms)
√ cy.url() - get the current URL (260ms)
3 passing (5s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 3 │
│ Passing: 3 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 4 seconds │
│ Spec Ran: examples\location.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\location.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\misc.spec.js (10 of 20)
(node:5624) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 preprocessor:close listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit
Misc
√ .end() - end the command chain (2127ms)
√ cy.exec() - execute a system command (418ms)
√ cy.focused() - get the DOM element that has focus (479ms)
√ cy.wrap() - wrap an object (443ms)
Cypress.Screenshot
√ cy.screenshot() - take a screenshot (3934ms)
√ Cypress.Screenshot.defaults() - change default config of screenshots (470ms)
6 passing (10s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 6 │
│ Passing: 6 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 1 │
│ Video: true │
│ Duration: 9 seconds │
│ Spec Ran: examples\misc.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Screenshots)
- C:\Users\Administrator\node_modules\.bin\cypress\screenshots\examples\misc.spec. (1000x1800)
js\my-image.png
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (2 seconds)
mples\misc.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\navigation.spec.js (11 of 20)
Navigation
√ cy.go() - go back or forward in the browser's history (3681ms)
√ cy.reload() - reload the page (979ms)
√ cy.visit() - visit a remote url (772ms)
3 passing (8s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 3 │
│ Passing: 3 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 7 seconds │
│ Spec Ran: examples\navigation.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\navigation.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\network_requests.spec.js (12 of 20)
Network Requests
√ cy.request() - make an XHR request (2461ms)
√ cy.request() - verify response using BDD syntax (1681ms)
√ cy.request() with query parameters (952ms)
√ cy.request() - pass result to the second request (1650ms)
√ cy.request() - save response in the shared test context (1612ms)
√ cy.intercept() - route responses to matching requests (2772ms)
6 passing (13s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 6 │
│ Passing: 6 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 13 seconds │
│ Spec Ran: examples\network_requests.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (2 seconds)
mples\network_requests.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\querying.spec.js (13 of 20)
Querying
√ cy.get() - query DOM elements (1697ms)
√ cy.contains() - query DOM elements with matching content (383ms)
√ .within() - query DOM elements within a specific element (306ms)
√ cy.root() - query the root DOM element (291ms)
√ best practices - selecting elements (993ms)
5 passing (6s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 5 │
│ Passing: 5 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 5 seconds │
│ Spec Ran: examples\querying.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (2 seconds)
mples\querying.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\spies_stubs_clocks.spec.js (14 of 20)
Spies, Stubs, and Clock
√ cy.spy() - wrap a method in a spy (2083ms)
√ cy.spy() retries until assertions pass (2548ms)
√ cy.stub() - create a stub and/or replace a function with stub (312ms)
√ cy.clock() - control time in the browser (468ms)
√ cy.tick() - move time in the browser (589ms)
√ cy.stub() matches depending on arguments (67ms)
√ matches call arguments using Sinon matchers (69ms)
7 passing (8s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 7 │
│ Passing: 7 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 8 seconds │
│ Spec Ran: examples\spies_stubs_clocks.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\spies_stubs_clocks.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\traversal.spec.js (15 of 20)
Traversal
√ .children() - get child DOM elements (1513ms)
√ .closest() - get closest ancestor DOM element (400ms)
√ .eq() - get a DOM element at a specific index (503ms)
√ .filter() - get DOM elements that match the selector (396ms)
√ .find() - get descendant DOM elements of the selector (465ms)
√ .first() - get first DOM element (350ms)
√ .last() - get last DOM element (325ms)
√ .next() - get next sibling DOM element (286ms)
√ .nextAll() - get all next sibling DOM elements (293ms)
√ .nextUntil() - get next sibling DOM elements until next el (280ms)
√ .not() - remove DOM elements from set of DOM elements (462ms)
√ .parent() - get parent DOM element from DOM elements (378ms)
√ .parents() - get parent DOM elements from DOM elements (332ms)
√ .parentsUntil() - get parent DOM elements from DOM elements until el (303ms)
√ .prev() - get previous sibling DOM element (345ms)
√ .prevAll() - get all previous sibling DOM elements (311ms)
√ .prevUntil() - get all previous sibling DOM elements until el (447ms)
√ .siblings() - get all sibling DOM elements (318ms)
18 passing (11s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 18 │
│ Passing: 18 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 10 seconds │
│ Spec Ran: examples\traversal.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (3 seconds)
mples\traversal.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\utilities.spec.js (16 of 20)
Utilities
√ Cypress._ - call a lodash method (3442ms)
√ Cypress.$ - call a jQuery method (415ms)
√ Cypress.Blob - blob utilities and base64 string conversion (719ms)
√ Cypress.minimatch - test out glob patterns against strings (380ms)
√ Cypress.moment() - format or parse dates using a moment method (277ms)
√ Cypress.Promise - instantiate a bluebird promise (1279ms)
6 passing (8s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 6 │
│ Passing: 6 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 8 seconds │
│ Spec Ran: examples\utilities.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (2 seconds)
mples\utilities.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\viewport.spec.js (17 of 20)
Viewport
√ cy.viewport() - set the viewport size and dimension (4909ms)
1 passing (7s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 1 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 7 seconds │
│ Spec Ran: examples\viewport.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (3 seconds)
mples\viewport.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\waiting.spec.js (18 of 20)
Waiting
√ cy.wait() - wait for a specific amount of time (6590ms)
√ cy.wait() - wait for a specific route (4124ms)
2 passing (12s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 2 │
│ Passing: 2 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 12 seconds │
│ Spec Ran: examples\waiting.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (2 seconds)
mples\waiting.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\window.spec.js (19 of 20)
Window
√ cy.window() - get the global window object (2600ms)
√ cy.document() - get the document object (295ms)
√ cy.title() - get the title (772ms)
3 passing (6s)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 3 │
│ Passing: 3 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 5 seconds │
│ Spec Ran: examples\window.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\exa (1 second)
mples\window.spec.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: testConfig.js (20 of 20)
登陆
HTML表单登陆测试
1) 登陆成功, 跳转到dashboard页
0 passing (7s)
1 failing
1) 登陆
HTML表单登陆测试
登陆成功, 跳转到dashboard页:
AssertionError: Timed out retrying: expected 'http://localhost:7077/login' to include '/dashboard'
at Context.eval (http://localhost:7077/__cypress/tests?p=cypress\integration\testConfig.js:113:13)
[mochawesome] Report JSON saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to C:\Users\Administrator\node_modules\.bin\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 0 │
│ Failing: 1 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 1 │
│ Video: true │
│ Duration: 7 seconds │
│ Spec Ran: testConfig.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Screenshots)
- C:\Users\Administrator\node_modules\.bin\cypress\screenshots\testConfig.js\登陆… (1280x720)
HTML表单登陆测试 -- 登陆成功, 跳转到dashboard页 (failed).png
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\Users\Administrator\node_modules\.bin\cypress\videos\tes (1 second)
tConfig.js.mp4
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ √ examples\actions.spec.js 00:24 14 14 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\aliasing.spec.js 00:04 2 2 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\assertions.spec.js 00:07 9 9 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\connectors.spec.js 00:05 8 8 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\cookies.spec.js 00:05 5 5 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\cypress_api.spec.js 00:06 12 12 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\files.spec.js 00:05 4 4 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\local_storage.spec.js 00:04 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\location.spec.js 00:04 3 3 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\misc.spec.js 00:09 6 6 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\navigation.spec.js 00:07 3 3 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\network_requests.spec.js 00:13 6 6 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\querying.spec.js 00:05 5 5 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\spies_stubs_clocks.spec.js 00:08 7 7 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\traversal.spec.js 00:10 18 18 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\utilities.spec.js 00:08 6 6 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\viewport.spec.js 00:07 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\waiting.spec.js 00:12 2 2 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ examples\window.spec.js 00:05 3 3 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ × testConfig.js 00:07 1 - 1 - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
× 1 of 20 failed (5%) 02:43 116 115 1 - -
生成HTML格式的报告，如图所示
![自动化测试框架[Cypress自定义测试报告详解]_第2张图片](http://img.e-com-net.com/image/info8/533cd55311204ebc947ef4adea0bf2a8.jpg)
但这样生成报告的形式有个问题，我们只能看到最后一个执行的js的结果，新的会覆盖旧的
使用npm执行测试生成mochawesome报告
这里要注意，npm执行测试还是根据
cypress.json文件里的配置信息
cypress.json文件中有如下配置
{
"reporter": "junit",
"reporterOptions": {
"mochaFile": "results/test_report_[hash].xml",
"toConsole": true
}
}
因此如果执行npm run cypress:run --reporter=mochawesome并不会生成mochawesome报告，而是生成junit相关内容，完全根据cypress.json里的配置，使用npm执行测试，修改cypress.json文件里的配置内容，如下所示
{
"reporter": "mochawesome"
}
然后执行测试
D:\Cypress>npm run cypress:run
> [email protected] cypress:run D:\Cypress
> cypress run
====================================================================================================
(Run Starting)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Cypress: 6.2.0 │
│ Browser: Electron 87 (headless) │
│ Specs: 1 found (examples\actions.spec.js) │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: examples\actions.spec.js (1 of 1)
Actions
√ .type() - type into a DOM element (7289ms)
√ .focus() - focus on a DOM element (513ms)
√ .blur() - blur off a DOM element (782ms)
√ .clear() - clears an input or textarea element (850ms)
√ .submit() - submit a form (909ms)
√ .click() - click on a DOM element (2887ms)
√ .dblclick() - double click on a DOM element (498ms)
√ .rightclick() - right click on a DOM element (511ms)
√ .check() - check a checkbox or radio element (1385ms)
√ .uncheck() - uncheck a checkbox element (1503ms)
√ .select() - select an option in a <select> element (1441ms)
√ .scrollIntoView() - scroll an element into view (637ms)
√ .trigger() - trigger an event on a DOM element (601ms)
√ cy.scrollTo() - scroll the window or element to a position (2556ms)
14 passing (26s)
[mochawesome] Report JSON saved to D:\Cypress\mochawesome-report\mochawesome.json
[mochawesome] Report HTML saved to D:\Cypress\mochawesome-report\mochawesome.html
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 14 │
│ Passing: 14 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 25 seconds │
│ Spec Ran: examples\actions.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: D:\Cypress\cypress\videos\examples\actions.spec.js.mp4 (8 seconds)
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ √ examples\actions.spec.js 00:25 14 14 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
√ All specs passed! 00:25 14 14 - - -
同样也生成了html和json格式的报告
![自动化测试框架[Cypress自定义测试报告详解]_第3张图片](http://img.e-com-net.com/image/info8/68b72be3af244345af2e2242d77a32e6.jpg)
定制化测试报告
首先在integration同级目录下新建文件夹并命名为reporter，然后在该路径下新建定制化报告的js文件，js里写入如下内容
var mocha=require('mocha');
module.exports=MyReporter;
function MyReporter(runner){
mocha.reporters.Base.call(this, runner);
var passes=0;
var failures=0;
runner.on('pass', function(test){
passes++;
console.log('pass:%s', test.fullTitle());
});
runner.on('fail', function(test,err){
failures++;
console.log('fail:%s --error:%s', test.fullTitle(),err.message);
});
runner.on('end', function(){
console.log('用户自定义报告:%d%d', passes, passes+failures);
});
}
然后执行测试
npm run cypress:run --reporter ./cypress/reporter/custom.js
测试结果如下
====================================================================================================
(Run Starting)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Cypress: 6.1.0 │
│ Browser: Electron 87 (headless) │
│ Specs: 1 found (testlogin.js) │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: testlogin.js (1 of 1)
pass:登陆 HTML表单登陆测试 登陆成功, 跳转到dashboard页
用户自定义报告:11
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 1 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 3 seconds │
│ Spec Ran: testlogin.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: C:\cypress1\cypress\videos\testlogin.js.mp4 (3 seconds)
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ √ testlogin.js 00:03 1 1 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
√ All specs passed! 00:03 1 1 - - -
也可以将配置项写入cypress.json文件，如下内容所示
{
"reporter":"cypress/reporter/custom.js"
}
然后命令行就简洁了
npm run cypress:run
生成混合测试报告
Cyrpress官方推荐使用"mocha-multi-reporters"来生成混合测试报告
添加mocha、mocha-multi-reporters、mocha-junit-reporter
Microsoft Windows [版本 10.0.10240]
(c) 2015 Microsoft Corporation. All rights reserved.
D:\Cypress>npm install -save-dev [email protected]
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN [email protected] No repository field.
+ [email protected]
added 13 packages from 435 contributors and audited 230 packages in 9.478s
13 packages are looking for funding
run `npm fund` for details
D:\Cypress>npm install mocha-multi-reporters -save-dev
npm WARN [email protected] No repository field.
+ [email protected]
added 1 package from 4 contributors and audited 231 packages in 2.869s
13 packages are looking for funding
run `npm fund` for details
D:\Cypress>npm install mocha-junit-reporter --save-dev
npm WARN [email protected] No repository field.
+ [email protected]
added 10 packages from 16 contributors and audited 241 packages in 4.072s
13 packages are looking for funding
run `npm fund` for details
配置报告
在D:\Cypress\cypress\reporter新建newcustom.js文件并写入如下内容
{
"reporterEnabled":"spec, json, mocha-junit-reporter"
"reporterOptions":{
"mochaFile":"cypress/results/custom-[hash].xml"
}
}
执行测试
D:\Cypress\node_modules\.bin>cypress run --reporter mocha-multi-reporters --reporter-options configFile=./cypress/reporter/newcustom.json
====================================================================================================
(Run Starting)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Cypress: 6.2.0 │
│ Browser: Electron 87 (headless) │
│ Specs: 1 found (testConfig.js) │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: testConfig.js (1 of 1)
登陆
HTML表单登陆测试
√ 登陆成功, 跳转到dashboard页 (868ms)
{
"stats": {
"suites": 2,
"tests": 1,
"passes": 1,
"pending": 0,
"failures": 0,
"start": "2020-12-25T08:27:59.361Z",
"end": "2020-12-25T08:28:02.007Z",
"duration": 2646
},
"tests": [
{
"title": "登陆成功, 跳转到dashboard页",
"fullTitle": "登陆 HTML表单登陆测试 登陆成功, 跳转到dashboard页",
"duration": 868,
"currentRetry": 0,
"err": {
}
}
],
"pending": [],
"failures": [],
"passes": [
{
"title": "登陆成功, 跳转到dashboard页",
"fullTitle": "登陆 HTML表单登陆测试 登陆成功, 跳转到dashboard页",
"duration": 868,
"currentRetry": 0,
"err": {
}
}
]
}
1 passing (3s)
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 1 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 2 seconds │
│ Spec Ran: testConfig.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: D:\Cypress\node_modules\.bin\cypress\videos\testConfig.js.m (0 seconds)
p4
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ √ testConfig.js 00:02 1 1 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
√ All specs passed! 00:02 1 1 - - -
![自动化测试框架[Cypress自定义测试报告详解]_第4张图片](http://img.e-com-net.com/image/info8/532745548d584cfd9b4b2c2f600a891a.jpg)
使用npm/yarn执行测试
理论是相通的，通过配置文件自行扩展即可