The log() method in Cypress is a debugging tool that allows us to log custom messages to the Cypress Command Log during test execution. This method can help track the flow of our tests and debugging issues and provide contextual information about the actions being performed.
Syntax:
cy.log(message, options)
Usage of Cypress - log() Method
The log() method is typically used within test cases to output messages or variables at various points in the test. This functionality helps developers understand what is happening during the test run and aids in diagnosing problems when tests fail.
Arguments
- message: The message will be logged as a string or a variable.
- options: An optional object to customize the logging behavior (e.g.,
log: false to suppress logging).
Examples
Example 1: Basic Logging
In this example, we’ll use log() to output a simple message during a test.
HTML File (index1.html) This file serves as a simple page to hold our tests (it can be empty).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page - Log Example 1</title>
</head>
<body>
<h1>Basic Logging Example</h1>
<p>This page is used to demonstrate the Cypress log() method.</p>
</body>
</html>
Cypress Test File (log_example1_spec.js) Save this file in the cypress/e2e (for Cypress v10 and above) or cypress/integration (for older versions) folder of our Cypress project:
JavaScript
describe('Using `log()` Method', () => {
it('should log a message to the command log', () => {
cy.visit('http://localhost:3000'); // Visit the HTML page
cy.log('This is a log message.'); // Log a simple message
});
});
Explanation:
- Log Message: Call
cy.log() with a simple message to output to the command log.
Output:
The command log will display the message "This is a log message." when the test runs.
Example 2: Logging Variable Values
In this example, we’ll use log() to output the value of a variable during a test.
HTML File (index.html) This file serves as a simple page to hold our tests (it can be empty).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page - Log Example 2</title>
</head>
<body>
<h1>Variable Logging Example</h1>
<p>This page is used to demonstrate logging variable values in Cypress.</p>
</body>
</html>
Cypress Test File (log_example2_spec.js) Save this file in the cypress/e2e (for Cypress v10 and above) or cypress/integration (for older versions) folder of our Cypress project:
JavaScript
describe('Using `log()` Method for Variable Logging', () => {
it('should log the value of a variable', () => {
cy.visit('http://localhost:3000'); // Visit the HTML page
const count = 5; // Example variable
cy.log(`The current count is: ${count}`); // Log the value of the variable
});
});
Explanation:
- Define Variable: Create a variable named
count. - Log Variable Value: Call
cy.log() with a template string to output the variable's value.
Output:
The command log will display the message "The current count is: 5" when the test runs.
Example 3: Conditional Logging
In this example, we’ll use log() in combination with conditional statements to log messages based on test conditions.
HTML File (index.html) This file serves as a simple page to hold our tests (it can be empty).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page - Log Example 3</title>
</head>
<body>
<h1>Conditional Logging Example</h1>
<p>This page is used to demonstrate conditional logging in Cypress.</p>
</body>
</html>
Cypress Test File (log_example3_spec.js) Save this file in the cypress/e2e (for Cypress v10 and above) or cypress/integration (for older versions) folder of our Cypress project:
JavaScript
describe('Using `log()` Method for Conditional Logging', () => {
it('should log messages based on conditions', () => {
cy.visit('http://localhost:3000'); // Visit the HTML page
const isVisible = true; // Example condition
if (isVisible) {
cy.log('The element is visible.'); // Log if true
} else {
cy.log('The element is not visible.'); // Log if false
}
});
});
Explanation:
- Define Condition: Create a boolean variable
isVisible. - Conditional Logging: Use an
if statement to log different messages based on the condition.
Output:
The command log will display "The element is visible." when the test runs, depending on the value of isVisible.
Conclusion
The log() method in Cypress is a useful tool for debugging and tracking the execution of tests. By logging custom messages and variable values, we can gain insights into our test flow, making it easier to diagnose issues and understand test behavior.