Cypress - blur() Method Last Updated : 08 Oct, 2024 Comments Improve Suggest changes Like Article Like Report When you use the blur() method in Cypress, it's like clicking away from a specific part of a webpage, like an input field. This helps simulate how a real user would interact with the page. It's especially useful when testing websites that do certain things when you focus or unfocus on certain parts of the page.UsagesThe blur() method is commonly used in the following scenarios:To test focus-related events, such as onblur or onfocusout eventsTo simulate user interactions, such as clicking away from an input fieldTo test the behavior of an application when an element loses focusSyntaxThe syntax for the blur() method is as follows:cy.get(selector).blur()Where selector is the CSS selector of the element that you want to blur.ArgumentsThe blur() method does not take any arguments.Example 1: Blurring an Input FieldLet's say we have an HTML page with an input field, and we want to test that the input field loses focus when we click away from it.HTML Code: HTML <!DOCTYPE html> <html> <head> <title>Blur Example 1</title> </head> <body> <input id="myInput" type="text" /> <button id="myButton">Click me!</button> </body> </html> Javascript code: JavaScript describe('Blur Example 1', () => { it('should blur the input field', () => { cy.visit('https://example.com/blur-example-1') cy.get('#myInput').focus() cy.get('#myButton').click() cy.get('#myInput').should('not.be.focused') }) }) Output:OutputExample 2: Blurring a TextareaLet's say we have an HTML page with a textarea, and we want to test that the textarea loses focus when we click away from it.HTML Code: HTML <!DOCTYPE html> <html> <head> <title>Blur Example 2</title> </head> <body> <textarea id="myTextarea">Hello, World!</textarea> <button id="myButton">Click me!</button> </body> </html> Javascript code: JavaScript describe('Blur Example 2', () => { it('should blur the textarea', () => { cy.visit('https://example.com/blur-example-2') cy.get('#myTextarea').focus() cy.get('#myButton').click() cy.get('#myTextarea').should('not.be.focused') }) }) Output:OutputConclusionIn short, the blur() method in Cypress is a really helpful tool for testing how a website works when you interact with it like a real user. It helps you make sure that your website does what it's supposed to do when you click away from certain parts of the page. Comment More infoAdvertise with us Next Article Cypress - blur() Method A ankushmispc9l Follow Improve Article Tags : Software Testing Testing Tools Cypress Similar Reads Cypress - clear() Method The Cypress clear() method is a powerful tool used to clear the values of form elements, such as input fields and text areas. In this article, we will explore the Cypress clear method in detail, including its syntax, usage, and examples.SyntaxThe syntax for the Cypress clear method is as follows:cy. 2 min read Cypress - as() Method The as() method in Cypress is used to create aliases for elements or other values, which can then be referenced later in your tests. This is useful for making your tests more readable and efficient by avoiding repetitive code and simplifying complex selectors.Table of ContentUsageSyntaxArgumentsExam 4 min read Cypress - click() Method The click() method in Cypress is a command that simulates a click event on an element. It can be used to interact with web pages in a way that mimics how a user would click on an element. This method can also be used to test web applications.Usages of Cypress - click() MethodIt simulates a click eve 3 min read Cypress - clock() Method The clock() method in Cypress is used to control and manipulate the clock in our tests. This allows developers to test time-dependent code more effectively by controlling the passage of time and simulating the behavior of timers and intervals.Syntax:cy.clock()Usage of Cypress - clock() MethodThe clo 4 min read Cypress - closest() Method Being an end-to-end testing tool, Cypress eases the work of web application testing for developers without being overly technical. One of the useful methods provided by Cypress is the closest() method. Imagine that you are working with an application where you need to move up the node tree in search 6 min read Cypress - check() Method Cypress is a popular testing framework for web applications. It provides a lot of useful methods to interact with web pages, including the check() method. In this article, we will explore the check() method in Cypress, its usage, syntax, arguments, and examples.Usages of Cypress - check() MethodThe 3 min read Cypress - get() Method The get() method in Cypress is used to select elements from the DOM using a CSS selector. Once selected, you can chain various Cypress commands to interact with or assert properties on these elements. It's a core command that you'll use frequently in your Cypress tests.Usageget() is versatile and ca 3 min read Cypress - not() Method The not() method in Cypress is used to exclude elements from a selection that match certain criteria or selectors. This method is particularly helpful when you want to interact with a group of elements but need to exclude specific ones that meet a condition. It provides a more refined control over e 4 min read Cypress - end() Method The end() method in Cypress is used to terminate a chain of commands and reset the subject to undefined. This can be useful when we want to break the current command chain and start a new one without carrying over the previous subject.Syntax:cy.end()Usage of end() MethodThe end() method is helpful i 4 min read Cypress - log() Method 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, op 4 min read Like