Cypress - invoke() Method
Last Updated :
27 Jul, 2025
The invoke() method provides a way to interact with an element’s properties or methods that aren't directly accessible through standard Cypress commands. For example, you can use it to get the value of a property, call a method like textContent or val(), or even trigger a function defined in the DOM element's context.
Usage of invoke() Method
invoke() method in cypress is used when you want to perform operations like retrieving an element's text, attribute, or other properties, or calling methods on the element.
Syntax
cy.get(selector).invoke(functionName, ...args)
- functionName: The name of the function or property you want to invoke on the selected element.
- ...args: Optional arguments to pass to the function being invoked.
Examples of invoke() Method
Example 1: Retrieving Text Content
In this example, we'll use invoke() to retrieve the text content of an element.
HTML File (index.html): Save this HTML file in your local server directory (e.g., localhost:3000):
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 - Invoke Example</title>
</head>
<body>
<p id="message">Hello, Cypress!</p>
</body>
</html>
Cypress Test File (invoke_example1_spec.js): Save this file in the cypress/e2e (for Cypress v10 and above) or cypress/integration (for older versions) folder of your Cypress project:
JavaScript
describe('Using `invoke()` to Retrieve Text Content', () => {
beforeEach(() => {
// Visit the HTML file hosted on localhost:3000
cy.visit('http://localhost:3000');
});
it('should retrieve the text content of the paragraph', () => {
// Get the paragraph element and invoke the `text` property
cy.get('#message').invoke('text').should('equal', 'Hello, Cypress!');
});
});
Explanation:
- Visit the Page: Navigate to the HTML page using cy.visit().
- Invoke text Property: Use cy.get('#message').invoke('text') to retrieve the text content of the paragraph.
- Assert Text Content: Verify that the text content equals "Hello, Cypress!" using .should('equal', 'Hello, Cypress!').
Output:
OutputExample 2: Retrieving and Setting Element Attributes
In this example, we'll use invoke() to get and set an attribute on an element.
HTML File (index.html): Save this HTML file in your local server directory (e.g., localhost:3000):
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 - Invoke Example</title>
</head>
<body>
<img id="logo" src="logo.png" alt="Company Logo">
<button id="changeLogo">Change Logo</button>
<script>
document.getElementById('changeLogo').addEventListener('click', function() {
document.getElementById('logo').setAttribute('src', 'new-logo.png');
});
</script>
</body>
</html>
Cypress Test File (invoke_example2_spec.js): Save this file in the cypress/e2e (for Cypress v10 and above) or cypress/integration (for older versions) folder of your Cypress project:
JavaScript
describe('Using `invoke()` to Get and Set Attributes', () => {
beforeEach(() => {
// Visit the HTML file hosted on localhost:3000
cy.visit('http://localhost:3000');
});
it('should change the logo source after clicking the button', () => {
// Click the button to change the logo source
cy.get('#changeLogo').click();
// Verify that the `src` attribute of the image has changed
cy.get('#logo').invoke('attr', 'src').should('equal', 'new-logo.png');
});
});
Explanation:
- Visit the Page: Navigate to the HTML page using cy.visit().
- Click the Button: Use cy.get('#changeLogo').click() to simulate a click that changes the image source.
- Invoke attr Property: Use cy.get('#logo').invoke('attr', 'src') to retrieve the src attribute of the image.
- Assert Attribute Value: Verify that the src attribute has been updated to new-logo.png using .should('equal', 'new-logo.png').
Output:
OutputConclusion
The invoke() method in Cypress is a powerful tool for accessing and manipulating DOM elements beyond the standard commands. Whether you need to retrieve text, attributes, or call specific methods on an element, invoke() provides the flexibility to interact with elements in a more detailed and customized way. These examples demonstrate how to use invoke() for both retrieving and setting properties, helping ensure your application behaves as expected.