Cypress blur Command

The Blur command in cypress blurs a focused element, which removes the focus of a specifically targeted element. If we want to know that the element is getting blurred, we must include a focus command or check via focused.

Syntax

.blur()
.blur(options)

Arguments Used In Blur Command

Options

• Log: To display the command in the command log. 
• Timeout: Wait for some particular thing to get finished before timing out.
• Force: This option disables checking if an element is focused and forces the action.

Correct Use Of Blur

cy.get('[id="pass"]').type('rataalada').blur()

Once after data input, the element's focus gets blurred and out of focus.

cy.get('[id="user"]').focus().blur()

It works the same way. First, it focuses on the element and then blurs out of the element.

Wrong Use Of Blur

cy.blur('input') 

Blur cannot be chained off with cy.

cy.window().blur()

Windows do not yield DOM elements.

What does it yield?

Blur yields the same subject it was yielded from the previous command.

What is its actionability?

Blur is not an action command and does not follow the same rules as other commands like waiting for actionability. Blur is a typical helpful command used as a shortcut and does not blur elements.

Does it timeout?

Blur can timeout when the browser does not receive any blur event.

Rules Followed While Using Blur

1. Blur should be chained off to a command that yields a DOM element.
2. Blur requires focus.
3. Blur will automatically wait for assertions.
4. Blur can time out waiting for assertions.

Example of Cypress Blur Command

Let us see something in real-time.

it('Type Username And Password',()=>{
    cy.visit('https://www.programsbuzz.com/user/login')
    cy.get('form').within(()=>{
        cy.xpath("//input[@id='edit-name']").focus().type('Rataalada').blur()         
    })
})

• Here, we are getting an element called edit-name to input something in the field.
• While we focus the element and blur it out after it finishes the job.
• This means the focus has been removed from the element.

• Here we can see the blur yields the same as the focus yields from the previous subject.

Let us check whether it lost focus using the focused command.

Without Blur

describe('blur Command',()=>{
    before(() => {
        cy.visit('https://www.programsbuzz.com/user/login')
        
        })
        it('Type Username And Password',()=>{
            cy.get('form').within(()=>{
                cy.xpath("//input[@id='edit-name']").type('Rataalada')
                cy.focused()     
           })
        })
})

• We can see that it has focused on the first field it entered and done operations also, we can also see the yield of focus.

With Blur:

describe('blur Command',()=>{
    before(() => {
        cy.visit('https://www.programsbuzz.com/user/login')
        
        })
        it('Type Username And Password',()=>{
            cy.get('form').within(()=>{
                cy.xpath("//input[@id='edit-name']").type('Rataalada').blur()
                cy.focused()     
           })
        })
})

We can see that the blur yielded with the same subject now blurs out the element, or we can say removed focus of the element directly, which made the DOM unable to find that individual element.