Overwrite the cy.log command to print to both the Command Log and to the terminal
npm install cypress-log-to-term> Overwrite the cy.log command to print to both the Command Log and to the terminal
Read the blog posts
- Two Simple Tricks To Make Your Cypress Tests Better.
- Collect All URLs Visited During Cypress Test
This plugin is covered in my Cypress Plugins course 🎓:
- Lesson a3: Log the messages from the test to the terminal
- Lesson a4: Log the messages using the plugin cypress-log-to-term
Install this plugin from the NPM registry using NPM or Yarn or your favorite Node package manager.
``text`Install using NPM
$ npm i -D cypress-log-to-termInstall using Yarn
$ yarn add -D cypress-log-to-term
Include the plugin from your support or spec file
`js`
// cypress/e2e/spec.cy.js
// https://github.com/bahmutov/cypress-log-to-term
import 'cypress-log-to-term/commands'
Include the plugin from your cypress.config.js file's setupNodeEvents callback
`js
// cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
// baseUrl, etc
supportFile: false,
fixturesFolder: false,
setupNodeEvents(on, config) {
// register the "cypress-log-to-term" plugin
// https://github.com/bahmutov/cypress-log-to-term
// IMPORTANT: pass the "on" callback argument
require('cypress-log-to-term')(on)
},
},
})
`
Markdown bold characters ** are automatically removed before passing them to the task to be printed.
The cy.log yields the current subject to the next command, because it should.
`js`
cy.wrap(42).log().should('equal', 42)
This plugins adds format string and format callback function feature to the cy.log command. For example, the "standard" cy.log command could only print a string argument
`js`
cy.wrap({ name: 'Joe' }).log('the name')
// prints "the name"
This module allows you to print the current subject
`js`
cy.wrap({ name: 'Joe' }).log()
// prints '{"name":"Joe"}'
Complex objects are supported
`js`
cy.wrap([1, 'hello', { name: 'Joe' }]).log()
// prints '[1,"hello",{"name":"Joe"}]'
You can add a string argument and insert the formatted subject into it
`js`
cy.wrap({ name: 'Joe' }).log('person is %o')
// prints 'person is {"name":"Joe"}'
This is equivalent to {0} notation
`js`
cy.wrap({ name: 'Joe' }).log('person is {0}')
// prints 'person is {"name":"Joe"}'
You can even access the properties of the subject
`js`
cy.wrap({ name: 'Joe' }).log('my name is {0.name}')
// prints 'my name is Joe'
Deep properties are allowed
`js`
cy.wrap([{ name: 'Joe' }, { name: { first: 'Anna' } }])
// from the subject (accessed via {0})
// grab the property "1" (which is the second item in our array)
// then grab the path "name.first"
.log('her name is {0.1.name.first}')
// prints 'her name is Anna'
You can pass a callback function to the overwritten cy.log command. This way you can return a formatted string given the subject value.
`jsname is ${p.name}
const person = { name: 'Joe' }
cy.wrap(person).log((p) => )`
// prints 'name is Joe'
cy.wrap([1, 2, 3]).log((list) => list[1])
// prints "2"
If you return non-string result, cy.log will try its best to serialize it
`js`
cy.wrap({ name: 'Me' }).log((x) => x) // {"name":"Me"}
If the subject to be serialized has circular references, they are safely converted to string
`js`
const obj = {
name: 'object',
}
obj.next = obj
// try to log a circular object
cy.wrap(obj, { log: false }).log()
// {"name":"object","next":"[Circular]"}
See circular.cy.js
Are serialized with main properties (id, class, attributes) and the number of matched elements
`html`Hello
`js`
cy.get('h1').log()
// $ of 1
If there are a lot of yielded elements, only the first and the last one are logged
`html`
`js`
cy.get('#people li').log()
// $ of 5 [
Note: when serializing, the log respects the chai.config.truncateThreshold setting. To log more info, increase it in your spec or support file:
` Test pagehtml`
`js`
cy.get('#people li').log()
// default
// $ of 1
// $ of 1
Tip: use the format string to better explain what the elements are
`js`
cy.get('#people li').log('list of people %o')
// list of people $ of 5 [
See dom.cy.js
This package includes TypeScript command definitions for its custom commands in the file src/index.d.ts. To use it from your JavaScript specs:
`js`
///
If you are using TypeScript, include this module in your types list
`json``
{
"compilerOptions": {
"types": ["cypress", "cypress-log-to-term"]
}
}
Author: Gleb Bahmutov <gleb.bahmutov@gmail.com> © 2022
- @bahmutov
- glebbahmutov.com
- blog
- videos
- presentations
- cypress.tips
- Cypress Tips & Tricks newsletter
License: MIT - do anything with the code, but don't blame me if it does not work.
Support: if you find any problems with this module, email / tweet /
open issue on Github
Copyright (c) 2022 Gleb Bahmutov <gleb.bahmutov@gmail.com>
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.